这篇文章主要是写自己用到的echarts图表配置,我们都知道,自己手动在ECharts配置文件去找一
些自己想要的方法是很难找到的,这篇文章就是我把常用的配置整理出来,希望能帮到各位(此文章随时更新,建议收藏到标签)
series:[ minAngle: 5, //默认最小值,值在0~360之间 center: [‘50%‘, ‘50%‘], //改变饼状图位置 radius : ‘55%‘, //改变饼状图大小 radius: [‘35%‘, ‘50%‘], //改变环形图扇形的厚度 hoverAnimation: false, //是否开启鼠标hover环形图变大 avoidLabelOverlap: true, //是否启用防止标签重叠策略 silent: false, //是否关闭扇区所有hover事件 avoidLabelOverlap: false, //是否启用防止标签重叠策略,防止标签间文字的重叠 itemStyle: { normal:{ color:function(params) { var colorList = [‘#4a98ff‘, ‘#ffa338‘, ‘#a33bff‘];//自定义颜色 return colorList[params.dataIndex] }, label:{ show: false, //是否显示标示线和标签 formatter: ‘{b} : {c} ({d}%)‘ }, labelLine :{ show:true } } }, label: { //normal: {//去掉标示线和标示文字(上面那句不起作用的时候请使用这段代码) //position: ‘inner‘, //show : false //} } ]
不要着急,这个也是很简单的,我们只需要把legend的data数据和series的data里name数据设置一样就可以了,如下图
这个时候就有部分同学问了,怎么把总计写在环形图中间呢?并且总计和标识线都同时存在,如下图
首先,对于环形图,官网上面是没有总计这个配置的,官网上面能显示在正中间的只有鼠标hover选中的这条数据。
这里我只是提供思路:显示标示线的同时显示总计,总计是我们自己手写的元素,垂直水平居中就可以了,注意微调一下你的环形图位置,确保你的总计在正中间
如果装图表的盒子是动态宽度(百分比);手动改变屏幕大小,总计不居中了怎么办?
ECharts有一个方法是,监听装图表盒子的宽度,图表会根据当前盒子的大小改变重新去绘制图表
window.addEventListener("resize", function () { myChart.resize(); });
这段代码放在你的渲染之后就可以了,注意,需要放在option对象外面
原文:https://www.cnblogs.com/chensv/p/11304473.html