Echarts 折线图属性整理

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

转自:https://www.cnblogs.com/liupengfei13346950447/articles/10788712.html

推荐这些文章:

Echarts饼状图属性整理

1 //-------- 标题 --------
2 title: {
3 text: '学生生源地来源分布图',
4 subtext: '模拟数据',
5 // x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
6 x: 'center',
7 // y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {numbe...

Echarts饼图之圆环图

需求:

页面上加载一个echarts环形图。

来由:

身为一个Java开发人员,被项目经理拉过来写页面,心里也是很苦逼~可是也没办法,只能硬着头皮干啊,直接上代码

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('t_2'));

// 指定图表的配置项和数据
var option = {
title: {
text: '工业园区预警总数',
subtext: '178658',
x: 'center',
...

makeapie_折线图

option = {
backgroundColor: '#080b30',
title: {
text: '哎呦,不错哦',
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: 'center',
},
tooltip: {
trigger: 'axis',
axisPo...

Vue 使用Echarts

在vue中使用echarts有两种方法
一、安装并全局引入
1、通过npm获取echarts

npm install echarts --save

2、在 main.js 中添加下面两行代码

import echarts from 'echarts'

Vue.prototype.$echarts = echarts //挂载到Vue实例上面

二、使用  https://echarts.apache.org/examples/zh/index.html#chart-type-pie

<template>
<div>
...

echarts 折线图配置项

var option = {
// 折线对应的标题
legend: {
data: ['总收入', '订单笔数'],
right: 10,
top: 3
},
// 布局位置
grid: {
top: '50px',
left: '4%',
right: '2%',
bottom: '4%',
containLabel: true
},
// 横坐标刻度文字数据展示
x...

Echarts 环形图 每项之间有间隙

option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center',
textStyle:{
color:'#fff'
}
},
backgroundColor:"#000",
color:["#EEF16C", "#FD583E", "#0D4197"],
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '...

Echarts 底部加table

效果图

 
 
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts 底部加table</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<style>...

ECharts 折线图之区域面积图

 

 

 

装ECharts的容器必须指明宽高

1 <div id="chart" class="chart"></div>

 

1 .chart {
2 width: 100%;
3 height: 100%;
4 }

 

1 chartFun() {
2 let eCharts = require("echarts");
3 let myChart = eCharts.init(document.getElementById("chart"));
4 ...

Echarts 圆形立体柱状图

先放个效果图

const resData = [
{ label: "上海", value: 66 },
{ label: "北京", value: 26 },
{ label: "苏州", value: 35 },
{ label: "杭州", value: 56 },
{ label: "无锡", value: 76 },
{ label: "哈尔滨", value: 54 },
{ label: "济南", value: 10 },
{ label: "石...

【前端数据可视化】Echarts 基础指令

ECharts是什么
  一个基于 JavaScript 的开源可视化图表库
ECharts 的绘图流程是怎样的?

引入 js 库
编写渲染容器 DOM,添加 width 和 height 样式属性
获取渲染 DOM 对象
初始化 ECharts 对象
编写 option 参数
调用 setOption 完成渲染

入门案例:销售柱状图

 
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doc...

文章标题:Echarts 折线图属性整理
文章链接:https://www.dianjilingqu.com/51323.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>