vue-cli + echarts 地图

需求：查看全国地图，点击进入具体某省份地图，再次点击切换回全国地图
代码实现：
先把中国地图和各省份地图引进来

import echarts from 'echarts';
import './assets/china.js';
import './assets/province/province.js';

然后再 mounted 中引入地图

export default {
  name: 'app',
  data () {
    return {
    }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('app'));

    // 写个随机函数，数据为随机项
    function randomValue() {
        return Math.round(Math.random()*1000);
    }

    var provinces = [
        '北京',
        // 城市
    ];

    var optionChina = {
        geo: {
            map: 'china',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                    }
                }
            },
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series : [
            {
                name: 'categoryA',
                type: 'map',
                geoIndex: 0,
                tooltip: {show: false},
                data:[
                    {name: '北京', value: randomValue()},
                    // 这里就是很多数据
                ]
            }
        ]
    };

    myChart.setOption(optionChina);

    myChart.on('click', (params) => {
        var curName = params.name;
        console.log(curName);

        // indexOf 如果要检索的字符串值没有出现，则该方法返回 -1。
        if (provinces.indexOf(curName) > -1) {
            // 切换地图
            var optionProvince = JSON.parse(JSON.stringify(optionChina));
            optionProvince.geo.map = curName;
            myChart.setOption(optionProvince);
        } else {
            myChart.setOption(optionChina);
        }
    })
  }
}

经过我仔细的研究，在点击地图进行全国和省份切换的地方，出了另一套方案：
(自我感觉此方案更容易理解~)

    myChart.on('click', (params) => {
        var curName = params.name;
        console.log(curName);

        // indexOf 如果要检索的字符串值没有出现，则该方法返回 -1。
        if (provinces.indexOf(curName) > -1) {
            optionChina.geo.map = curName;
        } else {
            optionChina.geo.map = 'china';
        }
        myChart.setOption(optionChina);
    })

拓展：

JSON.stringify()和JSON.parse()分别是什么？

JSON.stringify() 从一个对象中解析出字符串
JSON.stringify({"a":"1","b":"2"})
结果是："{"a":"1","b":"2"}"

JSON.parse()从一个字符串中解析出JSON对象
var str = '{"a":"1","b":"2"}';
JSON.parse(str);

结果是：Object{a:"1",b:"2"}

全国地图
某省份地图

在本地看到此效果请 点击下载源代码，配好vue-cli脚手架环境，然后操作以下指令就可以看到地图了~

npm install echarts --save
npm install
npm run dev