echarts主题定制API

以下为echarts2的主题定制API,部分效果在echarts3上仍旧可以使用

  1 theme = {
  2     // 全图默认背景
  3     // backgroundColor: 'rgba(0,0,0,0)',
  4     
  5     // 默认色板
  6     color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  7             '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
  8             '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  9             '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
 10 
 11     // 图表标题
 12     title: {
 13         x: 'left',                 // 水平安放位置,默认为左对齐,可选为:
 14                                    // 'center' ¦ 'left' ¦ 'right'
 15                                    // ¦ {number}(x坐标,单位px)
 16         y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
 17                                    // 'top' ¦ 'bottom' ¦ 'center'
 18                                    // ¦ {number}(y坐标,单位px)
 19         //textAlign: null          // 水平对齐方式,默认根据x设置自动调整
 20         backgroundColor: 'rgba(0,0,0,0)',
 21         borderColor: '#ccc',       // 标题边框颜色
 22         borderWidth: 0,            // 标题边框线宽,单位px,默认为0(无边框)
 23         padding: 5,                // 标题内边距,单位px,默认各方向内边距为5,
 24                                    // 接受数组分别设定上右下左边距,同css
 25         itemGap: 10,               // 主副标题纵向间隔,单位px,默认为10,
 26         textStyle: {
 27             fontSize: 18,
 28             fontWeight: 'bolder',
 29             color: '#333'          // 主标题文字颜色
 30         },
 31         subtextStyle: {
 32             color: '#aaa'          // 副标题文字颜色
 33         }
 34     },
 35     
 36     // 图例
 37     legend: {
 38         orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
 39                                    // 'horizontal' ¦ 'vertical'
 40         x: 'center',               // 水平安放位置,默认为全图居中,可选为:
 41                                    // 'center' ¦ 'left' ¦ 'right'
 42                                    // ¦ {number}(x坐标,单位px)
 43         y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
 44                                    // 'top' ¦ 'bottom' ¦ 'center'
 45                                    // ¦ {number}(y坐标,单位px)
 46         backgroundColor: 'rgba(0,0,0,0)',
 47         borderColor: '#ccc',       // 图例边框颜色
 48         borderWidth: 0,            // 图例边框线宽,单位px,默认为0(无边框)
 49         padding: 5,                // 图例内边距,单位px,默认各方向内边距为5,
 50                                    // 接受数组分别设定上右下左边距,同css
 51         itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
 52                                    // 横向布局时为水平间隔,纵向布局时为纵向间隔
 53         itemWidth: 20,             // 图例图形宽度
 54         itemHeight: 14,            // 图例图形高度
 55         textStyle: {
 56             color: '#333'          // 图例文字颜色
 57         }
 58     },
 59     
 60     // 值域
 61     dataRange: {
 62         orient: 'vertical',        // 布局方式,默认为垂直布局,可选为:
 63                                    // 'horizontal' ¦ 'vertical'
 64         x: 'left',                 // 水平安放位置,默认为全图左对齐,可选为:
 65                                    // 'center' ¦ 'left' ¦ 'right'
 66                                    // ¦ {number}(x坐标,单位px)
 67         y: 'bottom',               // 垂直安放位置,默认为全图底部,可选为:
 68                                    // 'top' ¦ 'bottom' ¦ 'center'
 69                                    // ¦ {number}(y坐标,单位px)
 70         backgroundColor: 'rgba(0,0,0,0)',
 71         borderColor: '#ccc',       // 值域边框颜色
 72         borderWidth: 0,            // 值域边框线宽,单位px,默认为0(无边框)
 73         padding: 5,                // 值域内边距,单位px,默认各方向内边距为5,
 74                                    // 接受数组分别设定上右下左边距,同css
 75         itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
 76                                    // 横向布局时为水平间隔,纵向布局时为纵向间隔
 77         itemWidth: 20,             // 值域图形宽度,线性渐变水平布局宽度为该值 * 10
 78         itemHeight: 14,            // 值域图形高度,线性渐变垂直布局高度为该值 * 10
 79         splitNumber: 5,            // 分割段数,默认为5,为0时为线性渐变
 80         color:['#1e90ff','#f0ffff'],//颜色 
 81         //text:['高','低'],         // 文本,默认为数值文本
 82         textStyle: {
 83             color: '#333'          // 值域文字颜色
 84         }
 85     },
 86 
 87     toolbox: {
 88         orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
 89                                    // 'horizontal' ¦ 'vertical'
 90         x: 'right',                // 水平安放位置,默认为全图右对齐,可选为:
 91                                    // 'center' ¦ 'left' ¦ 'right'
 92                                    // ¦ {number}(x坐标,单位px)
 93         y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
 94                                    // 'top' ¦ 'bottom' ¦ 'center'
 95                                    // ¦ {number}(y坐标,单位px)
 96         color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
 97         backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
 98         borderColor: '#ccc',       // 工具箱边框颜色
 99         borderWidth: 0,            // 工具箱边框线宽,单位px,默认为0(无边框)
100         padding: 5,                // 工具箱内边距,单位px,默认各方向内边距为5,
101                                    // 接受数组分别设定上右下左边距,同css
102         itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
103                                    // 横向布局时为水平间隔,纵向布局时为纵向间隔
104         itemSize: 16,              // 工具箱图形宽度
105         featureImageIcon : {},     // 自定义图片icon
106         featureTitle : {
107             mark : '辅助线开关',
108             markUndo : '删除辅助线',
109             markClear : '清空辅助线',
110             dataZoom : '区域缩放',
111             dataZoomReset : '区域缩放后退',
112             dataView : '数据视图',
113             lineChart : '折线图切换',
114             barChart : '柱形图切换',
115             restore : '还原',
116             saveAsImage : '保存为图片'
117         }
118     },
119 
120     // 提示框
121     tooltip: {
122         trigger: 'item',           // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis'
123         showDelay: 20,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
124         hideDelay: 100,            // 隐藏延迟,单位ms
125         transitionDuration : 0.4,  // 动画变换时间,单位s
126         backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色,默认为透明度为0.7的黑色
127         borderColor: '#333',       // 提示边框颜色
128         borderRadius: 4,           // 提示边框圆角,单位px,默认为4
129         borderWidth: 0,            // 提示边框线宽,单位px,默认为0(无边框)
130         padding: 5,                // 提示内边距,单位px,默认各方向内边距为5,
131                                    // 接受数组分别设定上右下左边距,同css
132         axisPointer : {            // 坐标轴指示器,坐标轴触发有效
133             type : 'line',         // 默认为直线,可选为:'line' | 'shadow'
134             lineStyle : {          // 直线指示器样式设置
135                 color: '#48b',
136                 width: 2,
137                 type: 'solid'
138             },
139             shadowStyle : {                       // 阴影指示器样式设置
140                 width: 'auto',                   // 阴影大小
141                 color: 'rgba(150,150,150,0.3)'  // 阴影颜色
142             }
143         },
144         textStyle: {
145             color: '#fff'
146         }
147     },
148 
149     // 区域缩放控制器
150     dataZoom: {
151         orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
152                                    // 'horizontal' ¦ 'vertical'
153         // x: {number},            // 水平安放位置,默认为根据grid参数适配,可选为:
154                                    // {number}(x坐标,单位px)
155         // y: {number},            // 垂直安放位置,默认为根据grid参数适配,可选为:
156                                    // {number}(y坐标,单位px)
157         // width: {number},        // 指定宽度,横向布局时默认为根据grid参数适配
158         // height: {number},       // 指定高度,纵向布局时默认为根据grid参数适配
159         backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
160         dataBackgroundColor: '#eee',            // 数据背景颜色
161         fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
162         handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
163     },
164 
165     // 网格
166     grid: {
167         x: 80,
168         y: 60,
169         x2: 80,
170         y2: 60,
171         // width: {totalWidth} - x - x2,
172         // height: {totalHeight} - y - y2,
173         backgroundColor: 'rgba(0,0,0,0)',
174         borderWidth: 1,
175         borderColor: '#ccc'
176     },
177 
178     // 类目轴
179     categoryAxis: {
180         position: 'bottom',    // 位置
181         nameLocation: 'end',   // 坐标轴名字位置,支持'start' | 'end'
182         boundaryGap: true,     // 类目起始和结束两端空白策略
183         axisLine: {            // 坐标轴线
184             show: true,        // 默认显示,属性show控制显示与否
185             lineStyle: {       // 属性lineStyle控制线条样式
186                 color: '#48b',
187                 width: 2,
188                 type: 'solid'
189             }
190         },
191         axisTick: {            // 坐标轴小标记
192             show: true,       // 属性show控制显示与否,默认不显示
193             interval: 'auto',
194             // onGap: null,
195             inside : false,    // 控制小标记是否在grid里 
196             length :5,         // 属性length控制线长
197             lineStyle: {       // 属性lineStyle控制线条样式
198                 color: '#333',
199                 width: 1
200             }
201         },
202         axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
203             show: true,
204             interval: 'auto',
205             rotate: 0,
206             margin: 8,
207             // formatter: null,
208             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
209                 color: '#333'
210             }
211         },
212         splitLine: {           // 分隔线
213             show: true,        // 默认显示,属性show控制显示与否
214             // onGap: null,
215             lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
216                 color: ['#ccc'],
217                 width: 1,
218                 type: 'solid'
219             }
220         },
221         splitArea: {           // 分隔区域
222             show: false,       // 默认不显示,属性show控制显示与否
223             // onGap: null,
224             areaStyle: {       // 属性areaStyle(详见areaStyle)控制区域样式
225                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
226             }
227         }
228     },
229 
230     // 数值型坐标轴默认参数
231     valueAxis: {
232         position: 'left',      // 位置
233         nameLocation: 'end',   // 坐标轴名字位置,支持'start' | 'end'
234         nameTextStyle: {},     // 坐标轴文字样式,默认取全局样式
235         boundaryGap: [0, 0],   // 数值起始和结束两端空白策略
236         splitNumber: 5,        // 分割段数,默认为5
237         axisLine: {            // 坐标轴线
238             show: true,        // 默认显示,属性show控制显示与否
239             lineStyle: {       // 属性lineStyle控制线条样式
240                 color: '#48b',
241                 width: 2,
242                 type: 'solid'
243             }
244         },
245         axisTick: {            // 坐标轴小标记
246             show: false,       // 属性show控制显示与否,默认不显示
247             inside : false,    // 控制小标记是否在grid里 
248             length :5,         // 属性length控制线长
249             lineStyle: {       // 属性lineStyle控制线条样式
250                 color: '#333',
251                 width: 1
252             }
253         },
254         axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
255             show: true,
256             rotate: 0,
257             margin: 8,
258             // formatter: null,
259             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
260                 color: '#333'
261             }
262         },
263         splitLine: {           // 分隔线
264             show: true,        // 默认显示,属性show控制显示与否
265             lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
266                 color: ['#ccc'],
267                 width: 1,
268                 type: 'solid'
269             }
270         },
271         splitArea: {           // 分隔区域
272             show: false,       // 默认不显示,属性show控制显示与否
273             areaStyle: {       // 属性areaStyle(详见areaStyle)控制区域样式
274                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
275             }
276         }
277     },
278 
279     polar : {
280         center : ['50%', '50%'],    // 默认全局居中
281         radius : '75%',
282         startAngle : 90,
283         splitNumber : 5,
284         name : {
285             show: true,
286             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
287                 color: '#333'
288             }
289         },
290         axisLine: {            // 坐标轴线
291             show: true,        // 默认显示,属性show控制显示与否
292             lineStyle: {       // 属性lineStyle控制线条样式
293                 color: '#ccc',
294                 width: 1,
295                 type: 'solid'
296             }
297         },
298         axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
299             show: false,
300             textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
301                 color: '#333'
302             }
303         },
304         splitArea : {
305             show : true,
306             areaStyle : {
307                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
308             }
309         },
310         splitLine : {
311             show : true,
312             lineStyle : {
313                 width : 1,
314                 color : '#ccc'
315             }
316         }
317     },
318 
319     // 柱形图默认参数
320     bar: {
321         barMinHeight: 0,          // 最小高度改为0
322         // barWidth: null,        // 默认自适应
323         barGap: '30%',            // 柱间距离,默认为柱形宽度的30%,可设固定值
324         barCategoryGap : '20%',   // 类目间柱形距离,默认为类目间距的20%,可设固定值
325         itemStyle: {
326             normal: {
327                 // color: '各异',
328                 barBorderColor: '#fff',       // 柱条边线
329                 barBorderRadius: 0,           // 柱条边线圆角,单位px,默认为0
330                 barBorderWidth: 1,            // 柱条边线线宽,单位px,默认为1
331                 label: {
332                     show: false
333                     // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
334                     //           'inside'|'left'|'right'|'top'|'bottom'
335                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
336                 }
337             },
338             emphasis: {
339                 // color: '各异',
340                 barBorderColor: 'rgba(0,0,0,0)',   // 柱条边线
341                 barBorderRadius: 0,                // 柱条边线圆角,单位px,默认为0
342                 barBorderWidth: 1,                 // 柱条边线线宽,单位px,默认为1
343                 label: {
344                     show: false
345                     // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
346                     //           'inside'|'left'|'right'|'top'|'bottom'
347                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
348                 }
349             }
350         }
351     },
352 
353     // 折线图默认参数
354     line: {
355         itemStyle: {
356             normal: {
357                 // color: 各异,
358                 label: {
359                     show: false
360                     // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
361                     //           'inside'|'left'|'right'|'top'|'bottom'
362                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
363                 },
364                 lineStyle: {
365                     width: 2,
366                     type: 'solid',
367                     shadowColor : 'rgba(0,0,0,0)', //默认透明
368                     shadowBlur: 5,
369                     shadowOffsetX: 3,
370                     shadowOffsetY: 3
371                 }
372             },
373             emphasis: {
374                 // color: 各异,
375                 label: {
376                     show: false
377                     // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
378                     //           'inside'|'left'|'right'|'top'|'bottom'
379                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
380                 }
381             }
382         },
383         //smooth : false,
384         //symbol: null,         // 拐点图形类型
385         symbolSize: 2,          // 拐点图形大小
386         //symbolRotate : null,  // 拐点图形旋转控制
387         showAllSymbol: false    // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
388     },
389     
390     // K线图默认参数
391     k: {
392         // barWidth : null          // 默认自适应
393         // barMaxWidth : null       // 默认自适应 
394         itemStyle: {
395             normal: {
396                 color: '#fff',          // 阳线填充颜色
397                 color0: '#00aa11',      // 阴线填充颜色
398                 lineStyle: {
399                     width: 1,
400                     color: '#ff3200',   // 阳线边框颜色
401                     color0: '#00aa11'   // 阴线边框颜色
402                 }
403             },
404             emphasis: {
405                 // color: 各异,
406                 // color0: 各异
407             }
408         }
409     },
410     
411     // 散点图默认参数
412     scatter: {
413         //symbol: null,      // 图形类型
414         symbolSize: 4,       // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
415         //symbolRotate : null,  // 图形旋转控制
416         large: false,        // 大规模散点图
417         largeThreshold: 2000,// 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式
418         itemStyle: {
419             normal: {
420                 // color: 各异,
421                 label: {
422                     show: false
423                     // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
424                     //           'inside'|'left'|'right'|'top'|'bottom'
425                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
426                 }
427             },
428             emphasis: {
429                 // color: '各异'
430                 label: {
431                     show: false
432                     // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
433                     //           'inside'|'left'|'right'|'top'|'bottom'
434                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
435                 }
436             }
437         }
438     },
439 
440     // 雷达图默认参数
441     radar : {
442         itemStyle: {
443             normal: {
444                 // color: 各异,
445                 label: {
446                     show: false
447                 },
448                 lineStyle: {
449                     width: 2,
450                     type: 'solid'
451                 }
452             },
453             emphasis: {
454                 // color: 各异,
455                 label: {
456                     show: false
457                 }
458             }
459         },
460         //symbol: null,         // 拐点图形类型
461         symbolSize: 2           // 可计算特性参数,空数据拖拽提示图形大小
462         //symbolRotate : null,  // 图形旋转控制
463     },
464 
465     // 饼图默认参数
466     pie: {
467         center : ['50%', '50%'],    // 默认全局居中
468         radius : [0, '75%'],
469         clockWise : false,          // 默认逆时针
470         startAngle: 90,
471         minAngle: 0,                // 最小角度改为0
472         selectedOffset: 10,         // 选中是扇区偏移量
473         itemStyle: {
474             normal: {
475                 // color: 各异,
476                 borderColor: '#fff',
477                 borderWidth: 1,
478                 label: {
479                     show: true,
480                     position: 'outer'
481                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
482                 },
483                 labelLine: {
484                     show: true,
485                     length: 20,
486                     lineStyle: {
487                         // color: 各异,
488                         width: 1,
489                         type: 'solid'
490                     }
491                 }
492             },
493             emphasis: {
494                 // color: 各异,
495                 borderColor: 'rgba(0,0,0,0)',
496                 borderWidth: 1,
497                 label: {
498                     show: false
499                     // position: 'outer'
500                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
501                 },
502                 labelLine: {
503                     show: false,
504                     length: 20,
505                     lineStyle: {
506                         // color: 各异,
507                         width: 1,
508                         type: 'solid'
509                     }
510                 }
511             }
512         }
513     },
514     
515     map: {
516         mapType: 'china',   // 各省的mapType暂时都用中文
517         mapLocation: {
518             x : 'center',
519             y : 'center'
520             // width    // 自适应
521             // height   // 自适应
522         },
523         showLegendSymbol : true,       // 显示图例颜色标识(系列标识的小圆点),存在legend时生效
524         itemStyle: {
525             normal: {
526                 // color: 各异,
527                 borderColor: '#fff',
528                 borderWidth: 1,
529                 areaStyle: {
530                     color: '#ccc'//rgba(135,206,250,0.8)
531                 },
532                 label: {
533                     show: false,
534                     textStyle: {
535                         color: 'rgba(139,69,19,1)'
536                     }
537                 }
538             },
539             emphasis: {                 // 也是选中样式
540                 // color: 各异,
541                 borderColor: 'rgba(0,0,0,0)',
542                 borderWidth: 1,
543                 areaStyle: {
544                     color: 'rgba(255,215,0,0.8)'
545                 },
546                 label: {
547                     show: false,
548                     textStyle: {
549                         color: 'rgba(139,69,19,1)'
550                     }
551                 }
552             }
553         }
554     },
555     
556     force : {
557         // 数据map到圆的半径的最小值和最大值
558         minRadius : 10,
559         maxRadius : 20,
560         density : 1.0,
561         attractiveness : 1.0,
562         // 初始化的随机大小位置
563         initSize : 300,
564         // 向心力因子,越大向心力越大
565         centripetal : 1,
566         // 冷却因子
567         coolDown : 0.99,
568         // 分类里如果有样式会覆盖节点默认样式
569         itemStyle: {
570             normal: {
571                 // color: 各异,
572                 label: {
573                     show: false
574                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
575                 },
576                 nodeStyle : {
577                     brushType : 'both',
578                     color : '#f08c2e',
579                     strokeColor : '#5182ab'
580                 },
581                 linkStyle : {
582                     strokeColor : '#5182ab'
583                 }
584             },
585             emphasis: {
586                 // color: 各异,
587                 label: {
588                     show: false
589                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
590                 },
591                 nodeStyle : {},
592                 linkStyle : {}
593             }
594         }
595     },
596 
597     chord : {
598         radius : ['65%', '75%'],
599         center : ['50%', '50%'],
600         padding : 2,
601         sort : 'none', // can be 'none', 'ascending', 'descending'
602         sortSub : 'none', // can be 'none', 'ascending', 'descending'
603         startAngle : 90,
604         clockWise : false,
605         showScale : false,
606         showScaleText : false,
607         itemStyle : {
608             normal : {
609                 label : {
610                     show : true
611                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
612                 },
613                 lineStyle : {
614                     width : 0,
615                     color : '#000'
616                 },
617                 chordStyle : {
618                     lineStyle : {
619                         width : 1,
620                         color : '#666'
621                     }
622                 }
623             },
624             emphasis : {
625                 lineStyle : {
626                     width : 0,
627                     color : '#000'
628                 },
629                 chordStyle : {
630                     lineStyle : {
631                         width : 2,
632                         color : '#333'
633                     }
634                 }
635             }
636         }
637     },
638 
639     island: {
640         r: 15,
641         calculateStep: 0.1  // 滚轮可计算步长 0.1 = 10%
642     },
643     
644     markPoint : {
645         symbol: 'pin',         // 标注类型
646         symbolSize: 10,        // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
647         //symbolRotate : null, // 标注旋转控制
648         itemStyle: {
649             normal: {
650                 // color: 各异,
651                 // borderColor: 各异,     // 标注边线颜色,优先于color 
652                 borderWidth: 2,            // 标注边线线宽,单位px,默认为1
653                 label: {
654                     show: true,
655                     position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
656                     // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
657                 }
658             },
659             emphasis: {
660                 // color: 各异
661                 label: {
662                     show: true
663                     // position: 'inside'  // 'left'|'right'|'top'|'bottom'
664                     // textStyle: null     // 默认使用全局文本样式,详见TEXTSTYLE
665                 }
666             }
667         }
668     },
669     
670     markLine : {
671         // 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string
672         symbol: ['circle', 'arrow'],  
673         // 标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
674         symbolSize: [2, 4],
675         // 标线起始和结束的symbol旋转控制
676         //symbolRotate : null,
677         itemStyle: {
678             normal: {
679                 // color: 各异,           // 标线主色,线色,symbol主色
680                 // borderColor: 随color,     // 标线symbol边框颜色,优先于color 
681                 borderWidth: 2,          // 标线symbol边框线宽,单位px,默认为2
682                 label: {
683                     show: false,
684                     // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
685                     position: 'inside',  
686                     textStyle: {         // 默认使用全局文本样式,详见TEXTSTYLE
687                         color: '#333'
688                     }
689                 },
690                 lineStyle: {
691                     // color: 随borderColor, // 主色,线色,优先级高于borderColor和color
692                     // width: 随borderWidth, // 优先于borderWidth
693                     type: 'solid',
694                     shadowColor : 'rgba(0,0,0,0)', //默认透明
695                     shadowBlur: 5,
696                     shadowOffsetX: 3,
697                     shadowOffsetY: 3
698                 }
699             },
700             emphasis: {
701                 // color: 各异
702                 label: {
703                     show: false
704                     // position: 'inside' // 'left'|'right'|'top'|'bottom'
705                     // textStyle: null    // 默认使用全局文本样式,详见TEXTSTYLE
706                 },
707                 lineStyle : {}
708             }
709         }
710     },
711 
712     textStyle: {
713         decoration: 'none',
714         fontFamily: 'Arial, Verdana, sans-serif',
715         fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排,额外指定一份
716         fontSize: 12,
717         fontStyle: 'normal',
718         fontWeight: 'normal'
719     },
720 
721     // 默认标志图形类型列表
722     symbolList : [
723       'circle', 'rectangle', 'triangle', 'diamond',
724       'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
725     ],
726     loadingText : 'Loading...',
727     // 可计算特性配置,孤岛,提示颜色
728     calculable: false,              // 默认关闭可计算特性
729     calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
730     calculableHolderColor: '#ccc', // 可计算占位提示颜色
731     nameConnector: ' & ',
732     valueConnector: ' : ',
733     animation: true,
734     animationThreshold: 2500,       // 动画元素阀值,产生的图形原素超过2500不出动画
735     addDataAnimation: true,         // 动态数据接口是否开启动画效果
736     animationDuration: 2000,
737     animationEasing: 'ExponentialOut'    //BounceOut
738 }
View Code

 

posted @ 2017-10-30 12:57  Shinea_SYR  阅读(674)  评论(0编辑  收藏  举报