echart 圆滑初始化化

圆滑：主题下载对应主题js引入后注入对应名称参数方可使用主题

初始化：tab点击的时候初始化图表涉及到tab切换到的需要延迟加载否则默认宽度为100px

1、创建macarons.js文件

2、页面添加script标签

3、初始化引用e_macarons

创建macarons.js文件,粘贴以下内容

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

var e_macarons = {

// 默认色板

color: [

'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',

'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',

'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',

'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'

],

// 图表标题

title: {

itemGap: 8,

textStyle: {

fontWeight: 'normal',

color: '#008acd' // 主标题文字颜色

}

},

// 图例

legend: {

itemGap: 8

},

// 值域

dataRange: {

itemWidth: 15,

//color:['#1e90ff','#afeeee']

color: ['#2ec7c9','#b6a2de']

},

toolbox: {

color : ['#1e90ff', '#1e90ff', '#1e90ff', '#1e90ff'],

effectiveColor : '#ff4500',

itemGap: 8

},

// 提示框

tooltip: {

backgroundColor: 'rgba(50,50,50,0.5)', // 提示背景颜色，默认为透明度为0.7的黑色

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'line', // 默认为直线，可选为：'line' | 'shadow'

lineStyle : { // 直线指示器样式设置

color: '#008acd'

},

crossStyle: {

color: '#008acd'

},

shadowStyle : { // 阴影指示器样式设置

color: 'rgba(200,200,200,0.2)'

}

},

// 区域缩放控制器

dataZoom: {

dataBackgroundColor: '#efefff', // 数据背景颜色

fillerColor: 'rgba(182,162,222,0.2)', // 填充颜色

handleColor: '#008acd' // 手柄颜色

},

// 网格

grid: {

borderColor: '#eee'

},

// 类目轴

categoryAxis: {

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: '#008acd'

}

},

splitLine: { // 分隔线

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

color: ['#eee']

}

},

// 数值型坐标轴默认参数

valueAxis: {

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: '#008acd'

}

},

splitArea : {

show : true,

areaStyle : {

color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']

}

},

splitLine: { // 分隔线

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

color: ['#eee']

}

},

polar : {

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: '#ddd'

}

},

splitArea : {

show : true,

areaStyle : {

color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']

}

},

splitLine : {

lineStyle : {

color : '#ddd'

}

},

timeline : {

lineStyle : {

color : '#008acd'

},

controlStyle : {

normal : { color : '#008acd'},

emphasis : { color : '#008acd'}

},

symbol : 'emptyCircle',

symbolSize : 3

},

// 柱形图默认参数

bar: {

itemStyle: {

normal: {

borderRadius: 5

},

emphasis: {

borderRadius: 5

}

},

// 折线图默认参数

line: {

smooth : true,

symbol: 'emptyCircle', // 拐点图形类型

symbolSize: 3 // 拐点图形大小

},

// K线图默认参数

k: {

itemStyle: {

normal: {

color: '#d87a80', // 阳线填充颜色

color0: '#2ec7c9', // 阴线填充颜色

lineStyle: {

width: 1,

color: '#d87a80', // 阳线边框颜色

color0: '#2ec7c9' // 阴线边框颜色

}

},

// 散点图默认参数

scatter: {

symbol: 'circle', // 图形类型

symbolSize: 4 // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2

},

// 雷达图默认参数

radar : {

symbol: 'emptyCircle', // 图形类型

symbolSize:3

//symbol: null, // 拐点图形类型

//symbolRotate : null, // 图形旋转控制

},

map: {

itemStyle: {

normal: {

areaStyle: {

color: '#ddd'

},

label: {

textStyle: {

color: '#d87a80'

}

},

emphasis: { // 也是选中样式

areaStyle: {

color: '#fe994e'

},

label: {

textStyle: {

color: 'rgb(100,0,0)'

}

},

force : {

itemStyle: {

normal: {

linkStyle : {

strokeColor : '#1e90ff'

}

},

chord : {

padding : 4,

itemStyle : {

normal : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

},

chordStyle : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

}

},

emphasis : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

},

chordStyle : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

}

},

gauge : {

startAngle: 225,

endAngle : -45,

axisLine: { // 坐标轴线

show: true, // 默认显示，属性show控制显示与否

lineStyle: { // 属性lineStyle控制线条样式

color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],

width: 10

}

},

axisTick: { // 坐标轴小标记

splitNumber: 10, // 每份split细分多少段

length :15, // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto'

}

},

axisLabel: { // 坐标轴文本标签，详见axis.axisLabel

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

color: 'auto'

}

},

splitLine: { // 分隔线

length :22, // 属性length控制线长

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

color: 'auto'

}

},

pointer : {

width : 5,

color : 'auto'

},

title : {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

color: '#333'

}

},

detail : {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

color: 'auto'

}

},

textStyle: {

fontFamily: '微软雅黑, Arial, Verdana, sans-serif'

}

在页面中引入该js文件

1	`<script` `src="js/macarons.js"></script>`

初始化时,将主题传入

1	`var` `myChart = echarts.init(document.getElementById('main'),e_macarons);`

1、创建macarons.js文件

2、页面添加script标签

3、初始化引用e_macarons

创建macarons.js文件,粘贴以下内容

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

var e_macarons = {

// 默认色板

color: [

'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',

'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',

'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',

'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'

],

// 图表标题

title: {

itemGap: 8,

textStyle: {

fontWeight: 'normal',

color: '#008acd' // 主标题文字颜色

}

},

// 图例

legend: {

itemGap: 8

},

// 值域

dataRange: {

itemWidth: 15,

//color:['#1e90ff','#afeeee']

color: ['#2ec7c9','#b6a2de']

},

toolbox: {

color : ['#1e90ff', '#1e90ff', '#1e90ff', '#1e90ff'],

effectiveColor : '#ff4500',

itemGap: 8

},

// 提示框

tooltip: {

backgroundColor: 'rgba(50,50,50,0.5)', // 提示背景颜色，默认为透明度为0.7的黑色

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'line', // 默认为直线，可选为：'line' | 'shadow'

lineStyle : { // 直线指示器样式设置

color: '#008acd'

},

crossStyle: {

color: '#008acd'

},

shadowStyle : { // 阴影指示器样式设置

color: 'rgba(200,200,200,0.2)'

}

},

// 区域缩放控制器

dataZoom: {

dataBackgroundColor: '#efefff', // 数据背景颜色

fillerColor: 'rgba(182,162,222,0.2)', // 填充颜色

handleColor: '#008acd' // 手柄颜色

},

// 网格

grid: {

borderColor: '#eee'

},

// 类目轴

categoryAxis: {

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: '#008acd'

}

},

splitLine: { // 分隔线

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

color: ['#eee']

}

},

// 数值型坐标轴默认参数

valueAxis: {

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: '#008acd'

}

},

splitArea : {

show : true,

areaStyle : {

color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']

}

},

splitLine: { // 分隔线

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

color: ['#eee']

}

},

polar : {

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: '#ddd'

}

},

splitArea : {

show : true,

areaStyle : {

color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']

}

},

splitLine : {

lineStyle : {

color : '#ddd'

}

},

timeline : {

lineStyle : {

color : '#008acd'

},

controlStyle : {

normal : { color : '#008acd'},

emphasis : { color : '#008acd'}

},

symbol : 'emptyCircle',

symbolSize : 3

},

// 柱形图默认参数

bar: {

itemStyle: {

normal: {

borderRadius: 5

},

emphasis: {

borderRadius: 5

}

},

// 折线图默认参数

line: {

smooth : true,

symbol: 'emptyCircle', // 拐点图形类型

symbolSize: 3 // 拐点图形大小

},

// K线图默认参数

k: {

itemStyle: {

normal: {

color: '#d87a80', // 阳线填充颜色

color0: '#2ec7c9', // 阴线填充颜色

lineStyle: {

width: 1,

color: '#d87a80', // 阳线边框颜色

color0: '#2ec7c9' // 阴线边框颜色

}

},

// 散点图默认参数

scatter: {

symbol: 'circle', // 图形类型

symbolSize: 4 // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2

},

// 雷达图默认参数

radar : {

symbol: 'emptyCircle', // 图形类型

symbolSize:3

//symbol: null, // 拐点图形类型

//symbolRotate : null, // 图形旋转控制

},

map: {

itemStyle: {

normal: {

areaStyle: {

color: '#ddd'

},

label: {

textStyle: {

color: '#d87a80'

}

},

emphasis: { // 也是选中样式

areaStyle: {

color: '#fe994e'

},

label: {

textStyle: {

color: 'rgb(100,0,0)'

}

},

force : {

itemStyle: {

normal: {

linkStyle : {

strokeColor : '#1e90ff'

}

},

chord : {

padding : 4,

itemStyle : {

normal : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

},

chordStyle : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

}

},

emphasis : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

},

chordStyle : {

lineStyle : {

width : 1,

color : 'rgba(128, 128, 128, 0.5)'

}

},

gauge : {

startAngle: 225,

endAngle : -45,

axisLine: { // 坐标轴线

show: true, // 默认显示，属性show控制显示与否

lineStyle: { // 属性lineStyle控制线条样式

color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],

width: 10

}

},

axisTick: { // 坐标轴小标记

splitNumber: 10, // 每份split细分多少段

length :15, // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto'

}

},

axisLabel: { // 坐标轴文本标签，详见axis.axisLabel

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

color: 'auto'

}

},

splitLine: { // 分隔线

length :22, // 属性length控制线长

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

color: 'auto'

}

},

pointer : {

width : 5,

color : 'auto'

},

title : {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

color: '#333'

}

},

detail : {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

color: 'auto'

}

},

textStyle: {

fontFamily: '微软雅黑, Arial, Verdana, sans-serif'

}

在页面中引入该js文件

1	`<script` `src="js/macarons.js"></script>`

初始化时,将主题传入

1	`var` `myChart = echarts.init(document.getElementById('main'),e_macarons);`