1. 效果如图，应用了echarts官网的饼图例子作说明

image.png

2. 配置如下

var data=[

{ value: 335, name: '直接访问' },

{ value: 310, name: '邮件营销' },

{ value: 234, name: '联盟广告' },

{ value: 135, name: '视频广告' },

{ value: 1548, name: '搜索引擎' }

]

// 指定图表的配置项和数据

var option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],

icon:"circle",

formatter:function(name){

let target;

for(let i=0;i

if(data[i].name===name){

target=data[i].value

}

}

let arr=["{a|"+target+"}","{b|"+name+"}"]

return arr.join("\n")

},

textStyle:{

rich:{

a:{

fontSize:16,

color:"#EA5504",

padding:10

},

b:{

fontSize:14,

color:"#333"

}

}

}

},

series: [

{

name: '访问来源',

type: 'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: false

}

},

data: [

{ value: 335, name: '直接访问' },

{ value: 310, name: '邮件营销' },

{ value: 234, name: '联盟广告' },

{ value: 135, name: '视频广告' },

{ value: 1548, name: '搜索引擎' }

]

}

]

};

3 分析

3.1 图例图标修改

icon:"circle",

3.2 图例 标题样式修改,lenged 对象里的修改

legend: {

orient: 'vertical',

x: 'left',

data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],

icon:"circle",

formatter:function(name){

let target;

for(let i=0;i

if(data[i].name===name){

target=data[i].value

}

}

let arr=["{a|"+target+"}","{b|"+name+"}"]

return arr.join("\n")

},

textStyle:{

rich:{

a:{

fontSize:16,

color:"#EA5504",

padding:10

},

b:{

fontSize:14,

color:"#333"

}

}

}

主要是应用了富文本样式，具体可以查看Echarts官方API