实现饼图demo添加新数据

代码如下

<template>
    <div>
        <div ref="chart" style="width:550px;height:450px"></div>
        
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import { GetPoint } from '@/api/mainapi'; // 导入GetPoint方法
import 'echarts-liquidfill';

 

onMounted(()=>{
     init(); // 将init函数调用移动到test赋值之后
    fetchData(); // 在mounted钩子函数中调用fetchData函数
   
})

let test =  null;


            

const fetchData = () => {
  GetPoint().then(response => {
//    console.log(response);
      test=response.data;
    // console.log(test);
    init(); // 将init函数调用移动到test赋值之后

});
}
const chart = ref();



async function init() {
    var myChart = echarts.init(chart.value);
 

  // data.mapData = response.data
    var  option = {
    title: {
        top: '45%',
        left: 'center',
        text: "当前电量",
        textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 12
        },
        subtext: '70.34%',
        subtextStyle: {
            color: '#fff',
            fontSize: 12
        }
    },
    tooltip: {
        trigger: 'item',
        // formatter: function (res) {
        //     console.log(res)

        //     if (res.componentSubType == 'liquidFill') {
        //         return res.seriesName + ': ' + (res.value * 10000 / 100).toFixed(2) + '%';
        //     } else {
        //         return '<span class="ii" style="background:' + res.color + ' "></span>' + res.name + ':<br/> ' + res.data.value + ' (' + res.percent + '%)<br/> ' + res.data.explain;
        //     }
        // }
    },
    series: [{
        type: 'liquidFill',
        data: ["0.6", "0.6", "0.6", "0.6", "0.6", "0.6", "0.6", "0.6", "0.6"],
        itemStyle: {
            normal: {
                opacity: 0.4,
                shadowBlur: 0,
                shadowColor: '#9395BE'
            }
        },
        backgroundStyle: {
            borderWidth: 1,
            borderColor: '#0a0917',
            color: ["transparent"]
        },
        center: ['50%', '50%'],
        radius: '60%',
        label: {
            normal: {
                formatter: '',
                textStyle: {
                    fontSize: 14
                }
            }
        },
        outline: {
            itemStyle: {
                borderColor: '#9395BE',
                borderWidth: 0
            },
            borderDistance: 0
        }
    },
    {
        type: 'pie',
        color: ['#33B8A6', '#f57f6c','#ffffff'],
        radius: ['48%', '60%'],
        center: ['50%', '50%'],
        hoverAnimation: false, 设置饼图默认的展开样式
        label: {
            normal: {
                show: true,
                position: 'outter',
                textStyle: {
                    fontSize: 14
                },
                formatter: function (parms) {
                    console.log(parms);
                    return parms.data.name + "\n\n" + parms.data.value;
                }
            }
        },
        labelLine: {
            show: false,
            normal: {
                show: true,
                // length: 5,
                // length2:3,
                smooth: true,
            }
        },
        itemStyle: { // 此配置
            normal: {
                borderWidth: 1,
                borderColor: '#063757',
            },
            emphasis: {
                borderWidth: 0,
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            
        },
        data: [{
            value: 110,
            name: '异常'
        },
        {
            value: 30,
            name: '正常'
        },
        {
            value: 30,
            name: '正常1'
        },
        {
            value: 30,
            name: '正常'
        }
    ]
    }
    ]
}
    myChart.setOption(option);
    

    
}

</script>

描述

我在添加了一个颜色之后又添加了相应的数据
但是第三个数据还是之前的颜色
我就很诧异，所以我吧title改了一下
颜色就直接渲染出来了
注意：这个data里面的数据是0到1的，在渲染的时候要注意把你的数据除以一百