纯css、js 的H5页面对接echarts
做项目时，会遇到一些零碎的技术点。记录下来以防忘记
需求：做可视化界面，但是需要兼容ie8，需要用纯css、js 的H5页面对接echarts，下面为效果图（带定时器循环显示tooltip）。
实现方式（此处为一个中央云南地图的实现方法）：
1、定义容器
// 页面逻辑
<div class="sp-ynsdt" id="main4"></div>
2、声明参数
var myChart4 = echarts.init(document.getElementById('main4'));
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的更多相关文章
- 前端视频直播技术总结及video.js在h5页面中的应用
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
- HTML+CSS+JS设计注册页面
HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
- 纯CSS让overflow:auto页面滚动条出现时不跳动
现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...
- 纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...
- 使用Hammer.js的H5页面开发DOM的一些小说法
前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. ...
- 纯css实现图片或者页面变灰色
前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...
- Vue使用Clipboard.JS在h5页面中复制内容
安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...
- js，h5页面判断客户端是ios还是安卓
$(function(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('An ...
随机推荐
- 「Sqlserver」数据分析师有理由爱Sqlserver之二-像使用Excel一般地使用Sqlserver
大家一谈数据库,就觉得非常高深莫测,深不见底,非凡人敢去触摸.但Excel的话,没人敢说自己不会使用吧(相反一大堆人的简历上写着精通OFFICE所有软件套件).换作其他非微软厂商的数据库,的确很容易产 ...
- 个人永久性免费-Excel催化剂插件功能修复与更新汇总篇之九
第11波-快速批量插入图片并保护纵横比不变 原文链接:https://www.jianshu.com/p/9a3d9aa7ba7e 修复了插入图片有纵向的图片时,插入后还是显示横向的情况. 第83波- ...
- Kotlin之var和val区别
var 和 val 是Kotlin的两个声明变量的关键字, var声明的变量是一个可变的变量,而val声明的变量是一个只读的变量(类似于java中的final变量)
- python黑帽子学习笔记1：pyqt5 designer+wmi实现进程监视器
环境说明:python3.6 所需要模块:wmi.pyqt5.pythonMagick 先放上一张成品效果图,如图所示: 界面利用pyqt5的designer实现,画好界面如下图所示: 画好后,保存好 ...
- Linux设备驱动程序学习----1.设备驱动程序简介
设备驱动程序简介 更多内容请参考Linux设备驱动程序学习----目录 1. 简介 Linux系统的优点是,系统内部实现细节对所有人都是公开的.Linux内核由大量复杂的代码组成,设备驱动程序可以 ...
- 如何实现Excel多人共享与协作
1.写在前面的话 本人从事信息化工作多年,对Excel等电子表格的多人共享与协作接触较早,帮助客户实施的方案也较多,因此有些体会和认识.正好看到网上这方面的讨论较多,但都不完整,我就进一步做了专题调研 ...
- 图解Redis之数据结构篇——整数集合
前言 整数集合(intset)并不是一个基础的数据结构,而是Redis自己设计的一种存储结构,是集合键的底层实现之一,当一个集合只包含整数值元素,并且这个集合的元素数量不多时, Redis i ...
- Linux学习笔记06之DNS
一.DNS概念:Domain Name System(域名系统) 是互联网上作为域名和IP地址相互映射的一个分布式数据库 二.DNS功能: 完成IP地址和域名之间的一个映射 三.DNS分类: 1.静态 ...
- Maven中央仓库发布历程
一.前言 最近自己在学习Spring boot的过程中开发了一个组件 multithreadpool-spring-boot-starter,通过这个组件,我们可以动态根据配置文件进行多个线程池的初始 ...
- 数据类型之Integer与int
数据类型之Integer与int Java入门 基本数据类型 众所周知,Java是面向对象的语言,一切皆对象.但是为了兼容人类根深蒂固的数据处理习惯,加快常规数据的处理速度,提供了9种基本数据类型, ...