当没有数据的时候tooltip出现null的情况
解决
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('cart'));
// 设置图表大小自适应窗口大小
window.onresize = function () {
myChart.resize();
};
var data2019 = [100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320];
var data2020 = [120, 140, 10, 180];
// 计算同比数据
var dataTongBi = [];
for (var i = 0; i < data2019.length; i++) {
dataTongBi[i] = ((data2020[i] - data2019[i]) / data2019[i]) ? (((data2020[i] - data2019[i]) / data2019[i]) * 100).toFixed(2) : null;
}
// 计算环比数据
var dataHuanBi = [];
for (var i = 0; i < data2020.length; i++) {
if (i == 0) {
dataHuanBi[i] = (((data2020[i] - (data2019[data2019.length - 1])) / data2019[data2019.length - 1]) * 100).toFixed(2);
} else {
dataHuanBi[i] = (((data2020[i] - data2020[i - 1]) / data2020[i - 1]) * 100).toFixed(2);
}
}
// 配置图表选项
var option = {
legend: {
data: ['2022年', '2023年', '同比', '环比']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function (params) {
// console.log(params);
let str = params[0].name + '<br/>';
params.forEach(item => {
if (item.data !== null && item.data !== undefined) {
if (item.seriesName == "同比" || item.seriesName == "环比") {
str += item.marker + item.seriesName + ':' + item.data + '%' + '<br/>';
} else {
str += item.marker + item.seriesName + ':' + item.data + '<br/>';
}
}
});
return str;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '5%',
top: "20%",
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '年份',
interval: 50,
axisLabel: {
formatter: '{value} '
}
},
{
type: 'value',
name: '同比环比',
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '2022年',
type: 'bar',
data: data2019,
itemStyle: {
normal: {
color: '#ADC6FF', //改变折线点的颜色
lineStyle: {
color: '#ADC6FF' //改变折线颜色
}
}
},
},
{
name: '2023年',
type: 'bar',
data: data2020
},
{
name: '同比',
type: 'bar',
yAxisIndex: 1,
data: dataTongBi,
label: {
normal: {
formatter: function (parames) {
return parames.value + "%";
}
}
}
},
{
name: '环比',
type: 'bar',
yAxisIndex: 1,
data: dataHuanBi,
label: {
normal: {
formatter: function (parames) {
return parames.value + "%";
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);