html 圆环实现多种颜色,Echart饼图实现（圆环图）+状态颜色控制

最近做项目遇到了圆环图以及对于图例颜色值的处理，这里做一个记录，分享给大家。

UI图长这样：

HTML

其中，resize-chart是封装的自适应组件

JS

initTaskChart() {

getTaskStatus({ type: this.taskTimeType }).then(res => {

console.log('任务状态', res)

if (res) {

const color = [

'#999999',

'#00cce2',

'#9962ff',

'#27dca1',

'#e9e536',

'',

'#1cbe6b',

'#f8a639',

'#f868b9',

'#4a8dfd',

'#f45151'

]

let taskStateList = JSON.parse(JSON.stringify(res))

let taskStateData = []

let taskStatelegendData = []

let taskTotal = 0

for (const item of taskStateList) {

taskTotal += item.count

taskStateData.push({

name: this.taskStateArr[item.state],

value: item.count,

itemStyle: {

normal: { color: this.statusColorHandle(item.state, color) }

}

})

taskStatelegendData.push({

name: this.taskStateArr[item.state],

value: item.count,

textStyle: {

normal: { color: this.statusColorHandle(item.state, color) }

}

})

}

this.taskChart = echarts.init(document.getElementById('taskChart'))

this.taskChart.setOption(

{

title: {

text: taskTotal === 0 ? '' : taskTotal,//主要是为了处理没有数据时

subtext: taskTotal !== 0 ? '任务总量' : '',

x: 'center',

y: 'center',

textAlign: 'center',

itemGap: 5, //主副标题之间的间距

top: '38%',

left: '28%',

// 标题

textStyle: {

fontFamily: 'PingFangSC-Medium',

fontWeight: 'normal',

fontSize: 20,

color: '#333333'

},

// 副标题

subtextStyle: {

fontWeight: 'normal',

fontSize: 14,

color: '#333333'

}

},

legend: {

type: 'scroll',

icon: 'circle',

orient: 'vertical',

y: 'center',

right: '5%',

itemWidth: 5,

itemHeight: 5,

data: taskStatelegendData,

// 使用回调函数

formatter: function(name) {

let count, percent

for (const item of taskStatelegendData) {

if (item.name === name) {

count = item.value

percent = ((item.value / taskTotal) * 100).toFixed(2)

}

}

let arr = [

'{a|' + name + '}',

'{b|' + count + '}',

'{c|' + percent + '}%'

]

return arr.join('')

},

textStyle: {

rich: {

a: {

fontSize: 12,

width: 50,

color: 'rgba(51, 51, 51, 0.6)'

},

b: {

fontSize: 12,

width: 40,

color: '#333'

},

c: {

fontSize: 12,

width: 38,

color: '#333'

}

}

}

},

tooltip: {

trigger: 'item',

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

},

series: [

{

name: '任务状态',

type: 'pie',

radius: ['40%', '55%'], // 第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形

center: ['30%', '50%'], // 位置

label: {

normal: {

show: false, // 是否显示标签[ default: false ]

position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。

formatter: function(params) {

return (

'{c|' +

params.value +

'} {d|' +

params.percent +

'%}\n{b|' +

params.name +

'}'

)

},

fontFamily: 'PingFangSC-Regular',

lineHeight: 20,

padding: [0, -55],

rich: {

c: {

color: '#333333',

fontSize: 14,

align: 'left',

padding: [0, 0, 0, 10]

},

d: {

color: '#333333',

align: 'left',

fontSize: 14

},

b: {

color: 'rgba(51, 51, 51, 0.6)',

fontSize: 14,

align: 'left',

padding: [0, 0, 0, 10]

}

}

}

},

labelLine: {

// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。

normal: {

show: false, // 是否显示视觉引导线。

length: 20, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。

length2: 40, // 视觉引导项第二段的长度。

lineStyle: {

// 视觉引导线的样式

//color: '#000',

//width: 1

}

}

},

data: taskStateData,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

},

true //这个参数有它的作用

)

}

this.taskLoading = false

})

}

其中，用到了一个函数statusColorHandle，这个是根据具体的状态分配颜色值的，这里做了封装：

statusColorHandle(state, colorArr) {

state = ~~state

return colorArr[state % colorArr.length]

},

这是其中一个，另外一个基本类似，下面是实现的效果图：

代码里添加了很多注释，方便自己查阅，分享给大家，希望大家在用到的时候遇到问题了可以作为参考。

作者：阿星