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

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

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

1、定义容器

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

2、声明参数

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参数样式

// 打点函数

function convertData(data) {

    var res = [];

    for (var i = 0; i < data.length; i++) {

        var geoCoord = geoCoordMap[data[i].name];

        if (geoCoord) {

            res.push({

                name: data[i].name,

                value: geoCoord.concat(0),

                renkou: data[i].renkou,

                mianji: data[i].mianji

                // value: geoCoord.concat(data[i].value)

            });

        }

    }

    return res;

};

// 各州市人口面积分布图

var yunnanoprtion = {

    tooltip: {

        trigger: 'item',

        formatter: function (params) {

            return params.data.name + '人口:' + params.data.renkou + '万人' + '\n' + '面积:' + params.data.mianji + '平方千米';

        }

    },

    title: {

        text: '',

        // subtext: '数据来自网络',

        textStyle: {

            color: '#8B4513',

            fontSize: 20, // 标题字体大小

            right: '50%'

        },

    },

    visualMap: {

        show: false,

        min: 0,

        max: 400,

        left: 20,

        bottom: 10,

        text: ['高', '低'], // 文本，默认为数值文本

        color: ['#87cefa', '#e8f630', '#ff4500'],

        calculable: false

    },

    geo: {

        map: '云南',

        roam: true,

        top: '4%',

        zoom: 1.1,

        roam: false,

        aspectScale: 1,

        label: {

            normal: {

                show: true,

                textStyle: {

                    color: 'rgba(0,0,0,0.4)'

                }

            },

            show: false,

            formatter: function (params) {

                return params.data.name + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面积:' + params.data.mianji +

                    ' km²';

            },

            textStyle: {

                top: '-80px',

                color: '#000040', // 地图区域字体颜色

                fontSize: 0.1, // 地图区域字体大小

                opacity: 1, // 地图区域字体透明级别

                backgroundColor: 'rgba(0,23,11,0)' // 地图区域字体背景颜色 rgba(0,23,11,0)

            }

        },

        itemStyle: {

            normal: {

                borderColor: 'rgba(0, 0, 0, 0.2)'

            },

            emphasis: {

                areaColor: null,

                shadowOffsetX: 0,

                shadowOffsetY: 0,

                shadowBlur: 20,

                borderWidth: 0,

                shadowColor: 'rgba(0, 0, 0, 0.5)'

            }

        }

    },

    series: [{

        name: '云南',

        type: 'scatter',

        coordinateSystem: 'geo',

        left: 'center',

        top: 'top',

        map: '云南',

        data: convertData(rawData),

        symbolSize: 10,

        // 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',

        symbolRotate: 35,

        zoom: 1.3,

        mapLocation: {

            x: 'left'

        },

        // position: ['20%', '60%'],

        // regionHeight: 2,

        top: '4%',

        itemStyle: {

            normal: {

                label: {

                    show: false,

                    textStyle: {

                        color: "#fff",

                        fontSize: 9

                    }

                }

            },

            emphasis: {

                label: {

                    show: true,

                    shadowOffsetX: 0,

                    shadowOffsetY: 0,

                    shadowBlur: 20,

                    borderWidth: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        },

        label: {

            show: true,

            formatter: function (params) {

                return params.data.name + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面积:' + params.data.mianji +

                    ' km²';

            },

            textStyle: {

                top: '-80px',

                color: '#000040', // 地图区域字体颜色

                fontSize: 0.1, // 地图区域字体大小

                opacity: 1, // 地图区域字体透明级别

                backgroundColor: 'rgba(0,23,11,0)' // 地图区域字体背景颜色 rgba(0,23,11,0)

            }

        },

        light: {

            main: {

                color: '#eee9e7', // 光照颜色

                intensity: 1.2, // 光照强度

                shadowQuality: 'high', // 阴影亮度

                shadow: true, // 是否显示阴影

                alpha: 60,

                beta: 10

            },

            ambient: {

                intensity: 0.3

            }

        }

    }, {

        name: 'categoryA',

        type: 'map',

        geoIndex: 0,

        // tooltip: {show: false},

        data: rawData

    }]

};

4、加载地图

myChart4.setOption(yunnanoprtion)

定时器循环显示tooltip

// 必须要设置tooltip
var index = 0; //播放所在下标

this.mTime = setInterval(function () {

    myChart4.dispatchAction({

        type: 'showTip',

        seriesIndex: 0,

        dataIndex: index

    });

    index++;

    if (index >= rawData.length) {

        index = 0;

    }

}, 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. Excel催化剂开源第48波-Excel与PowerBIDeskTop互通互联之第二篇

    前一篇的分享中,主要谈到Excel透视表连接PowerBIDeskTop的技术,在访问SSAS模型时,不止可以使用透视表的方式访问,更可以发数据模型发起DAX或MDX查询,返回一个结果表数据,较透视表 ...

  2. [leetcode] 290. Word Pattern (easy)

    原题 思路: 建立两个哈希表,分别保存: 1 模式 :单词 2 单词 :是否出现过 水题 /** * @param {string} pattern * @param {string} str * @ ...

  3. 2019暑假集训 BLO

    题目描述 Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. 输入 输入n<=100000 ...

  4. k8s1.9.0安装--完整集群部署

    三.完整集群部署 - kubernetes-with-ca 1. 理解认证授权 1.1 为什么要认证 想理解认证,我们得从认证解决什么问题.防止什么问题的发生入手.防止什么问题呢?是防止有人入侵你的集 ...

  5. shiro-helloworld

    1.目录结构 2.log4j.properties # # Licensed to the Apache Software Foundation (ASF) under one # or more c ...

  6. 2019牛客暑期多校训练营（第四场）K.number

    >传送门< 题意:给你一个字符串s,求出其中能整除300的子串个数(子串要求是连续的,允许前面有0) 思路: >动态规划 记f[i][j]为右端点满足mod 300 = j的子串个数 ...

  7. 《HelloGitHub》第 40 期

    <HelloGitHub>第 40 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程. ...

  8. 【Mac】Mac 使用 zsh 后， mvn 命令无效

    如题-- 解决方法: 将 maven 的环境变量配置放到 .zshrc 文件中. 参考链接: http://ruby-china.org/topics/23158 https://yq.aliyun. ...

  9. Pyenv虚拟环境的创建(虚拟机)

    创建pyenv虚拟环境 sudo yum install openssl* 安装其所需要的库文件 git clone https://github.com/yyuu/pyenv.git ~/.pyen ...

  10. STL set 详细用法

    一个集合(set)是一个容器,它其中所包含的元素的值是唯一的. 用到的库 #include <set> 定义 最简单: set<int> a; set和其他的stl一样,都支持 ...