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

需求：做可视化界面，但是需要兼容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. 开源一个好用的nodejs访问mysql类库

    一.背景问题 自nodejs诞生以来出现了一大批的web框架如express koa2 egg等等,前端可以不再依赖后端可以自己控制服务端的逻辑.原来的后端开发同学的阵地前端如今同样也写的风生水起,撸 ...

  2. 关于Object.defineProperty 的基础知识

    Object.defineProperty 这个方法大家耳熟能详,可以对 对象的属性进行添加或修改的操作.即可以进行  数据劫持 .vue就是通过这个方法来劫持数据的. 平时我们创建对象的时候,一般通 ...

  3. 一个简单的JS倒计时

    看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时.全当学习JS. 主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时) ...

  4. 关于Servlet小总结

    目录 Servlet Servlet简介 Servlet简单实现 Servlet注解 Servlet生命周期 启动时加载Servlet Servlet客户端 HTTP请求的结构 Servlet服务器 ...

  5. 201809-2买菜 ccf

    只得了90分,很奇怪,有大佬指导一下吗 #include<stdio.h> int main() { ,sum=; scanf("%d",&n); *n],b[ ...

  6. python课堂整理17---文件操作（上）

    1.在同一目录下新建文本文件 “爱了” 2.在该文件下写入内容,同时留意pycharm右下角的编码格式为 utf- 8 3.下面程序中的read函数会索引系统默认的编码格式,winx下是gbk ,所以 ...

  7. 从后端到前端之Vue（五）小试路由

    一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的.其实呢不管在哪里用,把原理研究明白就对了. 一. 官网demo 这里不得不吐槽一下官网,写的不清不 ...

  8. 【Git】Found a swap file by the name ".git/.MERGE_MSG.swp"

    最近合并分支的时候总是遇到这个问题,导致合并之后还需要再提交一次--有点烦-- 解决方案: 在项目根目录(如/StudioProjects/demo/Leave)下,找到 .git/.MERGE_MS ...

  9. 前端笔记之React（五）Redux深入浅出

    一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...

  10. 洛谷P2630 题解

    我先讲一下我的思路 将A,B,C,D四种操作用函数储存起来: 枚举所有可能出现的情况:A,B,C,D,AA,AB,AC,AD,BB,BC,BD,CC,CD,DD,ABC,ABD,ACD,BCD,ABC ...