vue中使用Echarts渲染四川地图

第一步：先创建vue项目（此处省略，详细步骤自行查找资料）

第二步：新建终端，下载echarts相关包:

在终端执行：

 npm install echarts --save

第三步：下载需要的地图json文件，需要的自取

链接: https://pan.baidu.com/s/1AXN9WMEtMGiPyJblc9wIFw?pwd=zsls 提取码: zsls

第四步：将echarts 和 json 文件引入vue组件中

<script>
// 引入文件 以下两行为引入文件
import * as echarts from 'echarts';
const sichuanJson = require("./sichuan.json") // 自行判定自己下载的json放在那个位置的

export default {
    name: 'SichuanMap',

......

第五步：写代码：

完整代码如下：

<template>
    <div class="map-container">
        <div id="map" ref="myEchart"></div>
    </div>
</template>

<script>
// 引入文件
import * as echarts from 'echarts';
const sichuanJson = require("./sichuan.json")

export default {
    name: 'SichuanMap',
    data() {
        return {
            // 数据
            mapData: [
        // 注意，这里的数据名称要写全称，例如：成都市，不能简写为成都
                { name: "成都市", value: 1771.5 },
                { name: "绵阳市", value: 369.1 },
                { name: "宜宾市", value: 109.5 },
                { name: "南充市", value: 936.5 },
                { name: "德阳市", value: 131.7 },
                { name: "泸州市", value: 454.6 },
                { name: "凉山彝族自治州", value: 300.9 },
                { name: "自贡市", value: 105.6 },
                { name: "内江市", value: 266.8 },
                { name: "资阳市", value: 79 },
                { name: "达州市", value: 309.84 },
                { name: "广元市", value: 182.68 },
                { name: "广安市", value: 100 },
                { name: "巴中市", value: 197.6 },
                { name: "甘孜藏族自治州", value: 45.7 },
                { name: "阿坝藏族羌族自治州", value: 125.9 },
                { name: "攀枝花市", value: 123.5 },
                { name: "雅安市", value: 185.36 },
                { name: "乐山市", value: 406.2 },
                { name: "眉山市", value: 69.2 },
                { name: "遂宁市", value: 105.1 },
            ]
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init(data) {
            let myChart = echarts.init(document.getElementById('map'));
            echarts.registerMap('sichuan', sichuanJson);
            let option = {
                tooltip: {
                    trigger: 'item',
                    // 提示信息
                    formatter: function (params) {
                        if (!params.value) {
                            return '该地区暂无访问量';
                        }
                 return params.seriesName + '<br />' + params.name + ':' + params.value + '次'
                    },
                    
                },
                // 图例
                visualMap: {
                    min: 45,
                    max: 1800,
                    text: ['高', '低'],
                    realtime: true,
                    textStyle: {
                        color: '#fff'
                    },

                    // 滑块
                    calculable: true,
                    // itemWidth:16,
                    // itemHeight: 79,
                    left: 50,
                    top: 230,
                    // 默认由低到高
                    // inverse: true, // 由高到低
                    // 水平放
                    // orient:"horizontal",
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered'],
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'map',
                        // 对应图的名字
                        map: 'sichuan',
                        label: {
                            normal: {
                                show: true, // 显示城市名称
                                color: '#909399'
                            },
                        },
                        data: this.mapData,
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    }
}
</script>
<style lang="less">
#map {
    height: 500px;
    width: 500px;
    background-color: black;
}
</style>

实现效果：

存在版权问题，联系作者删除