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> < ...
随机推荐
- Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析
一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...
- IntelliJ IDEA 使提示不区分大小写
File ==> Settings ==> Editor ==> General ==> Code Completion 第一行 Match case 将默认勾选去掉
- process.argv
返回进程启动时的命令行参数. 第一个元素是 process.execPath. 使用 process.argv0 可以获取 argv[0] 原始的值. 第二个元素是当前执行的 JavaScript 文 ...
- 【Android】activity-alias的使用
activity-alias是android里为了重复使用Activity而设计的. 当在Activity的onCreate()方法里,执行getIntent().getComponent().get ...
- Expression Trees 参数简化查询
ASP.NET MVC 引入了 ModelBinder 技术,让我们可以在 Action 中以强类型参数的形式接收 Request 中的数据,极大的方便了我们的编程,提高了生产力.在查询 Action ...
- GA:GA优化BP神经网络的初始权值、阈值,从而增强BP神经网络的鲁棒性—Jason niu
global p global t global R % 输入神经元个数,此处是6个 global S1 % 隐层神经元个数,此处是10个 global S2 % 输出神经元个数,此处是4个 glob ...
- SQL Server Report Server 报表用户权限T-SQL查询
/************************************************************************** 查询用户在报表上的权限 ************ ...
- webpack打包后该如何访问项目?
一.问题描述 开发环境,页面浏览都OK,产出文件后,直接打开产出目录的index.html,页面空白. 二.预期结果 能正常看到页面. 三.问题分析 你可能会在编译的最后看到如下一句话: Tip: b ...
- Linux命令行参数前加--,-和不加杠
参数前“-”的表明后面的参数是字符形式. 参数前“--”的则表明后面的参数是单词形式. 参数前有横的是System V风格. 参数前没有横的是BSD风格.
- GMA Round 1
学弟说我好久没更blog了. 因为自己最近其实没干什么. 所以来搬运一下GMA Round 1 的比赛内容吧,blog访问量.网站流量一举两得. 链接:https://enceladus.cf/con ...