/*
引入 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. 增加游戏受众:在英特尔核显上运行MR游戏

    为了获得良好的用户体验,通常VR游戏需要稳定在每秒90帧,这意味着整个场景只有11.1毫秒的时间来进行左右眼渲染,这就是为何VR游戏需要配备高端的独立显卡.现在来看看我们如何使用最新版英特尔图形性能分 ...

  2. c语言GCC mingw 64位安装

    1.安装步骤和下载地址 一.MinGW简介 MinGW是是将GCC编译器和GNU Binutils移植到Win32平台下的产物,包括一系列头文件(Win32API).库和可执行文件.MinGW是从Cy ...

  3. Flash-aware Page Replacement Algorithm

    1.Abstract:(1)字体太乱,单词中有空格(2) FAPRA此名词第一出现时应有“ FAPRA(Flash-aware Page Replacement Algorithm)”说明. 2.in ...

  4. t-sql最短路径搜索

    SET STATISTICS IO ON; SET STATISTICS TIME ON; GO IF OBJECT_ID(N'dbo.t1') IS NOT NULL DROP TABLE dbo. ...

  5. # 「NOIP2010」关押罪犯(二分图染色+二分答案)

    「NOIP2010」关押罪犯(二分图染色+二分答案) 洛谷 P1525 描述:n个罪犯(1-N),两个罪犯之间的仇恨值为c,m对仇恨值,求怎么分配使得两件监狱的最大仇恨值最小. 思路:使最大xxx最小 ...

  6. Mac OS 下定制终端颜色

    方法 有五种方法, 参考网站,我使用的是 Oh My Zsh 方案一:(通过 .bash_profile 文件自定制) 方案二:(也是修改 ~/.bash_profile) 方案三:(三方插件 Oh ...

  7. Mysql主从分离介绍及实现

    参考: http://www.cnblogs.com/panxuejun/p/5887118.html https://www.cnblogs.com/alvin_xp/p/4162249.html ...

  8. 部署 12306 github 项目

    郑重声明, 本文仅用作学习研究使用,请勿用作商业用途,遵守法律!!! 部署环境有些坑,踩一次就够了... 原项目地址 git clone 原项目以及 识别验证码的模型 如果遇到 无法解析的问题 ,则 ...

  9. mysql的auto-rehash简介

    今天在看mysql的配置文件的时候,发现有"auto-rehash"不明白什么意思,在此记录一下,auto-rehash是自动补全的意思,就像我们在linux命令行里输入命令的时候 ...

  10. Delphi FileListBox组件