echarts年龄饼图_echarts饼图配置

echarts饼图配置

1.开发环境 vue+element+echarts

2.电脑系统 windows10 专业版

3.在开发的过程中,我们总是会使用到图表,也有很多框架以及图表框架,这里我选择的是 echarts,本次我使用的是 echarts中的饼图,效果图如下:

4.在这里主要看到与官方的区别是,左边方形的颜色和右边饼图直接的间距,这个是怎么配置的呢?代码如下:// 指定图表的配置项和数据

let option: any = {

tooltip: {

trigger: "item",

formatter: "{a} 
{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,是不是很棒,让我们一起努力走向巅峰!既然我们选择了这个领域,就不要认输,不要放弃,不要低头,加油!