12180人阅读
可视化（8）
echart（2）
下面是中第8、9张的实现说明
个人轨迹的可视化是echart通过调用百度地图API后实现，关于Echarts如何调用百度地图API，请参考上一篇文章
下图展示的个人轨迹均为虚拟数据
本文只做单用户轨迹展示说明，并未深入探讨批量用户轨迹的可视化及优化
4.使用工具为：Echarts
1.Echart版本说明及模块化文件引入
目前百度搜索能看到的有echart2和echart3，由于echart3已不提供百度地图实例化的样本(若强行用echart3，需自行写好相关js脚本)，所以下文是基于echart2，下载地址为：
模块化文件的引入主要有main.js，map.js，还有echart.js
require.config({
echarts: "echarts",
"echarts",
"echarts/chart/main",
"echarts/chart/map",
main.js文件对应在下载的echart2压缩包目录echarts-2.2.7\extension\BMap\src下，该文件是杨骥（echart团队）写的百度地图在echart上的扩展文件
map.js文件对应目录为：build\dist\chart，再声明一次，引入百度地图时，dist目录需全部复制到开发文件相应目录下
echarts.js同样存在于dist文件
此处详细参见一文。
2.个人轨迹展示的思考及实现
2.1 对于个人轨迹的可视化，最初的设想是：
在百度地图上，搭配时间轴timeline，随着时间的变化用户轨迹的演变，后来在用echart写时发现timeline属性始终对应不到options列表，无法渲染options下用户的轨迹参数列表，再后来与R REmap包作者交谈中进一步确认，echart中timeline目前还无办法在百度地图上渲染，这里应该知会一下echart团队的，下面就不对timeline使用做过多说明了。
除上述不同时间不同地点外，为更好展示轨迹线下的意义，还需要做进一步工作，即不同时间不同地点不同事件，如此对于个人轨迹才有比较契合展示。
最终效果如下：
上班场景：
同行逛街：
2.2 个人轨迹的echart实现
2.2.1 为实例化百度地图背景构建一个容器
charset="utf-8"&
type="text/css"&
margin: 0;
height: 100%;
id="main"&&
Margin设为0则与浏览器无边界融合，div属性容器id，后面js脚本里需要用到该属性，并将echart填充到该容器里，当然，div可以有多个，故可以填充多个echart实例。
实例化后再js脚本里调用echart api即可：
var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
enableMapClick: false
var map = BMapExt.getMap();
var container = BMapExt.getEchartsContainer();
var startPoint = {
x: 113.328755,
y: 23.135588
var point = new BMap.Point(startPoint.x, startPoint.y);
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom(true);
上图中的方法都封装在main.js中，使用的时候按上图调用即可，其中css样式对应之前的容器大小，BMapExt为初始化的地图对象，具体可看main.js源码，中间getMap,getEchartsContainer为获取地图实例及echart实例对象，BMap.Point是定义当前打开地图的中心点，最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。
2.2.2 修改百度地图背景
此处可根据需求自行修改，可以通过修改map.setMapStyle函数里百度地图的styleJson达到目的，具体如下：
有两种方法可以定义自己的styleJson:
该地址为百度对外开放的地图自定义地址，全过程鼠标即可完成自己的模板，最后导出json文件在自己的开发文档中引用即可。
2.修改下面代码
styleJson: [
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#081734'
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
'featureType': 'building',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'highway',
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color':'#003051'
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
'featureType': 'subway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
下面为修改前后对比：
2.2.3 Echart介入
1. option对象
Echart中所有的属性参数都是存放于option对象中具体，最后通过setOption方法即可将自己定义的option实例化，部分如下：
具体参数设置参考echart2配置文 档：
Timeline属性为option对象最外层，且timeline属性下的data参数定义的数组，对应着option对象里options属性下的每一个{}参数列，由于echart暂不支持百度地图上timeline，故不再细说。
3. legend属性
Legend属性定义series下不同{}数组，其仍为opion下options中同个数组。具体表现为不同标签控制不同的图形映射，如下图：
上图对应的legend参数如下：
color:['gold','red'],
data:['上班轨迹(甲)','逛街购物轨迹(乙,丙)'],
orient:'vertical',
padding:[30,15,15,30],
textStyle:{
fontSize:17,
color:'rgb(204,204,204)',
selected:{
'上班轨迹(甲)':true,
'逛街购物轨迹(乙,丙)':false,
selectedMode:'single',
其中data数组中定义的两个对象分别对应series下两个数组：
4. geoCoord属性
该属性对应实例化的点的经纬度，自定义的中文名似乎总是出错，单有批量的点时，建议换成英文+数字的名字，此外geoCoord同时控制着下文的markLine和markPoint，且geoCoord与markLine，markPoint属性平级。
geoCoord:{
'p1':[113.317568,23.135959],
'p2':[113.317783,23.135278],
'p3':[113.321489,23.135432],
'p4':[113.321525,23.135282],
'p5':[113.321592,23.13517],
'p6':[113.321799,23.135083],
'p7':[113.322158,23.135141],
'p8':[113.322374,23.135378],
'p9':[113.321992,23.135847],
'p10':[113.322243,23.13949],
'p11':[113.322396,23.1397],
'p12':[113.328163,23.13943],
'p13':[113.334945,23.139033],
'p14':[113.334658,23.133217],
'p15':[113.33313,23.13222],
'p16':[113.328755, 23.137588]
markLine,markPoint属性
此处markLine参数为实现轨迹的关键，其中data参数控制轨迹的迁徙方向，第一个name表示起点，第二个表示终点，此外还可以添加color，value等其他属性，来控制线的颜色及点的大小。
markPoint参数为实现相关点的效果，其中data参数控制对应的点，其他参数与markLine大同小异。
markLine : {
Symbol:['none', 'arrow'],
symbolSize:['0', '0.1'],
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
itemStyle : {
color: 'red',
color:function(param){
return(param.data[0].value.colorValue);
borderWidth:3,
lineStyle: {
type: 'solid',
shadowBlur: 10
label:{show:false,value:'天河城'}
[{name:'p1'}, {name:'p2',value:{colorValue:'gold'}}],
[{name:'p2'}, {name:'p3',value:{colorValue:'gold'}}],
[{name:'p3'}, {name:'p4',value:{colorValue:'gold'}}],
[{name:'p4'}, {name:'p5',value:{colorValue:'gold'}}],
[{name:'p5'}, {name:'p6',value:{colorValue:'gold'}}],
[{name:'p6'}, {name:'p7',value:{colorValue:'gold'}}],
[{name:'p7'}, {name:'p8',value:{colorValue:'gold'}}],
[{name:'p8'}, {name:'p9',value:{colorValue:'gold'}}],
[{name:'p9'}, {name:'p10',value:{colorValue:'gold'}}],
[{name:'p10'}, {name:'p11',value:{colorValue:'gold'}}],
[{name:'p11'}, {name:'p12',value:{colorValue:'gold'}}],
[{name:'p12'}, {name:'p13',value:{colorValue:'gold'}}],
[{name:'p13'}, {name:'p14',value:{colorValue:'gold'}}],
[{name:'p14'}, {name:'p15',value:{colorValue:'gold'}}]
上面为markLine明细，下面为markPoint明细：
markPoint:{
symbol:'image://./image/location.svg',
symbolSize:function(v){
return v/5
show:true,
type:'bounce',
itemStyle:{
show:false,
emphasis:{
show:false,
{name:'p1',value:50,
formatter:'时间:8:30am&br/&出发地:中海锦城南苑'
{name:'p16',value:100,
formatter:'天河城&br/&经度:113.328755&br/&纬度:23.137588'
{name:'p15',value:50,
formatter:'时间:10:00am&br/&目的地:富力盈隆广场'
其中symbol处为另外下载的图片，可自定义点的图标。
6. tooltip属性
该属性控制悬浮提示框，即对应上文不同时间不同地点不同事中的不同事的体现，tooltip可以放置于markPoint的data数组中:
{name:'p1',value:50,
formatter:'时间:8:30am&br/&出发地:中海锦城南苑'
{name:'p16',value:100,
formatter:'天河城&br/&经度:113.328755&br/&纬度:23.137588'
{name:'p15',value:50,
formatter:'时间:10:00am&br/&目的地:富力盈隆广场'
也可以放置于option对象的最外层，与markLine,markPoint 平级：
tooltip : {
show: true,
trigger:'item',
hideDelay:4000,
formatter: function(d) {
var jw= '经度：'+d.value[0]+'&br/&'
jw += '纬度：'+d.value[1]
该方法控制的是批量的提示框，如果想做到相对自由的自定义，建议用第一种tooltip方法。
7. 其他属性
具体参见文末代码.
2.3 开发文档结构
总的目录：
Echars目录：
Echarts/chart目录：
2.4 实现全代码：
charset="utf-8"&
type="text/css"&
margin: 0;
height: 100%;
id="main"&&
src="./echarts/echarts.js"&&
type="text/javascript" src="http://api./api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"&&
src="./js/jquery.min.js"&&
src="./js/require.js"&&
src="./js/example2.js"&&
echarts样式+百度背景代码：
(function () {
require.config({
echarts: "echarts",
"echarts",
"echarts/chart/main",
"echarts/chart/map",
function (echarts, BMapExtension) {
$('#main').css({
height:$('body').height(),
width:$('body').width()
// 初始化地图
var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
enableMapClick: false
var map = BMapExt.getMap()
var container = BMapExt.getEchartsContainer()
var startPoint = {
x: 113.328755, //天河城
y: 23.135588
var point = new BMap.Point(startPoint.x, startPoint.y)
map.centerAndZoom(point, 17)
map.enableScrollWheelZoom(true)
// 地图自定义样式
map.setMapStyle({
styleJson: [
'featureType': 'land',
//调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
'featureType': 'building',
//调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
'featureType': 'building',
//调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'highway',
//调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
'featureType': 'highway',
//调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'arterial',
//调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color':'#003051'
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
'featureType': 'subway',
//调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'all',
//调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
'featureType': 'all',
//调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
option = {
color: ['gold','aqua','lime'],
subtext: '',
x:'center',
textStyle : {
color: '#fff',
fontSize:20,
fontWeight:'bold',
tooltip : {
show: true,
trigger:'item',
hideDelay:4000,
formatter: function(d) {
var jw= '经度：'+d.value[0]+'&br/&'
jw += '纬度：'+d.value[1]
color:['gold','red'],
data:['上班轨迹(甲)','逛街购物轨迹(乙,丙)'],
orient:'vertical',
padding:[30,15,15,30],
textStyle:{
fontSize:17,
color:'rgb(204,204,204)',
selected:{
'上班轨迹(甲)':true,
'逛街购物轨迹(乙,丙)':false,
selectedMode:'single',
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
series : [
name:'上班轨迹(甲)',
type:'map',
mapType: 'none',
markLine : {
Symbol:['none', 'arrow'],
symbolSize:['0', '0.1'],
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
itemStyle : {
color: 'red',
color:function(param){
return(param.data[0].value.colorValue)
borderWidth:3,
lineStyle: {
type: 'solid',
shadowBlur: 10
label:{show:false,value:'天河城'}
[{name:'p1'}, {name:'p2',value:{colorValue:'gold'}}],
[{name:'p2'}, {name:'p3',value:{colorValue:'gold'}}],
[{name:'p3'}, {name:'p4',value:{colorValue:'gold'}}],
[{name:'p4'}, {name:'p5',value:{colorValue:'gold'}}],
[{name:'p5'}, {name:'p6',value:{colorValue:'gold'}}],
[{name:'p6'}, {name:'p7',value:{colorValue:'gold'}}],
[{name:'p7'}, {name:'p8',value:{colorValue:'gold'}}],
[{name:'p8'}, {name:'p9',value:{colorValue:'gold'}}],
[{name:'p9'}, {name:'p10',value:{colorValue:'gold'}}],
[{name:'p10'}, {name:'p11',value:{colorValue:'gold'}}],
[{name:'p11'}, {name:'p12',value:{colorValue:'gold'}}],
[{name:'p12'}, {name:'p13',value:{colorValue:'gold'}}],
[{name:'p13'}, {name:'p14',value:{colorValue:'gold'}}],
[{name:'p14'}, {name:'p15',value:{colorValue:'gold'}}]
markPoint:{
symbol:'image://./image/location.svg',
symbolSize:function(v){
return v/5
show:true,
type:'bounce',
itemStyle:{
show:false,
emphasis:{
show:false,
{name:'p1',value:50,
formatter:'时间:8:30am&br/&出发地:中海锦城南苑'
{name:'p16',value:100,
formatter:'天河城&br/&经度:113.328755&br/&纬度:23.137588'
{name:'p15',value:50,
formatter:'时间:10:00am&br/&目的地:富力盈隆广场'
geoCoord:{
'p1':[113..135959],
'p2':[113..135278],
'p3':[113..135432],
'p4':[113..135282],
'p5':[113..13517],
'p6':[113..135083],
'p7':[113..135141],
'p8':[113..135378],
'p9':[113..135847],
'p10':[113..13949],
'p11':[113..1397],
'p12':[113..13943],
'p13':[113..139033],
'p14':[113..133217],
'p15':[113.22],
'p16':[113.328755, 23.137588]
name:'逛街购物轨迹(乙,丙)',
type:'map',
mapType: 'none',
markLine : {
Symbol:['none', 'arrow'],
symbolSize:['0', '0.1'],
smooth:true,
smooth:20,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
itemStyle : {
color: 'red',
color:function(param){
return(param.data[0].value.colorValue)
borderWidth:3,
lineStyle: {
type: 'solid',
shadowBlur: 10
label:{show:false,value:'天河城'}
[{name:'s1'}, {name:'s2',value:{colorValue:'gold'}}],
[{name:'s2'}, {name:'s3',value:{colorValue:'gold'}}],
[{name:'s3'}, {name:'s4',value:{colorValue:'gold'}}],
[{name:'s4'}, {name:'s10',value:{colorValue:'gold'}}],
[{name:'s10'}, {name:'s11',value:{colorValue:'gold'}}],
[{name:'s5'}, {name:'s6',value:{colorValue:'gold'}}],
[{name:'s6'}, {name:'s7',value:{colorValue:'gold'}}],
[{name:'s7'}, {name:'s8',value:{colorValue:'gold'}}],
[{name:'s8'}, {name:'s9',value:{colorValue:'gold'}}],
[{name:'s9'}, {name:'s10',value:{colorValue:'gold'}}],
[{name:'s10'}, {name:'s11',value:{colorValue:'gold'}}],
markPoint:{
symbol:'emptyCircle',
symbolSize:function(v){
return v/5
show:true,
type:'scale',
period:10,
color:'gold',
itemStyle:{
show:false,
emphasis:{
show:false,
{name:'s1',value:50,
formatter:'小乙&br/&时间:8:30am&br/&出发地:东兴小区'
{name:'s5',value:50,
formatter:'小丙&br/&时间:8:10am&br/&出发地:冼村'
{name:'s10',value:50,
//tooltip:{
formatter:'目的地天河城&br/&经度:113.328755&br/&纬度:23.137588'
{name:'s11',value:100,
formatter:'时间:10:00am&br/&目的地:天河城购物广场&br/&小乙与小丙成功会合&br/&开始一天的逛街之旅'
geoCoord:{
's1':[113..129146],
's2':[113..129877],
's3':[113.612],
's4':[113..136798],
's5':[113..131398],
's6':[113..132711],
's7':[113..132976],
's8':[113..132212],
's9':[113..13681],
's10':[113..137463],
's11':[113..137949],
var myChart = BMapExt.initECharts(container)
window.onresize = myChart.onresize
BMapExt.setOption(option)
上述均为工作中实际用到的可视化，贴出来跟大家分享，也作为自己的平日总结。
如果有什么错误请多指出。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：98302次
积分：1163
积分：1163
排名：千里之外
原创：15篇
评论：621条
(1)(1)(1)(1)(1)(3)(1)(4)(2)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'相关文章推荐
echarts地图从全国进省从省进市
ECharts主页：
/index.html
ECharts-2.1.8下载地址：
今天想分享下百度地图的心得，我也是一个新手，若有什么不对的或者说错了的地方，还请大家多评论告诉我！废话不多说了，进入正题。
关于地图修改基础配置的方法大致上百度都能搜到，最常见莫过于创...
以下是我的代码
.container{margin-top:100}
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用，后来在ECharts的Demo中看到了有关空气质量的相关报表应用，就想将百度地图、ECharts和HT for Web三者结合起来...
前一篇谈及到了ECharts整合HT
for eb的网络扑图应用，后来在ECharts的Demo中看到了有关空气质量的相关报表应用，就想将百度地图、ECharts和HT
for Web三者结合...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Echarts（1）
可能会一点一点的更新
不是很快 (。?＿?。)?I’m sorry~
一、统计我国某省的数据
看图就好 代码下面给你放上去 (#^.^#)
$(function() {
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get('static/json/province/HK.json', function(geoJson) {
myChart.hideLoading();
echarts.registerMap('HK', geoJson);
myChart.setOption(option = {
text: '香港18区人口密度 （2011）',
tooltip: {
trigger: 'item',
formatter: '{b}&br/&{c} (p / km2)'
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
restore: {},
saveAsImage: {}
visualMap: {
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
series: [{
name: '香港18区人口密度',
type: 'map',
mapType: 'HK',
itemStyle: {
show: true
emphasis: {
show: true
name: '中西区',
value: 20057.34
name: '湾仔',
value: 15477.48
name: '东区',
value: 31686.1
name: '南区',
value: 6992.6
name: '油尖旺',
value: 44045.49
name: '深水埗',
value: 40689.64
name: '九龙城',
value: 37659.78
name: '黄大仙',
value: 45180.97
name: '观塘',
value: 55204.26
name: '葵青',
value: 21900.9
name: '荃湾',
value: 4918.26
name: '屯门',
value: 5881.84
name: '元朗',
value: 4178.01
name: '北区',
value: 2227.92
name: '大埔',
value: 2180.98
name: '沙田',
value: 9172.94
name: '西贡',
value: 3368
name: '离岛',
value: 806.98
nameMap: {
'Central and Western': '中西区',
'Eastern': '东区',
'Islands': '离岛',
'Kowloon City': '九龙城',
'Kwai Tsing': '葵青',
'Kwun Tong': '观塘',
'North': '北区',
'Sai Kung': '西贡',
'Sha Tin': '沙田',
'Sham Shui Po': '深水埗',
'Southern': '南区',
'Tai Po': '大埔',
'Tsuen Wan': '荃湾',
'Tuen Mun': '屯门',
'Wan Chai': '湾仔',
'Wong Tai Sin': '黄大仙',
'Yau Tsim Mong': '油尖旺',
'Yuen Long': '元朗'
myChart.setOption(option);
里的json文件我的下载里面有
没有的话你留言给我
我发给你 (#^.^#)
二、地图上增加标签
Code (＾－＾)V
$(function() {
var myChart = echarts.init(document.getElementById('main'));
var weatherIcons = {
up: './img/arrow-up.png',
down: './img/arrow-down.png'
option = {
text: '降水量',
subtext: '纯属虚构',
left: 'center'
tooltip: {
trigger: 'item'
visualMap: {
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
saveAsImage: {}
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
series: [{
name: 'a',
type: 'map',
mapType: 'china',
roam: true,
show: true,
formatter: function(params) {
var icon = params.data.value[1] ? 'up' : 'down';
var valueType = params.data.value[1] ? 'valueUp' : 'valueDown';
return params.name +
'：{' + valueType + '|' + params.value + '} {' + icon + '|}';
position: 'inside',
backgroundColor: '#fff',
padding: [4, 5],
borderRadius: 3,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
color: '#777',
valueUp: {
color: '#019D2D',
fontSize: 14
valueDown: {
color: 'red',
fontSize: 14
height: 14,
align: 'center',
backgroundColor: {
image: weatherIcons.up
height: 14,
align: 'center',
backgroundColor: {
image: weatherIcons.down
emphasis: {
show: true
name: '北京',
value: randomData()
name: '天津',
value: randomData()
name: '上海',
value: randomData()
name: '重庆',
value: randomData()
name: '河北',
value: randomData()
name: '河南',
value: randomData()
name: '云南',
value: randomData()
name: '辽宁',
value: randomData()
name: '黑龙江',
value: randomData()
name: '湖南',
value: randomData()
name: '安徽',
value: randomData()
name: '山东',
value: randomData()
name: '新疆',
value: randomData()
name: '江苏',
value: randomData()
name: '浙江',
value: randomData()
name: '江西',
value: randomData()
name: '湖北',
value: randomData()
name: '广西',
value: randomData()
name: '甘肃',
value: randomData()
name: '山西',
value: randomData()
name: '内蒙古',
value: randomData()
name: '陕西',
value: randomData()
name: '吉林',
value: randomData()
name: '福建',
value: randomData()
name: '贵州',
value: randomData()
name: '广东',
value: randomData()
name: '青海',
value: randomData()
name: '西藏',
value: randomData()
name: '四川',
value: randomData()
name: '宁夏',
value: randomData()
name: '海南',
value: randomData()
name: '台湾',
value: randomData()
name: '香港',
value: randomData()
name: '澳门',
value: randomData()
function randomData() {
return [Math.round(Math.random() * 1000), Math.random() & 0.6];
setTimeout(function() {
myChart.on('mouseup', function(params) {
if(!down) {
down = false;
var e = params.event;
var geoCoord = myChart.convertFromPixel('series', [e.offsetX, e.offsetY]);
myChart.setOption({
series: [{
center: geoCoord,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
myChart.on('mousedown', function() {
down = true;
myChart.on('mousemove', function() {
down = false;
myChart.setOption(option);
日17:38:57
还有什么需要的
或者不懂的可以留言或者+Q
联系我 (^▽^)
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1879次
排名：千里之外
原创：20篇
(5)(3)(5)(5)(1)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'