/*
引入 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: []
}]
}

vue使用echart中国地图的更多相关文章

  1. Vue 实现一个中国地图

    参考:https://www.cnblogs.com/mazey/p/7965698.html 重点:如何引入中国地图js文件,china.js require('echarts/map/js/chi ...

  2. vue + echarts 实现中国地图 展示城市

    Demo 安装依赖 vue中安装echarts npm install echarts -S 在main.js中引用 import echarts from 'echarts'Vue.prototyp ...

  3. vue + echart 实现中国地图 和 省市地图(可切换省份)

    一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...

  4. vue中使用echarts来绘制世界地图和中国地图

    第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...

  5. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  6. vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...

  7. 16、vue引入echarts,划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  8. vue+echarts+datav大屏数据展示及实现中国地图省市县下钻

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...

  9. echart 扩展地图不显示问题

    今天写项目需要一个安徽地图,但echart自带的安徽地图还是老版的,仍有巢湖市,但客户要求不能有,只好重新找, 后发现ECharts 地图数据在线生成工具 :http://ecomfe.github. ...

随机推荐

  1. Pandas使用细则

    本文介绍pandas的使用,总结了我在机器学习过程中常使用到的一些方法等. #pandas学习 import pandas as pd import numpy as np import seabor ...

  2. SolidWorks学习笔记1

    鼠标 修改缩放方向 点击工具->选项->视图,点击第一条,翻转鼠标滚轮缩放方向. 平移:Ctrl+ 中键 或者右键空白处 菜单选择平移 缩放:Shift+中键 或者右键空白处 菜单选择放大 ...

  3. [转帖]java基础学习总结——多态(动态绑定)

    https://www.cnblogs.com/xdp-gacl/p/3644035.html 多态的概念 java基础学习总结——多态(动态绑定) 一.面向对象最核心的机制——动态绑定,也叫多态

  4. 小菜鸟之Oracle数据库之事务

    Oracle数据库之事务 1. 什么是事务 在数据库中事务是工作的逻辑单元,一个事务是由一个或多个完成一组的相关行为的SQL语句组成,通过事务机制确保这一组SQL语句所作的操作要么都成功执行,完成整个 ...

  5. 格式化hdfs以及namnode没启动

    先stop-all.sh 删除hdfs-site.xml中的这两个目录 然后删除core-site.xml 中的这个目录 然后格式化hdfs hdfs namenode -format 即可启动成功 ...

  6. Type类的使用

    Type类的使用(类反射)通过类获得Type: Type t = typeof(Person)通过实例对象获得类的Type: Type t = p.GetType()获取Type的方法:MethodI ...

  7. # vmware异常关机后,虚拟系统无法启动的解决办法

    vmware异常关机后,虚拟系统无法启动的解决办法 先使用everything搜索所有后缀为.lck的文件,这些文件全部删除,如果不确定是否可以删除,先把这些文件转移到桌面,等能启动虚拟系统之后再删除 ...

  8. BugkuCTF--never give up

    这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...

  9. 多表表与表关系 增删改查 admin

    今日内容 多表表与表关系 增删改查表数据 admin 多表操作 表与表关系 默认指向主键 可能是隐藏主键 djamgo1.1默认级联(models. SET NULL解除级联) 一对一 先建立少的一方 ...

  10. 开发MT4连接失败最easy忽视的一个错误

    m_factory.WinsockStartup();