16、vue引入echarts,划中国地图
vue引入echarts
npm install echarts --save
main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
划中国地图
引入中国地图数据
import 'echarts/map/js/china.js'
<template>
<div>
<div id="myChart"></div>
</div>
</template>
<script>
export default {
data() {
return {
mydata: []
}
},
mounted() {
this.drawLine()
},
methods:{
drawLine() {
this.mydata = [
{ name: '北京', value: '100' }, { name: '天津', value: this.randomData() },
{ name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },
{ name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },
{ name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() }
// {name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },
// {name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },
// {name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },
// {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
// {name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },
// {name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },
// {name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },
// {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
// {name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },
// {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
// {name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },
// {name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },
// {name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }
]
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
backgroundColor: '#F7F7F7',
title: {
text: '中国地图',
subtext: '中国地图'
// sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} '
},
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center'
// // feature: {
// // dataView: {readOnly: false},
// // restore: {},
// // saveAsImage: {}
// // }
// },
visualMap: {
max: 500,
min: 0,
text: ['高', '低'],
realtime: false,
calculable: false,
itemHeight: '200',
inverse: true, // 翻转
orient: 'horizontal',
inRange: {
color: ['#DDDDDD', '#026FDD']
}
},
series: [
{
name: '损失统计',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: this.mydata
}
]
})
},
randomData() {
return Math.round(Math.random() * 500);
}
},
}
</script>
16、vue引入echarts,划中国地图的更多相关文章
- 小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
- vue + echarts 实现中国地图 展示城市
Demo 安装依赖 vue中安装echarts npm install echarts -S 在main.js中引用 import echarts from 'echarts'Vue.prototyp ...
- 25、继续echarts实现中国地图
1. 以上是实现的效果 下边是实现的代码,上一篇地图没有颜色,是因为没有引入zrender包,因为echarts画地图是基于zrender实现的 <!DOCTYPE html> <h ...
- echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- 用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
- ECharts(中国地图)的使用 及 非空 tooltip formatter 验证
中国地图使用频率很高下载文件: echarts.min.js网址: http://echarts.baidu.com/download.html点击: ...
- echarts画中国地图并上色
任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool ...
- 基于Echarts的中国地图数据展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...
随机推荐
- hihoCoder #1143 : 骨牌覆盖问题·一(矩阵乘法)
1143 : 骨牌覆盖问题·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题: 我们有一个2xN的长条形棋盘,然 ...
- codevs1580单词游戏
题目描述中说: 单词为at,k=8则新单词为ib 推移规则是:如果k为正数则下推,否则上推,当推移超越边界时回到另一端继续推移. 但在我做题时发现: 这个描述与数据所要求的是完全相反的!!!! 样例1 ...
- 洛谷 P2251 质量检测 题解
P2251 质量检测 题目背景 无 题目描述 为了检测生产流水线上总共N件产品的质量,我们首先给每一件产品打一个分数A表示其品质,然后统计前M件产品中质量最差的产品的分值Q[m] = min{A1, ...
- CSP-S 复赛之前的任务计划
一. 最短路算法复习 ★1.Dijkstra: 2. SPFA: 3. Floyd: 二. DP 复习 ★1.背包问题: 2.区间 DP: 3.状压 DP: 三. 数据结构 ★1. 线段树: 2. 树 ...
- Linux下的crontab定时执行任务命令
0x00 简介 在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间. cron的 ...
- Sublime Text3注册及汉化(支持Windows、MAC OS)
苹果mac 版本下载 点击下载https://download.sublimetext.com/Sublime%20Text%20Build%203114.dmg PART_A 注册 v3103及以上 ...
- 使用xshell-ssh连接服务器,报错:Xshell Socket error Event: 32 Error: 10053
XShell连接CentOS系统时,报出Xshell Socket error Event: 32 Error: 10053..错误 有点烦人.. 操作:用SSH工具连接linux电脑出现的问题:Re ...
- GO标准库flag
Go语言内置的flag包实现了命令行参数的解析. os.Args os.Args是一个[]string类型. 获取命令参数示例: func main() { if len(os.Args) > ...
- 熔断机制hystrix
一.问题产生 雪崩效应:是一种因服务提供者的不可用导致服务调用者的不可用,并将不可用逐渐放大的过程 正常情况下的服务: 某一服务出现异常,拖垮整个服务链路,消耗整个线程队列,造成服务不可用,资源耗尽: ...
- 【多线程与并发】Java中的12个原子操作类
从JDK1.5开始,Java提供了java.util.concurrent.atomic包,该包中的原子操作类提供了一种使用简单.性能高效(使用CAS操作,无需加锁).线程安全地更新一个变量的方式. ...