echarts 总结+地图

 

?

1	ECharts访问链接    https://blog.csdn.net/Yi2008yi/article/details/122808328

:force-use-old-canvas="true" 防止echarts穿透
饼图：
this.ec5.option.series[0].data[0].value = 0;
echarts 断点连接，两个点中间有空值，折线图就会出现断点
https://blog.csdn.net/weixin_40902181/article/details/84952951?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link

关于地图

1、如何绘制一个地图

地址:
http://datav.aliyun.com/portal/school/atlas/area selector
https://echartsapache.org/examples/zh/index.html
https://ww.isgow.com/
1、先去网站扒一个json文件
2、对照效果图去echarts网站或其他网站找个相近的例子
3、根据例了还原ui效果图

2、实时轮播地图，移动到哪一块区域，显示提示框并高亮背景 (根据字段区分高亮的颜色)

1、先通过字段判断每个区域高亮的额色
const mapBgColor = (color) => {
option.series[0].emphasis.itemStyle.areaColor = color
mapCharts.setOption(option, true)
}
2、设置显示高亮，显示提示框(由于只想展示一个高亮，所以需要先把之前的高亮取消)
const displayContent = (index) => {
mapCharts.dispatchAction({
type:"downplay'，// 取消高亮
seriesIndex:0,
});
mapCharts.dispatchAction({
type:"highlight'//高亮当前位置
seriesIndex: 0,
dataIndex: index
});
mapCharts.dispatchAction({
type:"showTip'，//显示标题栏
seriesIndex: 0,
dataIndex: index
});
}
3.设置定时器去轮询
if(timeTicket) clearInterval(timeTicket)
timeTicket = setInterval(() => {
const optionData = option.series[0].data
mapBgColor('#ff0000’) // 高亮额色
displayContent(countMapDress) //显不高亮
if (countMapDress < optionData.length) {
countMapDress++
}else (
countMapDress=1
}
}，1000);

3、设置地图背景阴影

设置geo属性进行配置
geo:{
map;xxx,//地图类型
aspectscale:.75,//这个参数用于 scale 地图的长宽比
zoom:1.2，//当前视角的猪放比例
roam;false，//是否开启鼠标缩放和平移漫游
tooltip: {
show: false，
},
itemStyle:{
normal:{
areaColor;’#fff’，//地图区域的额色
shadowColor:”#0ebc66， // 阴影颜色
borderwidth:8，//描边线宽。为 0时无描边
shadowoffsetx:5，//阴影水平方向上的偏移距离
shadowoffsetY:5,//明影垂直方向上的偏移距离
}
}
}

3.4、地图底部有人背景，实现旋转效果

@keyframes rotate {
0%{
transform: rotate(0deg);}
100% {
transform: rotate(360deg);
}
}
.middleMapBg {
background-image:’’;
background-size: 100% 100%;
opacity: 0.4;
animation: rotate 60s linear infinite;
}