共计 1299 个字符,预计需要花费 4 分钟才能阅读完成。
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, 是不是很棒, 让咱们一起致力走向巅峰! 既然咱们抉择了这个畛域, 就不要认输, 不要放弃, 不要抬头, 加油!
正文完