实现echart的地图添加点并且根据状态进行渲染颜色

背景

vue3.2
echart

实现

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaMap from './china.json'
import { GetPoint } from '@/api/mainapi'; // 导入GetPoint方法
import zuobiaoSvg from '../../../assets/svg/zuobiao.svg';
import { toRaw } from '@vue/reactivity';


 

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);
    echarts.registerMap('china',chinaMap);
 

  // data.mapData = response.data
    var option = {
        series:[{
            roam: true,
            type:'map',
            map:'china',
           center: [ 112.909956,31.775001], //定义中心点

            label:{
                show:false,
                fontsize:10,
                color:'white',
                
            },
            
            tooltip: {
                show: true,
                formatter: function(e) {
                    // return e.data.displayname;
                    return 'hello';
                },
                // position: [500, 10],
                triggerOn: 'click'
            },
            itemStyle:{
                    areaColor:'#395481',
                    borderColor:'#148A9E',
                    borderWidth:'0.8',
                    shadowColor: "#14FAFE",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 2,
            },
            emphasis:{
                label:{
                show:true,
                fontsize:10,
                color:'white'
            },
            itemStyle:{
                    areaColor:'#27508E',
                    borderColor:'#12EFED',
                    borderWidth:'1'
            },
            },
        
            markPoint: {
            symbol:'pin',
            style: {
                        image: zuobiaoSvg,
                    
                        width: 24, // 根据 SVG 图片的大小调整宽度
                        height: 24, // 根据 SVG 图片的大小调整高度
                    },
            symbolSize: [20, 20], // 图片大小
            label: {
              position: 'top',
              color: 'white',
            },
                
            
            // coord数组存放地址坐标
            // data: test
            data: test.map(item => {
                    return {
                        ...item,
            itemStyle: {
                        color: item.workState === 0 ? 'red' :
                            item.workState === 1 ? 'yellow' :
                            item.workState === 2 ? 'pink' :
                            item.workState === 3 ? 'blue' :
                            'gray'
                    }
                    }
                })
            }
        }]
       
    };
    myChart.setOption(option);
    

    
}

</script>

主要代码

itemStyle: {
color: item.workState === 0 ? ‘red’ :
item.workState === 1 ? ‘yellow’ :
item.workState === 2 ? ‘pink’ :
item.workState === 3 ? ‘blue’ :
‘gray’
}
}