官网：http://echarts.baidu.com/ ## 一、设置 markLine ~~~ markLine: { silent: true, symbolSize: 1, label: { show: false }, data: [ { yAxis: 75, lineStyle: { normal: { width: 2, color: '#F43E3D', type: 'solid' } } } ] } ~~~ ## 二、设置实线/虚线 path 在线绘制SVG：https://c.runoob.com/more/svgeditor/ ~~~ legend: { right: 0, textStyle: { color: '#aaa' }, itemWidth: 24, itemHeight: 2, data: [ {name: '实际', icon: 'path://M0 0 L100 0 L100 2 L0 2 z'}, {name: '预计', icon: 'path://M0 0 L20 0 L20 2 L0 2 M30 0 L50 0 L50 2 L30 2 M60 0 L80 0 L80 2 L60 2'} ], selectedMode: false } ~~~ 通过itemStyle的color设置颜色 ~~~ itemStyle: { normal: { color: '#FFB503' } } ~~~ ## 三、dataZoom扁平化配置  ~~~ dataZoom: [ { type: 'slider', height: 10, bottom: 38, start: 0, end: 50, borderColor: 'transparent', handleSize: 0, backgroundColor: 'rgba(255,255,255,0.1)', handleStyle: { color: 'rgba(255,255,255,0.2)' }, showDetail: false, } ] ~~~ ## 四、去除line的圆点 ~~~ showSymbol: false, lineStyle: { normal: { color: '#FF9900' } }, itemStyle: { normal: { color: '#FF9900', borderColor: '#FF9900' } } ~~~ ## 五、text属性的fontSize为奇数的时候会斗动 ## 六、高亮配置  ~~~ // ... xAxis : { type : 'category', data : [ {value: 0, textStyle: {color: '#333', backgroundColor: 'transparent'}}, {value: 1, textStyle: {color: '#fff', backgroundColor: '#E0830F', width: 15, rich: {}}}, {value: 2, textStyle: {color: '#333', backgroundColor: 'transparent'}} ], axisTick: {show: false}, axisLine: {lineStyle: {color: '#ccc'}}, axisLabel: {margin: 5} }, // ... { type: 'bar', itemStyle: {normal: {color: 'rgba(255,0,0,0.3)'}}, data: [null, 300, 300], barGap: '-66%', // barGap: '50%', // barCategoryGap: '50%', barWidth: 45 }, ~~~ ## 七、修改滚动条样式 ~~~ dataZoom: { type: 'slider', height: 10, startValue: 0, endValue: 23, handleSize: 0, fillerColor: 'rgba(0,0,0,0.15)', showDetail: false, borderColor: 'transparent', dataBackground: { lineStyle: {color: 'transparent'}, areaStyle: {color: 'transparent'} } } ~~~ ## 八、在有dataZoom的情况下，如果坐标刻度不对，可以是startValue和endValue的问题