zoukankan      html  css  js  c++  java
  • 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: []
      }]
    }
  • 相关阅读:
    qt捕鱼达人
    linux通过源码安装gdb
    打造简易http服务器
    linux缓存同步
    NOI之后的碎碎念
    Validate至少有一个不能为空
    IOI 2020 集训队作业
    P6033 [NOIP2004 提高组] 合并果子 加强版 题解
    P3017 [USACO11MAR]Brownie Slicing G 题解
    LOJ #145. DFS 序 2 题解
  • 原文地址:https://www.cnblogs.com/lanshengzhong/p/10647641.html
Copyright © 2011-2022 走看看