关于vue.js:echarts饼图配置

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