1. mounted() {
  2.  
  3. // 首先每种图是根据series --》type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走
  4. // @第一步都是初始化
  5. var myChart = echarts.init(document.getElementById("chart-panel"));
  6. // 弄地图之前,你得把地图注册进来
  7.  
  8. // @2 设置option
  9. // 生成随机数
  10. function randomData() {
  11. return Math.round(Math.random() * 510); //round取整
  12. }
  13. var mydata = [
  14. { name: "北京", value: "100" },
  15. { name: "天津", value: randomData() },
  16. { name: "上海", value: randomData() },
  17. { name: "重庆", value: randomData() },
  18. { name: "河北", value: randomData() },
  19. { name: "河南", value: randomData() },
  20. { name: "云南", value: randomData() },
  21. { name: "辽宁", value: randomData() },
  22. { name: "黑龙江", value: randomData() },
  23. { name: "湖南", value: randomData() },
  24. { name: "安徽", value: randomData() },
  25. { name: "山东", value: randomData() },
  26. { name: "新疆", value: randomData() },
  27. { name: "江苏", value: randomData() },
  28. { name: "浙江", value: randomData() },
  29. { name: "江西", value: randomData() },
  30. { name: "湖北", value: randomData() },
  31. { name: "广西", value: randomData() },
  32. { name: "甘肃", value: randomData() },
  33. { name: "山西", value: randomData() },
  34. { name: "内蒙古", value: randomData() },
  35. { name: "陕西", value: randomData() },
  36. { name: "吉林", value: randomData() },
  37. { name: "福建", value: randomData() },
  38. { name: "贵州", value: randomData() },
  39. { name: "广东", value: randomData() },
  40. { name: "青海", value: randomData() },
  41. { name: "西藏", value: randomData() },
  42. { name: "四川", value: randomData() },
  43. { name: "宁夏", value: randomData() },
  44. { name: "海南", value: randomData() },
  45. { name: "台湾", value: randomData() },
  46. { name: "香港", value: randomData() },
  47. { name: "澳门", value: randomData() }
  48. ];
  49. var option = {
  50. backgroundColor: "#7894bd",
  51. title: {
  52. text: "全国地图大数据",
  53. subtext: "",
  54. x: "center",
  55. textStyle: { color: "#ffffff" }
  56. },
  57. tooltip: { trigger: "item" },
  58.  
  59. //左侧小导航图标
  60. visualMap: {
  61. show: true,
  62. x: "right",
  63. y: "bottom",
  64. splitList: [
  65. { start: 500, end: 600 },
  66. { start: 400, end: 500 },
  67. { start: 300, end: 400 },
  68. { start: 200, end: 300 },
  69. { start: 100, end: 200 },
  70. { start: 0, end: 100 }
  71. ],
  72. textStyle: { color: "#ffffff" },
  73. color: [
  74. "#5475f5",
  75. "#9feaa5",
  76. "#85daef",
  77. "#74e2ca",
  78. "#e6ac53",
  79. "#9fb5ea"
  80. ]
  81. },
  82.  
  83. //配置属性
  84. series: [
  85. {
  86. name: "数据",
  87. type: "map",
  88. mapType: "china",
  89. roam: true,
  90. label: {
  91. normal: {
  92. show: true, //省份名称
  93. textStyle: { color: "#ffffff" }
  94. },
  95. emphasis: { show: false }
  96. },
  97. data: mydata //数据
  98. }
  99. ]
  100. };
  101.  
  102. // @3 固定步骤
  103. myChart.setOption(option);
  104. // 动态显示tooptip,每隔3秒去提示
  105. var faultByHourIndex = 0; //播放所在下标
  106. var faultByHourTime = setInterval(function() {
  107. //使得tootip每隔三秒自动显示
  108. myChart.dispatchAction({
  109. type: "showTip", // 根据 tooltip 的配置项显示提示框。
  110. seriesIndex: 0,
  111. dataIndex: faultByHourIndex
  112. });
  113. faultByHourIndex++;
  114. // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
  115. if (faultByHourIndex > mydata.length) {
  116. faultByHourIndex = 0;
  117. }
  118. }, 3000);
  119. },

  

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. docker 搭建以太坊私有链搭建

    最近区块链,火得不行,身边也有朋友准备玩这个,说是搭了一个星期,没有把环境搭建起来,叫我帮忙看看环境怎么搭建 于是我找到了官方的地址 https://github.com/ethereum/go-et ...

  2. Redis数据结构之intset(2)

    本文及后续文章,Redis版本均是v3.2.8 上文我们说到intset整型集合的数据结构定义即元素的添加和查询操作,本文我们来看下Redis暴露给外面使用的Set集合,先通过一些基本的命令回顾下se ...

  3. Linux系统挂载Windows系统下的共享文件

    声明:本文是小编借鉴大神们的经验,仅供学习使用. 第一步:在Windows系统上选择要共享的文件夹,右击“属性”-“共享”-“高级共享”-勾选“共享此文件”-设置共享名-“权限”-“添加”-“高级”- ...

  4. twig模板基本学习

    twig基本语法 1.输出 {{    }} 2.判断 {%    %} 3.注释 {#      #} 具体使用时参考https://twig.symfony.com/doc/2.x/官网文档进行查 ...

  5. 使用Python下载文件

    python -c "with open('/tmp/file.sh', 'wb') as f: import urllib2; f.write(urllib2.urlopen('http: ...

  6. Telsa显卡比较

    1. T4 2. P4/ P40 3. P100 4. V100

  7. Java开发人员必须掌握的Linux命令-学以致用(5)

    ================================================= 人工智能教程.零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助! 点击查看高清无码教程 == ...

  8. ubantu中执行docker免sudo方法

    1.添加用户组,如果已存在则不用设置. sudo groupadd docker 2.将用户加入该 group (docker)内 sudo gpasswd -a ${USER} docker 3.重 ...

  9. 高性能平滑动画_requestAnimationFrame

    高性能平滑动画_requestAnimationFrame 在下一次重绘之前,执行一个函数

  10. java验证码生成

    第一种方式:纯代码 先写jsp: 在编写CaptServlet: package cn.itcast.web.controller; import java.awt.Color; import jav ...