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: []
}]
}
vue使用echart中国地图的更多相关文章
- Vue 实现一个中国地图
参考:https://www.cnblogs.com/mazey/p/7965698.html 重点:如何引入中国地图js文件,china.js require('echarts/map/js/chi ...
- vue + echarts 实现中国地图 展示城市
Demo 安装依赖 vue中安装echarts npm install echarts -S 在main.js中引用 import echarts from 'echarts'Vue.prototyp ...
- vue + echart 实现中国地图 和 省市地图(可切换省份)
一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...
- vue中使用echarts来绘制世界地图和中国地图
第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- vue中echarts引入中国地图
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...
- 16、vue引入echarts,划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- echart 扩展地图不显示问题
今天写项目需要一个安徽地图,但echart自带的安徽地图还是老版的,仍有巢湖市,但客户要求不能有,只好重新找, 后发现ECharts 地图数据在线生成工具 :http://ecomfe.github. ...
随机推荐
- QT5中编译存在的几个问题(LNK2019,构造函数不能有返回类型)
1. 自己构造新类,注意必须在头文件最后加上分号 写个c++类报“构造函数不能有返回类型”, 谷歌一下,才找到原因: 原来是我定义的类后面没有用“:”结尾,构造函数默认把整个类作为返回值了 2. 新建 ...
- Django的下载与使用基础
下载安装 命令行 pip3 install django==1.11.23 -i https://pypi.tuna.tsinghua.edu.cn/simple pycharm file -- &g ...
- python爬虫概述
爬虫的使用:爬虫用来对网络的数据信息进行爬取,通过URL的形式,将数据保存在数据库中并以文档形式或者报表形式进行展示. 爬虫可分为通用式爬虫或特定式爬虫,像我们经常用到的搜索引擎就属于通用式爬虫,如果 ...
- 【Linux开发】linux设备驱动归纳总结(七):1.时间管理与内核延时
linux设备驱动归纳总结(七):1.时间管理与内核延时 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 解决Wamp的 Error D:\wamp or PHP path 错误
之前早早就用了wamp,发现还是挺好用的,就是刚开始改端口号之类的配置有点麻烦,不过还是一一解决了. 就在昨天安装了 composer . 突然发现wamp 有一个错 “Error D:\wamp o ...
- Linux基础命令训练题型(上)
1.创建目录/data/dongdaxia,并且在该目录下创建文件dongdaxia.txt,然后在文件dongdaxia.txt里写入内容“inet 192.168.221.132 netmask ...
- Macaca环境搭建(一)----windows系统macaca安装
一.安装JDK, 1.官方网站:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...
- 纯前端表格控件SpreadJS V12.1 隆重登场,专注易用性,提升用户体验
一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...
- pom.xml标签页名称
pom.xml文件双击打开后,标签页显示的名称与<artifactId></artifactId>的内容相一致.
- C++练习 | 铁轨问题
#include <iostream> #include <cmath> #include <cstring> #include <string> #i ...