vue Echarts饼图指定颜色与数据对应

需求：一般自定义颜色是按照数据的顺序依次对应，现在想要指定字段对应某个颜色

因为是直接在返回数据中做操作，所以直接写这部分的代码

数据格式

 cdata: {
        xData: ["水文", "森林", "气象", "地质",  "其他"],
        seriesData: [
          { value: 35, name: "水文" ,itemStyle: {color:"#9fe6b8"}},//需要添加color字段
          { value: 15, name: "森林" },//原来的数据格式
          { value: 15, name: "气象" },
          { value: 25, name: "地质" },
          { value: 40, name: "其他" }
        ]
      },
1
2
3
4
5
6
7
8
9
10

添加字段指定颜色

coloritem:{
        "森林":"#9fe6b8",
        "气象":"#0099ff",
        "水文":"#32c5e9",
        "地质":"#e7bcf3",
        "其他":"#fb7293"
      }
1
2
3
4
5
6
7

在方法中

 methods: {
    getBar(){
      this.$axios.post('******').then((res)=>{
        let items=res.data //接收到的数据
        this.cdata.seriesData=this.getData(items) //变成想要的数据格式方法
        console.log(this.cdata.seriesData)
      })
    },
    getData(data) {
      let that=this
      return data.map(function (item) {
        return {
          value: item.value,
          name: item.name,
          itemStyle: {
            color: that.coloritem[item.name] // 使用颜色映射表中对应的颜色
          }
       };
     });
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

然后再把数据传入饼图中，入最上面的图所示，即使数据顺序不同颜色也能对应上了