先看下效果
实际上是双层饼图的结合，对外层进行设置
1.设置option
option: {
polar: {
radius: ['61%', '57%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 1,
show: false,
startAngle: 0,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
},
series: [
// 外层刻度
{
hoverAnimation: false,
type: 'pie',
z: 2,
data: [],
radius: ['65%', '75%'],
zlevel: -2,
label: {
normal: {
position: 'inside',
show: false,
},
},
},
// 内层饼图
{
type: 'pie',
radius: ['56%', '60%'],
center: ['50%', '50%'],
data: [],
labelLine: {
length: 40,
},
// 提示线设置
label: {
formatter: '{a|{c}}\n{hr|}\n {per|{d}%} ',
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#fff',
lineHeight: 26,
align: 'center',
fontSize: 16,
},
hr: {
borderColor: 'auto',
width: '100%',
borderWidth: 1,
height: 0,
},
per: {
color: '#1ef0ed',
backgroundColor: 'rgba(0, 0, 0, 0)',
padding: [5, 5],
borderRadius: 4,
fontSize: 16,
}
}
},
},
]
}
2.处理数据
2.1数据格式
// 监听chartData
watch: {
chartData: {
handler: function (newVal) {
if (newVal) {
this.initEchart();
}
},
deep: true
}
},
// 初始化echarts图
initEchart() {
this.chart = echarts.init(document.getElementById('four-color'))
// 每次初始化时重置this.option.series里的data
this.option.series[0].data = []
this.option.series[1].data = []
// 遍历chartData
this.chartData.map(item=>{
if (item.data > 0) {
let num = Math.round((item.data / this.total) * 100)
for (let i = 0; i < num; ++i) {
this.option.series[0].data.push({
value: 2, // 有颜色部分的宽度
name: i,
ratio: item.ratio,
itemStyle: {
normal: {color: item.color,}
},
}, {
value: 1, // 无颜色部分的宽度
name: '',
itemStyle: {
normal: {
label: { show: false },
labelLine: { show: false },
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
}
}
})
}
}
// 内层饼图数据
this.option.series[1].data.push({
hoverOffset: 1,
value: item.data,
itemStyle: { color: item.color },
})
})
// 如果总数据为0时，每个颜色的值设为25%（本文实现的是四色图），可视具体情况而定
if (this.total == 0) {
this.chartData.map(item=>{
for (let i = 0; i < 25; ++i) {
this.option.series[0].data.push({
value: 2,
name: i,
ratio: item.ratio,
itemStyle: {
normal: {color: item.color,}
},
},{
value: 1,
name: '',
itemStyle: {
normal: {
label: { show: false },
labelLine: { show: false },
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
})
}
})
}
this.chart.setOption(this.option, true);
window.addEventListener("resize",function(){
this.chart.resize();
});
},
3.总数设置
本图中的total是通过定位实现的，也可以使用Echarts中的title属性
<div class="content common-content">
<div id="four-color" style="width:100%;height:100%"></div>
</div>
<div class="icon-text">{{total}}</div>
//标题
title : {
show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '主标题',//主标题文本，'\n'指定换行
link:'',//主标题文本超链接,默认值true
target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题',//副标题文本，'\n'指定换行
sublink: '',//副标题文本超链接
subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc',//标题边框颜色,默认'#ccc'
borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10,//主副标题纵向间隔，单位px，默认为10
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
},
