在echarts官网完成绘制后,将配置复制到本地,结果tooltip无法显示。
项目使用vue3,echarts5.0,代码写的是vue2。
option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {data: ['完工数量', '完成率']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '数量',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '完成率',min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: '完工数量',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},barWidth: '40%', // 修改柱子宽度// 或者使用 barCategoryGap 设置类目间柱子的间距(例如:'20%')// barCategoryGap: '20%'itemStyle: {color: '#1890ff' // 设置柱子颜色为淡蓝色},label: {show: true, // 显示数据标签position: 'top' // 数据标签显示在柱子顶部},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: '完成率',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' °C';}},itemStyle: {color: '#faad14' // 设置柱子颜色为淡蓝色},label: {show: true, // 显示数据标签position: 'top' // 数据标签显示在柱子顶部},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]
};
排查了半天问题,发现这部分代码不正确。
this.myChart1 = echarts.init(this.$refs.topL);this.option1 && this.myChart1.setOption(this.option1);this.myChart2 = echarts.init(this.$refs.topR);this.option2 && this.myChart2.setOption(this.option2);let myChart3 = echarts.init(this.$refs.bottom);this.option3 && myChart3.setOption(this.option3);
如果将myChart定义在了data()里面,那么tooltip就会不显示。
需要通过let来定义,就可以显示了。