前言

主要介紹了vue 項(xiàng)目引入echarts 。
功能是地圖示例，底圖底色默認(rèn)、浮動(dòng)、點(diǎn)擊顏色更新，給提示框（tooltitle）添加點(diǎn)擊事件（點(diǎn)擊顯示彈出框），廢話不多說，直接上干貨！

NPM 安裝 ECharts

npm install echarts --save

引入項(xiàng)目

• main.js文件中引入

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

獲取地圖geojson數(shù)據(jù)

DataV.GeoAtlas地理小工具系列

代碼展示

<template>
    <div id="main" :style="{width: '500px',height: '500px'}"></div>
</template>
<script>
import * as echarts from 'echarts';
import YC from "./yc.json" // 引入的鹽城市g(shù)eojson數(shù)據(jù)
export default {
  data() {
    return {
      option: {},
    };
  },
  methods: {
    drawMiddleChart() {       
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('main'));
        echarts.registerMap('YC', YC);
       // 初始化 echarts geojson 數(shù)據(jù)
        const geoCoordMap = []
        YC.features.forEach(item => {
            geoCoordMap.push({
                name: item.properties.name,
                value: item.properties.centroid
            })
        })
        // echarts 添加地圖數(shù)據(jù) registerMap(城市字母開頭大寫, geojson數(shù)據(jù))
        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: '鹽城地區(qū)',
                type: 'map',
                map: 'YC',
                label: {
                    show: true
                },
                data: geoCoordMap, // 格式化后的geojaon數(shù)據(jù)
                geoIndex: 0, // 只展示geo地圖，，不然會(huì)有兩個(gè)地圖重疊
                silent: false,
                emphasis: {
                areaColor: 'transparent'
                }
            }],
            // geo 配置
            geo: { 
            map: 'YC',
            roam: false,
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                areaColor: '#00FFF4', //默認(rèn)區(qū)塊顏色
                borderColor: '#ffffff', //區(qū)塊描邊顏色
                borderWidth: 2 //區(qū)塊描邊顏色寬度
                },
                //鼠標(biāo)經(jīng)過高亮顯示
                emphasis: {
                focus: "self", //突出選中的區(qū)域 其它區(qū)域談化效果
                itemStyle: {
                    opacity: 1,
                    borderColor: "#f18355",
                    borderWidth: "3",
                    areaColor: "yellow"
                }
                }
            },
            // 點(diǎn)擊之后的色塊顏色
            select: {
                itemStyle: {
                    areaColor: "blue",
                    borderColor: "#f18355",
                    borderWidth: "3"
                }
            },
            regions: [ // 每個(gè)區(qū)域的顏色
                {
                  name: '大豐區(qū)', //區(qū)塊名稱
                  itemStyle: {
                    normal: {
                      areaColor: '#B9D696' // 區(qū)域顏色
                    }
                  }
                }
            ]
            }
        }
        // 繪制圖表
        myChart.setOption(this.option);
    }
  },
  mounted() {
    this.drawMiddleChart();
    const _this = this
    window.dialog= function() {
        console.log('執(zhí)行的')
    }
  }
}
</script>

效果圖：

鹽城.png

注意事項(xiàng)

1. triggerOn 一定要改為 “click”
2. enterable 要設(shè)置為 true，才能使鼠標(biāo)進(jìn)入提示框，才可以為提示框添加點(diǎn)擊事件。
3. dialog方法傳參的時(shí)候一定要加上引號(hào),否則會(huì)報(bào)錯(cuò)。