关于vue.js:echarts饼图配置

49次阅读

共计 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, 是不是很棒, 让咱们一起致力走向巅峰! 既然咱们抉择了这个畛域, 就不要认输, 不要放弃, 不要抬头, 加油!

正文完
 0