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

需求：做可视化界面，但是需要兼容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. Button事件的三种实现方法

    onclick事件的定义方法,分为三种,分别为在xml中进行指定方法:在Actitivy中new出一个OnClickListenner():实现OnClickListener接口三种方式. 1.在xm ...

  2. Android使用webService(发送xml数据的方式，不使用jar包)

    Android使用webService可以用ksoap2.jar包来使用.但是我觉得代码不好理解,而且记不住. 所以我查询了好多资料,以及自己的理解.可以用代码发送http请求(发送xml数据)来访问 ...

  3. pyqt QT设计师制作关于对话框（软件版权申明）

    一.实验环境 1.anaconda2 2.5.0 + python2.7 2.pyinstaller3.0 二.操作步骤 2.1 启动designer.exe 2.2 单击“文件” -> “新建 ...

  4. 关于页面scroolTop的获取

    scroolTop 发现问题 获取页面滚动高度的时候: 当html页面设置了DTD<!DOCTYPE html> document.body.scroolTop // 值总是为0: doc ...

  5. Linux vim环境设置

    //vim /etc/vimrc(管理员权限) 1. 显示行号: set number 或者  set nu 不显示行号: set nonu 2.自动缩进: set autoindent 3.C语言自 ...

  6. linux初学者-ftp篇（一）

    linux初学者-ftp篇(一) FTP是文件传输协议,是用于Internet上的控制文件的双向传输.用户可以通过客户机程序从远程主机上下载或者向远程主机上传文件. linux系统中,如果不了解SEL ...

  7. jProfiler远程连接Linux监控jvm、tomcat运行状态

    第一步.下载软件 官网地址:https://www.ej-technologies.com/download/jprofiler/files , Mac客户端 GUI界面 Linux服务端 第二步.安 ...

  8. Redis项目实战---应用及理论（三）---Jedis使用

    Jedis即redis java客户端,源码地址:https://github.com/xetorthio/jedis pom配置: <dependency>    <groupId ...

  9. python基础——列表(list)

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...

  10. c++容器简单总结

    数据结构 描述 实现头文件 向量(vector) 连续存储的元素 <vector> 列表(list) 由节点组成的双向链表,每个结点包含着一个元素 <list> 双队列(deq ...