/*
引入 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. 【POJ - 3187】Backward Digit Sums(搜索)

    -->Backward Digit Sums 直接写中文了 Descriptions: FJ 和 他的奶牛们在玩一个心理游戏.他们以某种方式写下1至N的数字(1<=N<=10). 然 ...

  2. 【linux杂谈】查看centOS系统的版本号和内核号

    因为种种原因,我们通常需要查看centOS系统的版本号和内核号. 这里以centOS 6为切入点,展示了几种查看版本号和内核号的方法,同时也验证了其在centOS 7上的可行性. 一.centOS 6 ...

  3. Sql Server使用TOP实现Limit m,n的功能

    转载自:https://blog.csdn.net/weixin_41798450/article/details/88885891 在MySQL中,可以用 Limit 来查询第 m 列到第 n 列的 ...

  4. [ZJOI2007]捉迷藏(动态点分治/(括号序列)(线段树))

    题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这N-1条 ...

  5. 转-性能优化中CPU、内存、磁盘IO、网络性能的依赖

    转自:https://www.cnblogs.com/Javame/p/3665565.html 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估. ...

  6. windows 安装 celery 避坑指南,看这篇就够了

  7. java解析json字符串详解(两种方法)

    一.使用JSONObject来解析JSON数据官方提供的,所以不需要导入第三方jar包:直接上代码,如下 private void parseJSONWithJSONObject(String Jso ...

  8. Brain的同步规则

    这段话来自Java编程思想并发一章 什么时候使用同步 如果你正在写一个变量,它可能接下来将被另一个线程读取,或者正在读取一个上一次已经被另一个线程写过的变量,那么你必须使用同步,并且,读写线程都必须用 ...

  9. asp.net core在发布时排除配置文件

    使用命令发布 dotnet restore dotnet publish -c Release -r win-x64 -o "D:\services" 这样发布总是是将配置文件覆盖 ...

  10. jquery事件绑定方式总结(补充)

    总结 : 1.简单事件绑定方式:事件名()  如:click() 2.高级事件绑定方式:bind(事件名,数据参数,function)    3.动态生成元素事件绑定方式:live(事件名,数据参数, ...