echarts API （echarts 圆饼图官网默认样式修改）
app.title = '环形图';
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)" //使用数字模板时有时候需要注意下，有时候设置字体大小不生效时可检查下数字模板是否使用规范。补充一点，在echarts的title属性中设置字体大小。
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie', //声明该图形是什么类型的 pie为饼图
radius: ['50%', '70%'],
startAngle: 30, //控制起始角度 相对应的还有 endAngle 结束角度 minAngle 最小角度
avoidLabelOverlap: true,
label: { //label 标签 即控制圆饼图圆环上面是否显示标签
normal: { //配置标签文字样式
formatter:"{b}\r\n{c}元\r\n占比：{d}%", //此处的换行是文本换行\r\n，不是<br/>
show: true, //true 显示数据标志，false不显示数据标志 官网默认是false
position: 'inner' //数据标签显示的位置，inner表示显示在圆环中，center表示显示在圆环里面，out表示显示在圆环外面（带引导线）,
backgroundColor: '#eee', //背景颜色
borderColor: '#aaa', //边框颜色
borderWidth: 1, //边框粗细
borderRadius: 4, //圆角
},
emphasis: {
show: true,
textStyle: { //设置字体样式
fontSize: '30', //设置字体大小
fontWeight: 'bold' //设置字体样式（加粗）
}
}
},
labelLine: { //引导线
normal: {
show: true //启用引导线
}
},
itemStyle: {
emphasis: {
shadowBlur: 1,
shadowOffsetX: 0,
shadowColor: '#fff',
},
normal: {
label: {
show: true,
formatter: '{b} {d}%',
position: 'inner'
},
labelLine: {
show: true,
}
},
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
其中变量a、b、c在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）
散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）;
标签文字更多配置（label）可参考官网文档
https://echarts.apache.org/examples/zh/editor.html?c=pie-nest
网友评论