1.折线图与柱状图鼠标hover效果
-
tooltip:{ width:20, axisPointer:{ type:'shadow' }, fommatter(params){ return params[0] //params是图表数据,为数组,在有两个数据(折线图或柱状图堆叠的情况)的情况下可通过params来区分数据源 } }
2.x轴与Y轴配置
xAxis:{ name:'x轴标记', nameTextStyle:{ color:'#fff' //X轴标记颜色 }, nameLocation:'end', //有多个参数,可参考echarts文档 axisLabel:{ rotate:'45', //x轴标记旋转角度 textStyle:{ color:'#fff', fontSize:'12px' } }, splitLine:{ lineStyle:{ color:['#fff'] //分割线颜色 show:false //是否显示分割线,默认为true } } }, yAxis:{ //参数配置与X轴一致 },
3.折线图与柱状图配置series,折线图阴影部分渐变色(Vue中未配置全局变量的话,可重新引入echarts实例来实现)
series:[ //series为一个数组可接受多个数据源(需要折线图或柱状图堆叠时可配置多个) { name:'', type:'', //控制是折线图或饼图或其他类型 data:data, //数据源 smooth:true, //折线图是否平滑显示(默认为false) lineStyle:{ color:'#fff' //折线颜色 }, areaStyle:{ color: new $echarts.graphic.linearGradient(0,0,0,1,[ //折线图阴影区域渐变色(offset为偏移量,即从0-1颜色变化) {offset:0,color:'rgba(0,255,255,0.8)'}, {offset:1,color:'rgba(0,0,0,0)'} ]) }, } ]
4.饼图中使用graphic来控制饼图title位置及样式
-
// graphic 是原生图形元素组件。可以支持的图形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, graphic: { type: "text", // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, top: "center", // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom,则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。 left: "19%", id: "text1", // 同上 style: { text: numberList, // 文本块文字。可以使用 \n 来换行。[ default: '' ] fill: "#333", // 填充色。 fontSize: 16, // 字体大小 fontWeight: "bold" // 文字字体的粗细,可选'normal','bold','bolder','lighter' } },
5.饼图引导线与引导块配置
-
series:[ { name:'', type:'pie', radius:data, //控制引导线颜色 labelLine:{ type:'dashed' //引导线样式为虚线或者实线 normal:{ length:10, //引导线有两部分,length和length2分别控制两段线的长度 length2:60, lineStyle:{ color:'#fff' } } }, //控制右侧引导块的颜色 itemStyle:{ color:'#fff',//引导块文字颜色(默认与饼图颜色一致) normal:{ //控制引导线上文字颜色和位置,此处a是显示文字区域,b做一个小圆圈在引导线尾部显示 label:{ show:true, //a和b来识别不同的文字区域 formatter:[ '{a|{d}%}',//引导线上面文字 '{b|}' //引导线下面文字 ].join('\n'), //用\n来换行 rich:{ a:{ height:10, width:10, color:'#fff', left:20, padding:[-10,-48] }, b:{ height:3, width:3, lineHeight: 30, marginBottom: 10, borderRadius: 10, backgroundColor:'red', padding:[-10,-48] } }, //饼图颜色,在有的需求里需要把饼图颜色固定,可在此处进行配置 color:function(params){ //设置需要的颜色集合,把params中的对应数据要显示的颜色进行匹配 let colorList = ['#147D6A','#BBBE6A']; if(params.data.code === 1){ return colorList[0]; }else if(params.data.code === 2){ return colorList[1]; } } } } } } ]