vue使用echart中国地图

/*
  引入 ECharts (按需加载)
  文档：http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
 */
const echarts = require('echarts/lib/echarts')
// 引入中国地图数据
require('echarts/map/js/china')
// 引入提示框和
require('echarts/lib/component/tooltip')
// 引入标题组件
require('echarts/lib/component/title')
require('echarts/lib/component/legendScroll')

let optionMap = {
  backgroundColor: '#FFFFFF',
  title: {
    text: '全国用户购买画像',
    subtext: '',
    x: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: { // 左侧小导航图标
    show: false,
    x: 'left',
    y: 'center',
    splitList: [ // 后续计算 区间
      { start: 500, end: 600 },
      { start: 400, end: 500 },
      { start: 300, end: 400 },
      { start: 200, end: 300 },
      { start: 100, end: 200 },
      { start: 0, end: 100 }
    ],
    color: ['#5B97DA', '#6EA3DF', '#7DACE2', '#88B3E5', '#94BBE7', '#A3C5EA']
  },
  series: [{ // 配置属性
    name: '用户数',
    type: 'map',
    mapType: 'china',
    roam: true,
    label: {
      normal: {
        show: true // 省份名称
      },
      emphasis: {
        show: false
      }
    },
    data: []
  }]
}

 

转载于:https://www.cnblogs.com/lanshengzhong/p/10647641.html