/*
引入 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. keys随机生成

    随机keys生成 const fs=require('fs'); const KEY_LEN=1024; const KEY_COUNT=2048; const CHARS='abcdefghijkl ...

  2. rpm操作

    --查找某个软件:abc rpm -qa |grep abc --删除某个软件:abc rpm -e --noscripts  abc

  3. 5分钟了解图数据库Neo4j的使用

    1.图数据库安装与配置 1.1安装与配置 配置path = %NEO4J_HOME%\bin   启动命令:neo4j console   web访问:http://localhost:7474 1. ...

  4. NLP中的对抗样本

    自然语言处理方面的研究在近几年取得了惊人的进步,深度神经网络模型已经取代了许多传统的方法.但是,当前提出的许多自然语言处理模型并不能够反映文本的多样特征.因此,许多研究者认为应该开辟新的研究方法,特别 ...

  5. c++ string详解 assign

    assign方法可以理解为先将原字符串清空,然后赋予新的值作替换. 返回类型为 string类型的引用.其常用的重载也有下列几种: a. string& assign ( const stri ...

  6. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  7. [转帖]深度: NVMe SSD存储性能有哪些影响因素?

    深度: NVMe SSD存储性能有哪些影响因素? http://www.itpub.net/2019/07/17/2434/ 之前有一个误解 不明白NVME 到底如何在队列深度大的情况下来提高性能, ...

  8. git clone 报错 fatal: protocol '–https' is not supported 解决办法

    版本:git 2.22.0 系统:win7旗舰版 先把https去掉 再把https加上 神奇的事情出现了,这样就可以了. 很多人都说这样解决了,原因不知道. Administrator@BWE8QX ...

  9. Java基础(七)

    字符串String类 字符串的两个问题 构造方法 字符串池 字符串的内容不可变 比较方法 练习:模拟登陆 练习:模拟登陆(限制重试次数) 替换方法(敏感词过滤) 如果希望将字符串当中指定的部分进行替换 ...

  10. hive_UDTF函数

    hive的UDTF函数是可以输入一行数据然后输出多行多列(可以是单行/单列)的函数 public class Tex extends GenericUDTF { /** * 对传入的参数进行初始化 * ...