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

需求：做可视化界面，但是需要兼容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. 洛谷P1690 贪婪的Copy 题解

    题目:https://www.luogu.org/problemnew/show/P1690 分析: 这道题就是一道最短路的题目,因为看到数据范围: n≤100n\leq100n≤100 所以考虑使用 ...

  2. 一个测试文件与源文件位于不同模块时Jacoco覆盖率配置的例子

    问题描述: 我们有个多模块项目,由于种种原因(更常见的可能是需要集成测试)测试文件和源文件不在一个模块,Jacoco的覆盖率无法正确显示,查询了一些资料,发现中文的例子比较少,就把我自己的Demo贴一 ...

  3. 百度OCR文字识别API使用心得===com.baidu.ocr.sdk.exception.SDKError[283604]

    异常com.baidu.ocr.sdk.exception.SDKError[283604]App identifier unmatch.错误的packname或bundleId.logId::303 ...

  4. 使用nvm管理多个不同版本的nodeJS之安装成功nodeJs之后使用npm报错的问题

    使用nvm安装nodeJS之后,node -v命令可以正常使用,但是npm命令一直报“npm不是内部命令”的错误,深入研究之后得到以下解决方案: 搭建步骤: (1)下载nvm   https://gi ...

  5. HTML --- <a href=”#”>与 <a href=”javascript:void(0)” 的区别

    <a href=”#”>中的“#”其实是锚点的意思,默认为#top,所以当页面比较长的时候,使用这种方式会让页面刷新到页首(页面的最上部) javascript:void(0)其实是一个死 ...

  6. Jenkins持续部署-创建差量更新包

    目录 Jenkins持续部署-创建差量更新包 目录 前言 目的 详细流程 生成版本号 获取版本号 创建文件更新清单 压缩 获取上个版本的包 创建差量更新包 读取服务器Json配置 远程创建文件夹目录 ...

  7. Mysql处理中文乱码的问题

    一开始在创建完毕数据库和数据表之后,插入中文发现在mysql命令行和在sqlyog终端上看都是乱码,查看了一些文章,写的内容都一样,无非是如下几个步骤: 1:修改数据库字符集为utf8 2:修改数据表 ...

  8. 详解iframe与frame的区别

    iframe与frame的区别 一.使用iframe的优缺点 优点: 1.程序调入静态页面比较方便; 2.页面和程序分离; 缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外 ...

  9. python模块知识二 random -- 随机模块、序列化 、os模块、sys -- 系统模块

    4.random -- 随机模块 a-z:97 ~ 122 A-Z :65 ~ 90 import random #浮点数 print(random.random())#0~1,不可指定 print( ...

  10. 原创:微信小程序如何使用自定义组件

    本博文是通过实际开发中的一个实例来讲解自定义组件的使用. 第一步:新建自定义组件目录,如图,我新建了个componts和tabList目录,然后右键tabList目录选择新建compont取名为tab ...