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) }

}</