echarts饼图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts饼图相关的知识，希望对你有一定的参考价值。
参考技术A //基于准备好的dom，初始化echarts实例var myChart = echarts.init(this.$refs.main);
/* 深拷贝一下 生成两个不同的对象 */
this.lineList = JSON.parse(JSON.stringify(this.reportsList));
/* 展示标题 */
this.lineList.title =
text: "华东饼图数据",
;
/* 展示提示框组件 */
this.lineList.tooltip =
/* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */
formatter: 'a <br> b <br> c <br> (d%)'
;
/* 把图例的位置调整一下 */
this.lineList.legend.top = '10%';
this.lineList.legend.left = '0';
/* 只显示华东的饼图数据 */
this.lineList.series.splice(1)
/* 先把图标的类型都改成饼图 */
this.lineList.series[0].type = 'pie';
/* 把图例中除了华东的图例都删掉 */
this.lineList.legend.data.splice(1);
/* 拿到时间集合用来展示饼图的name值 */
let nameList = this.lineList.xAxis[0].data;
/* 拿到数据用来展示饼图的value值 */
let valueList = this.lineList.series[0].data;
/* let data = [
name:"2017-12-27",
value:2999
] */
let newArr = [];
/* 下面的操作是为了把两个数组整合成上面的格式 */
nameList.forEach((r, i) =>
let obj =
name: r,
/* 因为两个数组的长度是一样的，
索引对应的值也是一样的，key和value的值是相对应，
所以直接使用如下方式取值 */
value: valueList[i]
/* 把组装好的对象塞到新数组中 */
newArr.push(obj)
)
/* 给华东的数据组转好格式后重新赋值，为了展示饼图线对应的名字 */
this.lineList.series[0].data = newArr;
/* 设置饼图的圆心的大小和圆的大小 */
this.lineList.series[0].radius = ['10%', '45%'];
/* 设置圆的上下左右的距离 */
this.lineList.series[0].center = ['58%', '60%'];
/* 把圆的形状设置成玫瑰形 */
this.lineList.series[0].roseType = 'area';
/* 给圆设置圆角 */
this.lineList.series[0].itemStyle =
borderRadius: 5
/* 把x轴隐藏 */
this.lineList.xAxis =
show: false
/* 把y轴隐藏 */
this.lineList.yAxis =
show: false
// 绘制图表
myChart.setOption(this.lineList);
window.PieChart = myChart;
,
以上是关于echarts饼图的主要内容，如果未能解决你的问题，请参考以下文章