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

最新推荐文章于 2024-05-14 13:36:36 发布

if时光重来

最新推荐文章于 2024-05-14 13:36:36 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/admin_web/article/details/127075712

版权

php 同时被 2 个专栏收录

78 篇文章 1 订阅

订阅专栏

vue

31 篇文章 0 订阅

订阅专栏

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

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

vue代码

<!-- eslint-disable vue/multi-word-component-names -->
<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;
    }