Vue和React的ECharts-Map-省市县级写法

前言

echarts地图的相关的资料也找了好久，市县级地图的资源资本是要积分下载的，有的10个，有的40、50个积分，10个积分能理解，但是50个就有点过分了。
这里我的资料也是下载了别人的，所以大家也还是去找找只要几个积分资源吧。
下面上写法

Vue

配置文件
先在配置文件里引入echarts

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.config.productionTip = false

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

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

组件文件 山东省地图

<template>
    <div class="box absolute" ref="box">
        <!-- 图表 -->
        <div id="myMap"></div>
    </div>
</template>

<script>

export default {
    data(){

        return {
            myData: [
                {name:'青岛',value:[119.84348,35.819467,12], type:'0'},
                {name:'市委政府',value:[120.19013,36.073168,11], type:'1'},
                {name:'青岛大学',value:[120.429622,36.377366,11], type:'2'}
            ],
        }

    },
    mounted(){
        // 绘制地图
        this.drawLine(this.myData);
    },
    methods:{
        // 绘制地图
        // @params data string 自定义构建数据
        drawLine(chartData){

            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myMap'))
            // 获取省份地图数据
            var mapData = require('../assets/js/map.json');

            var name = '山东';
            this.$echarts.registerMap(name, mapData);

            // 绘制图表
            myChart.setOption({
                geo:{
                    map:'山东',
                    label:{
                        emphasis:{
                            show:false
                        }
                    },
                    roam:false,
                    zoom:1.2,
                    itemStyle:{
                        normal:{
                            borderColor:'#5F86D3',             //边框颜色
                            areaColor:'transparent',           //地图区域颜色
                        },
                        emphasis:{
                            show:'true',
                            areaColor:'transparent'            //鼠标移上去的颜色
                        }
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}',
                },
                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: chartData,
                        symbolSize: 6,                     //描点的尺寸
                        //描点的旋转角度
                        label:{                             //描点的文字
                            show:true,
                            position:'bottom',              //文字位置
                            formatter:'{b}',         //匹配的数据    {@[2]}   b:数据名,{@[n]}：数据中维度n的值
                            color:'#fff'                    //文字颜色
                        },
                        color: '#fff'
                           
                    }
                ],
                color:['#9BCA62','#FF8463','#61C0DE']
            });

        },

    }

}
</script>

React

其实他们的echart写法是一样的，只是框架的不同决定了他们组件写法不同

import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/province/guizhou.js';

const option = {
    title: {
        text: "ceshi",
        subtext: "xugou",
        left: "center"
    },
    series: [
        {
            name: "iphone",
            type: "map",
            mapType: "贵州",
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: []
        }
    ]
}

/**
 * 地图
 */
class Maps extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentDidMount() {
        let myChart = echarts.init(document.getElementById('Box'));
        myChart.setOption(option);
    }

    render() {

        return <div >
            <div id="Box" style={{ height: "500px" }}></div>
        </div>;
    }
}

export default Maps;

改成市县级

上面都是react是省级的，那么我们怎么改成市级的呢？

第一步：先下载好市县的资源文件,zhao找到某个县的文件以及代码
如下图


第二步：在node依赖文件里找到贵州这个js文件，把里边这段json替换成上面截图市县的json
js内容如下图

然后刷新一个浏览器就ok了。
vue的做法法应该也类似，我这里也就不过多描述。