echarts饼图配置
1.开发环境 vue+element+echarts
2.电脑系统 windows10 专业版
3.在开发的过程中,咱们总是会应用到图表,也有很多框架以及图表框架,这里我抉择的是 echarts,本次我应用的是 echarts中的饼图,效果图如下:
4.在这里次要看到与官网的区别是,右边方形的色彩和左边饼图间接的间距,这个是怎么配置的呢?代码如下:
// 指定图表的配置项和数据 let option: any = { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)", }, legend: { orient: "vertical", left: 20, itemWidth: 30, itemHeight: 16, textStyle: { fontSize: 16, //字体大小 color: 'wheat', //字体色彩 }, }, series: [ { name: "拜访起源", type: "pie", left:40, radius: ["24%", "75%"], //管制饼图的大小 label: { formatter: "{hr|}n {b|{b}：}{c} {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: [ { value: 335, name: "中转", }, { value: 310, name: "邮件营销", }, { value: 234, name: "联盟广告", }, { value: 135, name: "视频广告", }, { value: 1048, name: "百度", }, { value: 251, name: "谷歌", }, { value: 147, name: "必应", }, { value: 102, name: "其余", }, ], }, ], };5.其实次要的配置代码:
legend: { orient: "vertical", left: 20,//右边方形和右边的间距 itemWidth: 30,//右边方形的宽度 itemHeight: 16,//右边放行的高度 textStyle: { fontSize: 16, //右边方形字体大小 color: 'wheat', //右边方形字体色彩 }, },series 属性上面是的left:40,//示意左边的饼图和右边方形之间的间距6.本期的教程到了这里就完结啦,是不是很nice,是不是很棒,让咱们一起致力走向巅峰!既然咱们抉择了这个畛域,就不要认输,不要放弃,不要抬头,加油!