做项目时，会遇到一些零碎的技术点。记录下来以防忘记

需求：做可视化界面，但是需要兼容ie8，需要用纯css、js 的H5页面对接echarts，下面为效果图（带定时器循环显示tooltip）。

实现方式（此处为一个中央云南地图的实现方法）：

1、定义容器

  1. // 页面逻辑
    <div class="sp-ynsdt" id="main4"></div>

2、声明参数

  1. var myChart4 = echarts.init(document.getElementById('main4'));
var geoCoordMap = { // 经纬度
    '昆明市': [102.712251, 25.540609],
    '昭通市': [103.717216, 27.336999],
    '曲靖市': [103.797851, 25.501557],
    '楚雄州': [101.546046, 25.041988],
    '玉溪市': [102.543907, 24.350461],
    '红河州': [102.384182, 23.366775],
    '文山州': [104.24401, 23.36951],
    '普洱市': [100.972344, 22.777321],
    '西双版纳州': [100.797941, 22.001724],
    '大理州': [100.225668, 25.589449],
    '保山市': [99.167133, 25.111802],
    '德宏州': [98.578363, 24.436694],
    '丽江市': [100.233026, 26.872108],
    '怒江州': [98.854304, 25.850949],
    '迪庆州': [99.06463, 27.826853],
    '临沧市': [100.08697, 23.886567]
  },
  // 云南省人口数
  rawData = [{
      name: '昆明市',
      value: 335,
      renkou: 100,
      mianji: 300
    },
    {
      name: '玉溪市',
      value: 234,
      renkou: 100,
      mianji: 300
    },
    {
      name: '曲靖市',
      value: 310,
      renkou: 100,
      mianji: 300
    },
    {
      name: '红河州',
      value: 210,
      renkou: 100,
      mianji: 300
    },
    {
      name: '昭通市',
      value: 455,
      renkou: 100,
      mianji: 300
    },
    {
      name: '丽江市',
      value: 153,
      renkou: 100,
      mianji: 300
    },
    {
      name: '楚雄州',
      value: 153,
      renkou: 100,
      mianji: 300
    },
    {
      name: '文山州',
      value: 310,
      renkou: 100,
      mianji: 300
    },
    {
      name: '普洱市',
      value: 210,
      renkou: 100,
      mianji: 300
    },
    {
      name: '西双版纳州',
      value: 234,
      renkou: 100,
      mianji: 300
    },
    {
      name: '大理州',
      value: 135,
      renkou: 100,
      mianji: 300
    },
    {
      name: '保山市',
      value: 310,
      renkou: 100,
      mianji: 300
    },
    {
      name: '德宏州',
      value: 455,
      renkou: 100,
      mianji: 300
    },
    {
      name: '怒江州',
      value: 234,
      renkou: 100,
      mianji: 300
    },
    {
      name: '迪庆州',
      value: 135,
      renkou: 100,
      mianji: 300
    },
    {
      name: '临沧市',
      value: 135,
      renkou: 100,
      mianji: 300
    },
  ]

3、配置echarts参数样式

  1. // 打点函数
  2. function convertData(data) {
  3.     var res = [];
  4.     for (var i = 0; i < data.length; i++) {
  5.         var geoCoord = geoCoordMap[data[i].name];
  6.         if (geoCoord) {
  7.             res.push({
  8.                 name: data[i].name,
  9.                 value: geoCoord.concat(0),
  10.                 renkou: data[i].renkou,
  11.                 mianji: data[i].mianji
  12.                 // value: geoCoord.concat(data[i].value)
  13.             });
  14.         }
  15.     }
  16.     return res;
  17. };
  18. // 各州市人口面积分布图
  19. var yunnanoprtion = {
  20.     tooltip: {
  21.         trigger: 'item',
  22.         formatter: function (params) {
  23.             return params.data.name + '人口:' + params.data.renkou + '万人' + '\n' + '面积:' + params.data.mianji + '平方千米';
  24.         }
  25.     },
  26.     title: {
  27.         text: '',
  28.         // subtext: '数据来自网络',
  29.         textStyle: {
  30.             color: '#8B4513',
  31.             fontSize: 20, // 标题字体大小
  32.             right: '50%'
  33.         },
  34.     },
  35.     visualMap: {
  36.         show: false,
  37.         min: 0,
  38.         max: 400,
  39.         left: 20,
  40.         bottom: 10,
  41.         text: ['高', '低'], // 文本，默认为数值文本
  42.         color: ['#87cefa', '#e8f630', '#ff4500'],
  43.         calculable: false
  44.     },
  45.     geo: {
  46.         map: '云南',
  47.         roam: true,
  48.         top: '4%',
  49.         zoom: 1.1,
  50.         roam: false,
  51.         aspectScale: 1,
  52.         label: {
  53.             normal: {
  54.                 show: true,
  55.                 textStyle: {
  56.                     color: 'rgba(0,0,0,0.4)'
  57.                 }
  58.             },
  59.             show: false,
  60.             formatter: function (params) {
  61.                 return params.data.name + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面积:' + params.data.mianji +
  62.                     ' km²';
  63.             },
  64.             textStyle: {
  65.                 top: '-80px',
  66.                 color: '#000040', // 地图区域字体颜色
  67.                 fontSize: 0.1, // 地图区域字体大小
  68.                 opacity: 1, // 地图区域字体透明级别
  69.                 backgroundColor: 'rgba(0,23,11,0)' // 地图区域字体背景颜色 rgba(0,23,11,0)
  70.             }
  71.         },
  72.         itemStyle: {
  73.             normal: {
  74.                 borderColor: 'rgba(0, 0, 0, 0.2)'
  75.             },
  76.             emphasis: {
  77.                 areaColor: null,
  78.                 shadowOffsetX: 0,
  79.                 shadowOffsetY: 0,
  80.                 shadowBlur: 20,
  81.                 borderWidth: 0,
  82.                 shadowColor: 'rgba(0, 0, 0, 0.5)'
  83.             }
  84.         }
  85.     },
  86.     series: [{
  87.         name: '云南',
  88.         type: 'scatter',
  89.         coordinateSystem: 'geo',
  90.         left: 'center',
  91.         top: 'top',
  92.         map: '云南',
  93.         data: convertData(rawData),
  94.         symbolSize: 10,
  95.         // symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
  96.         symbolRotate: 35,
  97.         zoom: 1.3,
  98.         mapLocation: {
  99.             x: 'left'
  100.         },
  101.         // position: ['20%', '60%'],
  102.         // regionHeight: 2,
  103.         top: '4%',
  104.         itemStyle: {
  105.             normal: {
  106.                 label: {
  107.                     show: false,
  108.                     textStyle: {
  109.                         color: "#fff",
  110.                         fontSize: 9
  111.                     }
  112.                 }
  113.             },
  114.             emphasis: {
  115.                 label: {
  116.                     show: true,
  117.                     shadowOffsetX: 0,
  118.                     shadowOffsetY: 0,
  119.                     shadowBlur: 20,
  120.                     borderWidth: 0,
  121.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  122.                 }
  123.             }
  124.         },
  125.         label: {
  126.             show: true,
  127.             formatter: function (params) {
  128.                 return params.data.name + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面积:' + params.data.mianji +
  129.                     ' km²';
  130.             },
  131.             textStyle: {
  132.                 top: '-80px',
  133.                 color: '#000040', // 地图区域字体颜色
  134.                 fontSize: 0.1, // 地图区域字体大小
  135.                 opacity: 1, // 地图区域字体透明级别
  136.                 backgroundColor: 'rgba(0,23,11,0)' // 地图区域字体背景颜色 rgba(0,23,11,0)
  137.             }
  138.         },
  139.         light: {
  140.             main: {
  141.                 color: '#eee9e7', // 光照颜色
  142.                 intensity: 1.2, // 光照强度
  143.                 shadowQuality: 'high', // 阴影亮度
  144.                 shadow: true, // 是否显示阴影
  145.                 alpha: 60,
  146.                 beta: 10
  147.             },
  148.             ambient: {
  149.                 intensity: 0.3
  150.             }
  151.         }
  152.     }, {
  153.         name: 'categoryA',
  154.         type: 'map',
  155.         geoIndex: 0,
  156.         // tooltip: {show: false},
  157.         data: rawData
  158.     }]
  159. };

4、加载地图

  1. myChart4.setOption(yunnanoprtion)

定时器循环显示tooltip

  1. // 必须要设置tooltip
  1. var index = 0; //播放所在下标
  2. this.mTime = setInterval(function () {
  3.     myChart4.dispatchAction({
  4.         type: 'showTip',
  5.         seriesIndex: 0,
  6.         dataIndex: index
  7.     });
  8.     index++;
  9.     if (index >= rawData.length) {
  10.         index = 0;
  11.     }
  12. }, 600);

有不同的观点或者实现方式。欢迎在评论区告诉我。

纯css、js 的H5页面对接echarts的更多相关文章

  1. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  2. HTML+CSS+JS设计注册页面

    HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...

  3. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  4. 纯CSS让overflow:auto页面滚动条出现时不跳动

    现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...

  5. 纯css+js水平时间轴

    自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...

  6. 使用Hammer.js的H5页面开发DOM的一些小说法

    前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. ...

  7. 纯css实现图片或者页面变灰色

    前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...

  8. Vue使用Clipboard.JS在h5页面中复制内容

    安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...

  9. js，h5页面判断客户端是ios还是安卓

    $(function(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('An ...

随机推荐

  1. C语言调用VIX_API开关虚拟机

    #include <stdio.h> #include <stdlib.h> #include "vix.h" #define USE_WORKSTATIO ...

  2. python 2.7 - 3.5 升级之路 (二) : 语法与类库升级

    背景 在上一篇博文中,我们为升级python 2 -> 3已经做了一些准备.在这篇中,我们将针对语法与类库这两个方面进行讨论. 关于语法 1. print 在python3中, print 已经 ...

  3. Golang 高效实践之defer、panic、recover实践

    前言 我们知道Golang处理异常是用error返回的方式,然后调用方根据error的值走不同的处理逻辑.但是,如果程序触发其他的严重异常,比如说数组越界,程序就要直接崩溃.Golang有没有一种异常 ...

  4. laravel 5.6初学笔记

    laravel 5.6初学笔记 http://note.youdao.com/noteshare?id=bf4b701b49dd035564e7145ba2d978b4 框架简介 laravel文档齐 ...

  5. Python基础总结之第六天开始【认识List：列表】【认识Tuple：元组】【还有他们基本的操作】（新手可相互督促）

    早,在北京的周六,热到不行~~~ 今天更新笔记列表(List).元组(Tuple)以及它们的操作方法 在列表中会经常用到List列表,前面我们认识到的有字符串,字符串数据是不能修改当前字符串里面的任意 ...

  6. springboot整合mybatis时无法读取xml文件解决方法（必读）

    转    http://baijiahao.baidu.com/s?id=1588136004120071836&wfr=spider&for=pc 在springboot整合myba ...

  7. Java集合 HashSet的原理及常用方法

    目录 一. HashSet概述 二. HashSet构造 三. add方法 四. remove方法 五. 遍历 六. 合计合计 先看一下LinkedHashSet 在看一下TreeSet 七. 总结 ...

  8. 【TensorFlow 3】mnist数据集：与Keras对比

    在TF1.8之后Keras被当作为一个内置API:tf.keras. 并且之前的下载语句会报错. mnist = input_data.read_data_sets('MNIST_data',one_ ...

  9. 温故而知新，重温 Java 7 的那些“新”特性

    2009 年 4 月 20 日,Java 的亲生父亲 Sun 被养父 Oracle 以 74 亿美元收购,这在当时可是一件天大的事.有不少同学都担心 Java 的前途,我当时傻不啦叽地也很担心:自己刚 ...

  10. JS面向对象编程（二）：构造函数的继承

    对象之间继承的 5 中方法.            比如, 现在有一个"动物"对象的构造函数.            function Animal(){              ...