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

需求：做可视化界面，但是需要兼容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. android 发送邮件--实现 send email for android

    Android 发送邮件消息 用途:发送验证码,通过邮箱找回密码 不需要调用客户端直接使用代码进行发送 本项目使用到的jar包–本文结尾会附带下载链接 activation.jar additionn ...

  2. [leetcode] 67. Add Binary (easy)

    原题链接 思路: 用一个数保存进制,从后往前不断pop出两个数字和进制数相加,放入返回值中. var addBinary = function(a, b) { var arrA = a.split(' ...

  3. mysql查询表所有列名，并用逗号分隔

    SELECT GROUP_CONCAT(COLUMN_NAME SEPARATOR ",") FROM information_schema.COLUMNS WHERE TABLE ...

  4. python编码问题——解决python3 UnicodeEncodeError: 'gbk' codec can't encode character '\xXX' in position XX

    python实现爬虫遇到编码问题: error:UnicodeEncodeError: 'gbk' codec can't encode character '\xXX' in position XX ...

  5. istio入门教程

    广告 | kubernetes各版本离线安装包 安装 安装k8s 强势插播广告 三步安装,不多说 安装helm, 推荐生产环境用helm安装,可以调参 release地址 如我使用的2.9.1版本 y ...

  6. Lua语言学习

    1,语法 语句不用分号结尾 function ... end if .. else .. end 2, io库, string库, table库, OS库, 算术库, debug库 3, dofile ...

  7. android ——滑动菜单

    一.DrawerLayout是一个拥有两个子控件的布局,第一个子控件是主屏幕中显示的内容,第二个子控件是滑动菜单中显示的内容: <android.support.v4.widget.Drawer ...

  8. 关于p标签不能嵌套div标签引发的标签嵌套问题总结

    问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

  9. ImageLoader_显示图片

    public class MainActivity extends AppCompatActivity { private ListView lv; private List<Bean.Resu ...

  10. 同“窗”的较量：部署在 Windows 上的 .NET Core 版博客站点发布上线

    为了验证 docker swarm 在高并发下的性能问题,周一我们发布了使用 docker-compose 部署的 .net core 版博客站点(博文链接),但由于有1行代码请求后端 web api ...