电商网站销售数据分析,广州建站外包,海南网络营销,广州新公司网站建设# 地图数据获取
获取地址#xff1a;DataV.GeoAtlas地理小工具系列
# 地图渲染
// 地图
mapOption: {
title: {text: 作物省市分布图,left: left,subtext: provincial and cities distribution of crops
},
// 浮窗样式
tooltip: {show: true, // 提示浮窗是否显示trigger:…# 地图数据获取
获取地址DataV.GeoAtlas地理小工具系列
# 地图渲染
// 地图
mapOption: {
title: {text: 作物省市分布图,left: left,subtext: provincial and cities distribution of crops
},
// 浮窗样式
tooltip: {show: true, // 提示浮窗是否显示trigger: item, // 设置该属性之后会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性不与formatter同用。alwaysShowContent: false,backgroundColor: #FFF, // 提示浮窗背景颜色borderColor: rgba(0, 0, 0, 0.16);,hideDelay: 100,triggerOn: mousemove, // 鼠标移动出现浮窗也可以是click等enterable: true,textStyle: {color: #303133,fontSize: 12,width: 20,height: 30,overflow: break},
},
// 颜色渐变
visualMap: {show: false,min: 0,max: 10000,left: 10%,top: bottom,calculable: true,seriesIndex: [0],inRange: {color: [#CCD9F9, #98B2F3, #668DEE, #394F85]}
},// 浮窗内容
formatter (params) {params.data params.data || {}const value params.data.value || 0return 名称${params.name} 种子数目${value}
},geo: {map: china,type: map,zoom: 1.2, // 地图放大aspectScale: 0.8, //地图宽高比例roam: true, //地图缩放、平移label: {show: true,color: #606266,},// 滚轮缩放的极限控制scaleLimit: {min: 0.5, //缩放最小大小max: 6, //缩放最大大小},emphasis: {itemStyle: {color: #303133,areaColor: red}}
},
series: [{geoIndex: 0, // 将数据和第0个geo配置关联在一起不太理解但是去掉会出错type: map,data: [],
}]
},
# 定时器滚动
intervalBegin (myChart, mapList) {
var hourIndex 0;
var carouselTime null;carouselTime setInterval(() {//dispatchAction echarts的API触发图表行为myChart.dispatchAction({type: downplay, //downplay 取消高亮指定的数据图形seriesIndex: 0});myChart.dispatchAction({type: highlight, //highLight 高亮指定的数据图形seriesIndex: 0, //系列indexdataIndex: hourIndex //数据index});myChart.dispatchAction({type: showTip, //showTip 显示提示框seriesIndex: 0,dataIndex: hourIndex});hourIndex;//当循环到数组当中的最后一条数据后重新进行循环if (hourIndex mapList.length) {hourIndex 0;}
}, 3000);//鼠标移入组件时停止轮播
myChart.on(mousemove, (e) {clearInterval(carouselTime); //清除循环myChart.dispatchAction({type: downplay,seriesIndex: 0,});myChart.dispatchAction({type: highlight,seriesIndex: 0,dataIndex: e.dataIndex});myChart.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: e.dataIndex});
});
//鼠标移出组件时恢复轮播
myChart.on(mouseout, () {carouselTime setInterval(() {myChart.dispatchAction({type: downplay,seriesIndex: 0,});myChart.dispatchAction({type: highlight,seriesIndex: 0,dataIndex: hourIndex});myChart.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: hourIndex});hourIndex;if (hourIndex mapList.length) {hourIndex 0;}}, 3000);
});
},
# 特殊样式设置
1、地图颜色渐变
// 颜色渐变
visualMap: {show: false,min: 0,max: 10000,left: 10%,top: bottom,calculable: true,seriesIndex: [0],inRange: {color: [#CCD9F9, #98B2F3, #668DEE, #394F85]}
},
2、地图默认选中颜色
geo: {map: china,type: map,zoom: 1.2, // 地图放大aspectScale: 0.8, //地图宽高比例roam: true, //地图缩放、平移label: {show: true,color: #606266,},// 滚轮缩放的极限控制scaleLimit: {min: 0.5, //缩放最小大小max: 6, //缩放最大大小},label: { // 设置默认地图状态//itemStyle: {// color: #303133,// areaColor: red//}},emphasis: { // 选中样式设置itemStyle: {color: #303133,areaColor: red}}
},
3、浮窗样式
// 浮窗内容
formatter (params) {params.data params.data || {}const value params.data.value || 0return 名称${params.name} 种子数目${value}
},
