VUE.js中引入echarts热力图并样式调整
1.热力图数据部分，不需要所有数据都标注，只需要有数据的点位标注即可
data : [
[0, 0, 20,'low'] , [0, 6, 10,'low'] , [0, 12, 15,'low'] ,[0, 18, 20,'low'] , [0, 24, 8,'low'] ,
[1, 1, 30,'middle'] , [1, 7, 35,'middle'] , [1, 13, 40,'middle'] , [1, 19, 41,'middle'] , [1, 25, 35,'middle'] ,
[2, 2, 56,'center'] , [2, 8, 60,'center'] , [2, 14, 70,'center'] , [2, 20, 68,'center'] , [2, 26, 72,'center'],
[3, 3, 80,'height'] , [3, 4, 80,'height'] , [3, 5, 90,'height'], [3, 9, 90,'height'] , [3, 10, 86,'height'] , [3, 11, 92,'height'],
[3, 15, 100,'height'] , [3, 16, 81,'height'] , [3, 17, 90,'height'], [3, 21, 98,'height'] , [3, 22, 88,'height'] , [3, 23, 90,'height'],
]
.map(function (item) {
return [item[1], item[0], item[2] || '-',item[3]]; // x轴值，y轴值，数据值，数据值
2.后端获取数据后需要转换为Number类型 parseInt('后端获取的str数据', 10); 转换为10进制的Number类型数据
VUE.js中加入echarts中的Geo路径图(SVG)以及其他注意要点
GEO 路径图部署服务器注意要点
geo: {
map: 'AllArea2',
roam: true,
emphasis: {
itemStyle: {
color: undefined
},
label: {
show: false
}
}
},
其中geo参数下的itemStyle参数下的color需要设置具体颜色或者undefined,否则进行服务器部署的时候svg格式的文件加载不出来，路径也不出来