echarts饼/柱状图相关技巧

1.数据格式均为x轴为数组，即分类，y轴为相应的数组对象。

eg：let x=['name','age']; let y=[{name:'name',value:'yellow'},{name:'age',value:'12'}] ;

2.   修改鼠标移动上去后显示的数据的格式

tooltp:{

trigger:'item'.formatter:'{a}<br/>{b}:{c}({d}%)'

}

3.将左侧的title修改为垂直显示

legend:{orient:"vertical"  //此处将其修改为垂直

,x:'5%',y:'center',textStyle:{color:'#000'},itemHeight:10}  

4.修改饼状图的大小：

serires:[{radius:'70%',center:['50%','50%']}];  //center即为饼状图的大小

5.调整饼状图是否显示支出去的线条:

series:[{itemStyle:{normal:label{show:true,formatter:'{b}:{c}'}}}]

6.修改柱状图的颜色：

legend:{color:['#000']}

7.调整x轴的颜色：

xAxis:[

  {axisLine:{lineStyle:{color:'rgba(178,218,224,0.5)'}}    //此处调整其颜色

     ,splitLine{show:false}}   //此处控制是否显示x轴

]

8.改变柱子的粗细：

series:[{barWidth:'14%'}]

9.改变柱子的间距（让同类的柱子聚集在一起）：

series[{barGap:'20%'}];

 

代码是手撸的，可能有些括号啊那些没有正确匹配，不要直接复制黏贴哟，还望读者见谅。