使用echarts5.5.1,项目使用vue3
错误代码如下:
const ctx = document.getElementById("winChart");
// this.chart 原本data()里面定义了chart 以下为修改后代直接定义全局参数myChart
this.chart = echarts.init(ctx, null, {
width: window.innerWidth - 100,
height: window.innerHeight - 100
});
this.option = {
tooltip: {
trigger: 'axis',
show: true,
},
legend: {
data: ["胜率","综合得分","二连杀概率"]
},
calculable: true,
xAxis: [{
type: 'category',
boundaryGap: false,
data: this.rowTime,
}],
yAxis: [{
type: 'value'
}],
series: [
{
name:'胜率',
type:'line',
smooth:true,
areaStyle: {},
data:this.getData("successRate",this.dataArr,0)
},
{
name:'综合得分',
type:'line',
smooth:true,
areaStyle: {},
data:this.getData("suggestRate",this.dataArr,0)
},
{
name:'二连杀概率',
type:'line',
smooth:true,
areaStyle: {},
data:this.getData("doubleKillsRate",this.dataArr,0)
}
]
};
this.chart.setOption(this.option);
再data() 中定义参数chart 使用this.chart这种方式能正常显示图表,但是tooltip无法显示,正确的方式定义一个全局变量把this.chart替换成全局变量
import * as echarts from 'echarts';
let myChart = null;
正确代码
const ctx = document.getElementById("winChart");
myChart = echarts.init(ctx, null, {
width: window.innerWidth - 100,
height: window.innerHeight - 100
});
this.option = {
tooltip: {
trigger: 'axis',
show: true,
},
legend: {
data: ["胜率","综合得分","二连杀概率"]
},
calculable: true,
xAxis: [{
type: 'category',
boundaryGap: false,
data: this.rowTime,
}],
yAxis: [{
type: 'value'
}],
series: [
{
name:'胜率',
type:'line',
smooth:true,
areaStyle: {},
data:this.getData("successRate",this.dataArr,0)
},
{
name:'综合得分',
type:'line',
smooth:true,
areaStyle: {},
data:this.getData("suggestRate",this.dataArr,0)
},
{
name:'二连杀概率',
type:'line',
smooth:true,
areaStyle: {},
data:this.getData("doubleKillsRate",this.dataArr,0)
}
]
};
myChart.setOption(this.option);
后记:遇到这个问题,网上找了很多方法,main.js 里面添加代码window.wx = {} ,好多人说这样就解决了,我这个版本然并卵,使用上诉方法一下解决,洗洗睡。