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> < ...
随机推荐
- docker 搭建以太坊私有链搭建
最近区块链,火得不行,身边也有朋友准备玩这个,说是搭了一个星期,没有把环境搭建起来,叫我帮忙看看环境怎么搭建 于是我找到了官方的地址 https://github.com/ethereum/go-et ...
- Redis数据结构之intset(2)
本文及后续文章,Redis版本均是v3.2.8 上文我们说到intset整型集合的数据结构定义即元素的添加和查询操作,本文我们来看下Redis暴露给外面使用的Set集合,先通过一些基本的命令回顾下se ...
- Linux系统挂载Windows系统下的共享文件
声明:本文是小编借鉴大神们的经验,仅供学习使用. 第一步:在Windows系统上选择要共享的文件夹,右击“属性”-“共享”-“高级共享”-勾选“共享此文件”-设置共享名-“权限”-“添加”-“高级”- ...
- twig模板基本学习
twig基本语法 1.输出 {{ }} 2.判断 {% %} 3.注释 {# #} 具体使用时参考https://twig.symfony.com/doc/2.x/官网文档进行查 ...
- 使用Python下载文件
python -c "with open('/tmp/file.sh', 'wb') as f: import urllib2; f.write(urllib2.urlopen('http: ...
- Telsa显卡比较
1. T4 2. P4/ P40 3. P100 4. V100
- Java开发人员必须掌握的Linux命令-学以致用(5)
================================================= 人工智能教程.零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助! 点击查看高清无码教程 == ...
- ubantu中执行docker免sudo方法
1.添加用户组,如果已存在则不用设置. sudo groupadd docker 2.将用户加入该 group (docker)内 sudo gpasswd -a ${USER} docker 3.重 ...
- 高性能平滑动画_requestAnimationFrame
高性能平滑动画_requestAnimationFrame 在下一次重绘之前,执行一个函数
- java验证码生成
第一种方式:纯代码 先写jsp: 在编写CaptServlet: package cn.itcast.web.controller; import java.awt.Color; import jav ...