vue里实现echarts中国地图

2019独角兽企业重金招聘Python工程师标准>>>

echartsDemo.vue

<template>
  <div>
      <div id="chart_example"></div>
  </div>
</template>

<script>
  // 首先要 cnpm install echarts
  import echarts from 'echarts'
  import '../../../node_modules/echarts/map/js/china.js'

  export default {
    data() {
      return {}
    },
    mounted() {
      let this_ = this;
      let myChart = echarts.init(document.getElementById('chart_example'));
      console.log(myChart)

      /**
       * 中国地图
       * 必须引入china.js
       * https://www.cnblogs.com/ldlx-mars/p/9242250.html
       * map配置
       * https://echarts.baidu.com/option.html#series-map.map
       * 高亮颜色
       * https://www.cnblogs.com/xianwen/p/6045454.html
       */
      let option = {
        series: [{
          type: 'map',
          // mapType: 'china'// mapType或者map都可以
          map: 'china',
        }]
      };


      myChart.setOption(option);
    },
    methods: {}
  }
</script>

<style scoped>
  #chart_example {
    width: 50%;
    height: 500px;
    border: 1px solid red;
    margin: 0 auto;
  }
</style>

转载于:https://my.oschina.net/u/2464371/blog/3005263