echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示
echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示
- echarts在vue项目中的使用（场景）
-
- 数据绑定问题
- tooltip自定义显示
echarts在vue项目中的使用（场景）
项目开发时使用echarts进行数据的展示，数据由后台获取。由于是根据不同的服务器来确定展示的内容，故需要选获取服务器的信息，将获取到的服务器信息作为echarts查询的参数进行数据查询。
步骤如下：
- 方式请求，获取服务器信息
- 服务器信息返回，将服务器的标识作为echarts数据请求的参数，传递至后台，查询当前服务器的信息
- 返回数据，将返回数据添加到echarts的option对象中（option对象可以在data中定义，也可以在初始化echarts的方法中定义）
- 页面渲染，添加resize（）等
这么看起来也是比较简单的，按步骤来，应该没问题的~~~，但凡事就怕意外！
数据绑定问题
在拿到数据后，将数据绑定至data中设置好的option中，然后见证奇迹的时刻就到来了。
唉~，echarts区域并没有显示预期的图表，而是空白！！！
通过多方查找原因，最终确定了问题所在：
在mounted 方法中获取echarts数据，然后将数据绑定到option中时，由于页面的DOM已经加载完成，而初始化时echarts的数据并未请求回来（异步造成数据落后于DOM的渲染）
解决方案：
既然在mounted（）中存在上述问题，那么在mounted之前请求数据，应该就可以了！所以选择在created()中进行数据请求！
待数据返回后，即可调用echarts的init方法（前提需要将返回的数据与data中的option数据进行绑定，option中包含了各种echarts的设置，而一般情况下只需要后端返回xAxis中的data数据以及series数据即可，所以要将返回的数据绑定到option中）
其他问题：
数据格式问题：
不方便贴出项目代码， 就要echarts官方示例代码为例：
- xAxis中的data，类似为数组，数组元素可以是字符串，也可以是数字
- series为数组类型，每个元素为一个对象，实际要在echarts中显示的数据为元素中data属性的值，值也是数组类型
先看效果：
数据option：
option = {
xAxis: {
type: 'category',
data: [1, 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: ['820', 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
由上推断，echarts在对数据进行处理是，对数值 （number）和字符串应该是做了处理（转化）。现在将数据进行修改：
option = {
xAxis: {
type: 'category',
data: [1, 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: ['820%', 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
效果图：
初步测试，发现series中data数组的元素带有特殊符号如：&*%#等会导致不显示该数据
xAxis中也是如此，有兴趣的可以自行测试，在此不做展开。
tooltip自定义显示
有时后台返回的数据是需要添加单位的，这时要在tooltip中显示单位，就需要自定义tooltip的显示（单个数据类时，可以直接使用字符串进行设置，参考下面）。
简单例子：
option = {
tooltip: {
trigger: 'axis',
formatter: '{b0} 二狗子',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
data: [1, 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: ['820', 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
效果如图：
多类目数据例子：
option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
formatter:function(params) {
let str = ''
for(let i=0;i<params.length;i++) {
// 添加单位(*^▽^*)
str+='
'+params[i].marker + params[i].seriesName + ' ' + params[i].value + '~~(*^▽^*)'
}
return str
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
效果图：
关键代码：
tooltip中增加此代码，至于单位可自行由实际需要决定！
formatter:function(params) {
let str = ''
for(let i=0;i<params.length;i++) {
str+='
'+params[i].marker + params[i].seriesName + ' ' + params[i].value + '~~(*^▽^*)'
}
return str
},
至此，本期关于echarts的使用记录就结束了，希望对你有所帮助！