框架：echarts（最新版）+vue(2.5)
数据统计分析不可避免用到图表，所以选择了功能强大、免费的echarts
1、地图value值为数组，需要实现鼠标移上去浮动显示地图所有value值，并换行，如下图
gag.jpg
首先设置tooltip.formatter,可用方法（param={}）其中param.data.value就是对应的省份的值（是个数组，有多个值），只需在此方法中拼接即可
tooltip : {
trigger: 'item',
formatter: (params) => {
let str=''
params.data.value.forEach(item=>{
str+=item.name+':'+item.value+'万元\n'
})
return str
},
extraCssText:'width:200px; white-space:pre-wrap'
},
若想换行:
方法一：直接在拼接时加上
方法二：拼接时加\n,并添加 extraCssText:'width:200px; white-space:pre-wrap'即可
2、若option中有使用到formatter函数，将option保存到后台，回显图表时会出现formatter无效；
错误示例：
option:JSON.stringify(this.option)---传给后台，
this.option=JSON.parse(option);this.myChart.setOption(this.option,true);---回显
解决办法：option以对象转成json字符串时方法无法转换，需要将方法提前转成字符串，再转成json字符串；反之接受时需要将字符串转成方法，才可以生效
image.png
image.png
其中方法转字符串的方法、字符串转方法的代码如下：
//将option中的function字符串类型转为函数
const CommonStrTOFunc = (option)=>{
if((typeof option)=="object"){
for(var o in option){
var opt=option[o];
if((typeof opt)=="string"){
if(opt.indexOf("function")!=-1){
//"string"转为"function" eval
var fmt=eval("("+opt+")");
option[o]=fmt;
}
}
CommonStrTOFunc(opt);
}
}
return option;
};
//将option中的function转为字符串
const CommonFuncTOStr=(option)=>{
if((typeof option)=="object"){
for(var o in option){
var opt=option[o];
if((typeof opt)=="function"){
option[o]=opt+'';
}
CommonFuncTOStr(opt);
}
}
return option;
};
3、echarts 换肤，下载的自定义主题“地图”无效果
问题描述：echarts自带颜色不符合客户要求，需要做到一键换肤的功能，echarts官网下载的自定义主题，基本图形都适用，发现地图没效果
症结：经过反复试验，下载的主题中地图部分格式不符合最新版地图api文档
解决办法：按着api文档的格式修改保存即可。
下载格式：
image.png
正确格式：
image.png
备注：init的时候的主题名字一定要和下载文件中的注册名字一致，否则无法生效
image.png
image.png
4、地图添加新区域（如贵州省添加贵安新区、成都市添加天府新区）
问题描述：echarts目前不提供地图下载，但是在node_modules/echarts/map/下有全国各省的经纬度数据（json\js）;但是需求往往需要加上一个刚划分的区域，比如贵州省添加贵安新区(新划分的无法获取到经纬度）；
因此查阅资料找到一种折中的办法
（1）首先通过http://geojson.io/#map=10/26.5031/106.3847
绘制贵安新区的区域，在右侧会出现你描出区域的经纬度数据
image.png
（2）通过压缩方法将geoJson进行压缩参考网站
https://blog.csdn.net/isea533/article/details/79194819
（3）将生成的js或json文件放到项目中，
import './assets/js/guizhou.js'
series: [ {
type: 'map',
mapType: '贵州',
................
}];
5、后台返回有数据，echarts画出的图有断裂，tooltip显示为NAN
原因：后台返回数据是千分位计数，如（10000---10,000）
解决办法：后台处理一下返回数据、或前端在绘制图形前格式化千分位计数
num.replace(/,/g, "")
image.png
网友评论