echarts 中国地图 数据自动提示
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);
},


echarts 中国地图 数据自动提示的更多相关文章
- echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- 百度地图之自动提示--autoComplete
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
- 基于Echarts的中国地图数据展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...
- php数据映射到echarts中国地图
echarts和php结合 根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...
- echarts 中国地图标注所在点
达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
- Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
随机推荐
- python设计模式---创建型之单例模式
数据结构和算法是基本功, 设计模式是最佳实现. 作为程序员,必须有空了就练一练哈. # coding = utf-8 """ # 经典单例 class Singleton ...
- matplotlib图例-【老鱼学matplotlib】
图例是啥,直接上图就知道了: 怎么创建上面的图例呢? 很简单,首先在plt.plot()函数中设置label文本属性,然后调用plt.legend()生成图例就可以了,完整的代码如下: import ...
- Kali Linux常用服务配置教程获取IP地址
Kali Linux常用服务配置教程获取IP地址 下面以Kali Linux为例,演示获取IP地址的方法 (1)设置网络接口为自动获取IP地址.在Kali Linux的收藏夹中单击图标,将显示所有的程 ...
- less那些事儿
1.计算函数 less写法要特殊处理一下,否则会被识别成calc(60%); /* css */ width: calc(100% - 40px); / * less */ width : calc( ...
- flask + MySQL-python 创建 webapp 应用
0 - python 用自带的 wgsi 也可以创建 web 服务1)建立 hello.py 内容如下 # hello.pydef application(environ, start_respons ...
- line-height:1.5和line-height:150%的区别
1. 给你个数,孩子自己算吧 line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height ...
- oracle 删除重复记录
查询及删除重复记录的SQL语句 1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 select * from 表 where Id in (select Id from 表 g ...
- configure: error: Cannot find php-config. Please use --with-php-config=PATH
本文章给大家介绍configure: error: Cannot find php-config. Please use --with-php-config=PATH错误解决办法. configure ...
- 手机号验证正则表达式+Demo(亲测完毕)
以下为本人亲测过的验证手机号格式的demo,需要的小伙伴拿走不谢~<!DOCTYPE html><html><head><meta charset=" ...
- angular.formJson()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...