vue项目引入 echarts，实现地图相关操作

前言

主要介绍了vue 项目引入echarts 。
功能是地图示例，底图底色默认、浮动、点击颜色更新，给提示框（tooltitle）添加点击事件（点击显示弹出框），废话不多说，直接上干货！

NPM 安装 ECharts

npm install echarts --save

引入项目

• main.js文件中引入

// echarts 引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

获取地图geojson数据

DataV.GeoAtlas地理小工具系列

代码展示

<template>
    <div id="main" :style="{width: '500px',height: '500px'}"></div>
</template>
<script>
import * as echarts from 'echarts';
import YC from "./yc.json" // 引入的盐城市geojson数据
export default {
  data() {
    return {
      option: {},
    };
  },
  methods: {
    drawMiddleChart() {       
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        echarts.registerMap('YC', YC);
       // 初始化 echarts geojson 数据
        const geoCoordMap = []
        YC.features.forEach(item => {
            geoCoordMap.push({
                name: item.properties.name,
                value: item.properties.centroid
            })
        })
        // echarts 添加地图数据 registerMap(城市字母开头大写, geojson数据)
        echarts.registerMap('YC', YC)
        this.option = {
            tooltip: {
                show: true,
                trigger: 'item',
                triggerOn: 'click',
                enterable: true,
                extraCssText: 'z-index: 99;max-width: 100px; min-height:100px;white-space:pre-wrap',
                formatter: function(params) {
                    return `<div onclick="dialog('${params.name}')">${params.name}</div>`
                }
            },
            series: [{
                name: '盐城地区',
                type: 'map',
                map: 'YC',
                label: {
                    show: true
                },
                data: geoCoordMap, // 格式化后的geojaon数据
                geoIndex: 0, // 只展示geo地图，，不然会有两个地图重叠
                silent: false,
                emphasis: {
                areaColor: 'transparent'
                }
            }],
            // geo 配置
            geo: { 
            map: 'YC',
            roam: false,
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                areaColor: '#00FFF4', //默认区块颜色
                borderColor: '#ffffff', //区块描边颜色
                borderWidth: 2 //区块描边颜色宽度
                },
                //鼠标经过高亮显示
                emphasis: {
                focus: "self", //突出选中的区域 其它区域谈化效果
                itemStyle: {
                    opacity: 1,
                    borderColor: "#f18355",
                    borderWidth: "3",
                    areaColor: "yellow"
                }
                }
            },
            // 点击之后的色块颜色
            select: {
                itemStyle: {
                    areaColor: "blue",
                    borderColor: "#f18355",
                    borderWidth: "3"
                }
            },
            regions: [ // 每个区域的颜色
                {
                  name: '大丰区', //区块名称
                  itemStyle: {
                    normal: {
                      areaColor: '#B9D696' // 区域颜色
                    }
                  }
                }
            ]
            }
        }
        // 绘制图表
        myChart.setOption(this.option);
    }
  },
  mounted() {
    this.drawMiddleChart();
    const _this = this
    window.dialog= function() {
        console.log('执行的')
    }
  }
}
</script>

效果图：

盐城.png

注意事项

1. triggerOn 一定要改为 “click”
2. enterable 要设置为 true，才能使鼠标进入提示框，才可以为提示框添加点击事件。
3. dialog方法传参的时候一定要加上引号,否则会报错。