vue实现echarts中的map自定义地图背景色

2023-09-01 17:00

短信预约 -IT技能 免费直播动态提醒

效果图：
在这里插入图片描述

使用series-map.data.itemStyle. color定义每个地区背景色

vue代码

<template>    <div class="map">        <div id="frames_cont0" style="width: 100%;height: 100%;">div>    div>template><script>export default {    props:{    },    data() {        return {        };    },    methods: {        async getDataInfo(){            const {data:res} = await this.$http.get("get_citylist");            this.change(res.content);        },        change(datas){            var city_list=datas.city_list;            var city_data=datas.city_data;            var city='陕西省';            var chartDom = document.getElementById('frames_cont0');            var myChart = this.$echarts.init(chartDom);            var option;            myChart.showLoading();            this.$echarts.registerMap('Shaanxi', city_list);            myChart.hideLoading();            option = {                title: {                    text: city,                    textStyle:{                        color:'#333'                    },                },                tooltip: {                    show: false, // 是否显示提示框                },                toolbox: {                    show: true,                    orient: 'vertical',                    left: 'right',                    top: 'center'                },                roam: true, // 滚轮滚动--放大或缩小                visualMap: {                    show: false, // 是否显示左侧控件                },                series: [                    {                        name: city,                        type: 'map',                        mapType: 'Shaanxi', // 自定义扩展图表类型                        label: {show: true,color: "#000"                        },                        data: city_data                    }                ],            };            option && myChart.setOption(option);            var that = this;            myChart.on('click', function (params) {                var group_id = params.data.group_id;                console.log(group_id)                that.$emit("changeGroupid", group_id);            });        }    },    watch: {    },    mounted() {        this.getDataInfo();    },}script><style>    .map{        width:100%;        height: 100%;        overflow: hidden;    }style>

后端

// 获取省地图数据    public function get_citylist(){        $path = './static/map_json/陕西省.json';        if(file_exists($path)){            $fp = fopen($path,'r');            $str = fread($fp,filesize($path));//指定读取大小，这里把整个文件内容读取出来            fclose($fp);        }        $city_list = json_decode($str,true);        $datas['city_list'] = $city_list;        $array = [];        // 定义颜色        $color_list = ['#cfc5de','#f1ebd1','#feffdb','#e0cee4','#fde8cd','#fffdd6','#affed7','#e4f1d7','#e4f1d7','#fffed7','#fffed8','#dccee7','#fffed7'];        foreach ($city_list['features'] as $k=>$v){            $array[$k]['name'] = $v['properties']['name'];$array[$k]['group_id'] = $v['properties']['groupid'];            $array[$k]['value'] = $k+1;            $array[$k]['itemStyle'] = ['color'=>$color_list[$k]]; // 设置各个地区背景色        }        $datas['city_data'] = $array;$datas['city_data1'] = $groupid;        return $output;    }