mounted() {

    //   首先每种图是根据series --》type决定的 eg:bar--柱状图  line 折线图 pie饼图 map地图等等三部曲 跟着走
// @第一步都是初始化
var myChart = echarts.init(document.getElementById("chart-panel"));
// 弄地图之前,你得把地图注册进来 // @2 设置option
// 生成随机数
function randomData() {
return Math.round(Math.random() * 510); //round取整
}
var mydata = [
{ name: "北京", value: "100" },
{ name: "天津", value: randomData() },
{ name: "上海", value: randomData() },
{ name: "重庆", value: randomData() },
{ name: "河北", value: randomData() },
{ name: "河南", value: randomData() },
{ name: "云南", value: randomData() },
{ name: "辽宁", value: randomData() },
{ name: "黑龙江", value: randomData() },
{ name: "湖南", value: randomData() },
{ name: "安徽", value: randomData() },
{ name: "山东", value: randomData() },
{ name: "新疆", value: randomData() },
{ name: "江苏", value: randomData() },
{ name: "浙江", value: randomData() },
{ name: "江西", value: randomData() },
{ name: "湖北", value: randomData() },
{ name: "广西", value: randomData() },
{ name: "甘肃", value: randomData() },
{ name: "山西", value: randomData() },
{ name: "内蒙古", value: randomData() },
{ name: "陕西", value: randomData() },
{ name: "吉林", value: randomData() },
{ name: "福建", value: randomData() },
{ name: "贵州", value: randomData() },
{ name: "广东", value: randomData() },
{ name: "青海", value: randomData() },
{ name: "西藏", value: randomData() },
{ name: "四川", value: randomData() },
{ name: "宁夏", value: randomData() },
{ name: "海南", value: randomData() },
{ name: "台湾", value: randomData() },
{ name: "香港", value: randomData() },
{ name: "澳门", value: randomData() }
];
var option = {
backgroundColor: "#7894bd",
title: {
text: "全国地图大数据",
subtext: "",
x: "center",
textStyle: { color: "#ffffff" }
},
tooltip: { trigger: "item" }, //左侧小导航图标
visualMap: {
show: true,
x: "right",
y: "bottom",
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 }
],
textStyle: { color: "#ffffff" },
color: [
"#5475f5",
"#9feaa5",
"#85daef",
"#74e2ca",
"#e6ac53",
"#9fb5ea"
]
}, //配置属性
series: [
{
name: "数据",
type: "map",
mapType: "china",
roam: true,
label: {
normal: {
show: true, //省份名称
textStyle: { color: "#ffffff" }
},
emphasis: { show: false }
},
data: mydata //数据
}
]
}; // @3 固定步骤
myChart.setOption(option);
// 动态显示tooptip,每隔3秒去提示
var faultByHourIndex = 0; //播放所在下标
var faultByHourTime = setInterval(function() {
//使得tootip每隔三秒自动显示
myChart.dispatchAction({
type: "showTip", // 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
dataIndex: faultByHourIndex
});
faultByHourIndex++;
// faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
if (faultByHourIndex > mydata.length) {
faultByHourIndex = 0;
}
}, 3000);
},

  

import "../../node_modules/echarts/map/js/china"; // 引入中国地图数据(具体目录试情况而定)
 
 
 
不好意思上传图片传错了

echarts 中国地图 数据自动提示的更多相关文章

  1. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  2. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  3. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  4. 百度地图之自动提示--autoComplete

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  6. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

  7. php数据映射到echarts中国地图

    echarts和php结合 根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...

  8. echarts 中国地图标注所在点

    达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...

  9. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

随机推荐

  1. git生成ssh key步骤并添加到github网站

    0: 查看是否已经有了ssh密钥 执行命令:cd ~/.ssh 如果没有密钥则不会有此文件夹,有则备份删除 1:使用 Git Bash生成新的ssh key ssh-keygen -t rsa -C  ...

  2. Kafka生产者发送消息的三种方式

    Kafka是一种分布式的基于发布/订阅的消息系统,它的高吞吐量.灵活的offset是其它消息系统所没有的. Kafka发送消息主要有三种方式: 1.发送并忘记 2.同步发送 3.异步发送+回调函数 下 ...

  3. sql防止注入

    使用PreparedStatement的参数化的查询可以阻止大部分的SQL注入.在使用参数化查询的情况下,数据库系统不会将参数的内容视为SQL指令的一部分来处理,而是在数据库完成SQL指令的编译后,才 ...

  4. EHDU-1039 asier Done Than Said?

    Password security is a tricky thing. Users prefer simple passwords that are easy to remember (like b ...

  5. Selenium定位不到元素的解决方法—iframe挡住了去路

    刚接触Selenium,在调试过程中发现有些元素定位不到,于是求助了百度,查找到的资料是这么说的:如果需要定位的元素在某个frame里,则单独通过id/name/xpath是定位不到此元素的.比如,原 ...

  6. Kali Linux常用服务配置教程DHCP服务原理

    Kali Linux常用服务配置教程DHCP服务原理 动态主机配置协议(Dynamic Host Configuration Protocol,简称DHCP)是一个局域网的网络协议,基于UDP协议工作 ...

  7. pymongo使用手册

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活.在这一节中,我们就来看 ...

  8. 阿里云 Windows 2012 如果安装IIS

    用可视化安装如果出错, 那就用 windows powershell 安装 https://help.aliyun.com/knowledge_detail/40959.html?spm=5176.1 ...

  9. 微信小程序里如何用阿里云上传视频,图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  10. 常用的当前时间(返回String类型)

    public class TimeUtil { /** * 创建人:zhiyuan * 创建时间:2018年6月9日上午11:31:02 * 方法描述:以yyyy-MM-dd查询当前时间 */ pub ...