echarts配置饼图pro
1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在应用 vue+echarts开发的过程中,咱们常常会应用到饼图,上面是我应用的一些分享,心愿对你有所帮忙!
4.echarts官网案例,通过简略,效果图如下:
5.代码如下:
this.Chenoption= { tooltip: { trigger: "item", formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: "vertical", left: 0, itemWidth: 30, show: false, //管制右边方形状态的显示 itemHeight: 16, textStyle: { fontSize: 16, //字体大小 color: "wheat", //字体色彩 }, }, series: [ { name: "", type: "pie", left: 0, radius: ["35%", "75%"], //管制饼图的大小 label: { formatter: ' {b|{b}：} {per|{d}%} ', backgroundColor: "#eee", borderColor: "#aaa", borderWidth: 4, //管制 悬浮信息边框的大小 borderRadius: 4, rich: { a: { color: "#999", lineHeight: 22, align: "center", }, hr: { borderColor: "#aaa", width: "100%", borderWidth: 0.5, height: 0, }, b: { fontSize: 16, lineHeight: 33, }, per: { color: "#eee", backgroundColor: "#334455", padding: [2, 4], borderRadius: 2, }, }, }, data: data, }, ], };6.在做我的项目中,咱们也会有其余的需要,如何把百分比换成具体的数值,成果如下:
7.代码配置如下:
this.Chenoption= { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: ({c})", }, legend: { orient: "vertical", left: 0, itemWidth: 30, show: false, //管制右边方形状态的显示 itemHeight: 16, textStyle: { fontSize: 16, //字体大小 color: "wheat", //字体色彩 }, }, series: [ { name: "", type: "pie", left: 0, radius: ["35%", "75%"], //管制饼图的大小 label: { formatter: " {b|{b}：}{per|{c}} ", backgroundColor: "#eee", borderColor: "#aaa", borderWidth: 4, //管制 悬浮信息边框的大小 borderRadius: 4, rich: { a: { color: "#999", lineHeight: 22, align: "center", }, hr: { borderColor: "#aaa", width: "100%", borderWidth: 0.5, height: 0, }, b: { fontSize: 16, lineHeight: 33, }, per: { color: "#eee", backgroundColor: "#334455", padding: [2, 4], borderRadius: 2, }, }, }, data: data, }, ], };8.次要批改代码:
9.本期的分享到了这里就完结啦,心愿对你有所帮忙!让咱们一起致力走向巅峰!