TouchUI使用echarts显示中国地图

Touch UI是一套完全免费的高质量移动端UI框架。
基于vue.js框架，精心打造了上百种的移动端UI组件，可以轻松开发webApp、微信公众号、钉钉微应用等。

Touch UI是使用Visual Studio Code工具开发。
这里通过引入echarts.min.js和china.json方式显示map。
首页在page.ui里面引入

<template>
  <ui-page style="top:0px;">
  <ui-view ref="chinaMap"></ui-view>
  </ui-page>
</template>
<script>

import * as echarts from '#/static/utils/echarts.min'
import china from 'static/json/china.json'
export default {
 },
  data() {
    return {
    	areaData:null
     }
  },
  methods: {
  showMap(){
  	let dataList = []
      let obj = null
      this.areaData.forEach(item=>{
        obj = new Object()
        obj.name = item.regionName
        obj.value = item.regionAmount
        dataList.push(obj)
      })

      let option = {
            tooltip: {
                    formatter:function(params){
                        return params.name+'<br/>'+(isNaN(params.value) ? 0 : params.value)
                    }
                },
            visualMap: {
                min: 0,
                max: 4000000,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],
                inRange: {
                    color:['#dbf4ff','#ccedfb','#b2e2f5','#78c9e8']
                },
                show:false
            },
            geo: {
                map: 'china',
                roam: true,
                zoom:1.23,
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: '#666666'
                    }
                },
                itemStyle: {
                    normal:{
                        //区域边框宽度
                      borderWidth: 0,
                      //区域边框颜色
                      borderColor: 'rgba(0, 0, 0, 0.2)',
                      //区域颜色
                      areaColor: "#ffefd5"
                    },
                    emphasis:{
                        areaColor: '#F3B329',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        }
        echarts.registerMap('china', china)
        let chinaMap = echarts.init(this.$refs.chinaMap)
        chinaMap.setOption(option)
  },
   //页面DOM元素挂载完毕
  mounted() {
    //由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，
    //并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。
    //为了确保得到更新后的DOM，所以设置了 Vue.nextTick()方法。
    this.$nextTick(() => {
      this.showMap()
    })
  }
</script>