vue3 echarts resize 报错
参考:https://github.com/apache/echarts/issues/13943
<div id="card" ref="chartDom" :style="chartStyle"></div>
import { shallowRef } from 'vue'; import * as echarts from 'echarts'; import _ from 'lodash'; import { addListener, removeListener } from "resize-detector"; data(){ return{ myChart: null, chartOption: { grid:{ x:200 }, title: { text: '折线图展示', left:150, }, tooltip: { trigger: 'axis', formatter: function (params){ var showHtm=""; var sum = 0; var average = 0 for(var i=0;i<params.length;i++){ var name = params[i].seriesName; //值 var value = params[i].value; //平均值 sum += params[i].value; showHtm+= name + ' 温度:' + value+'<br>' } average = sum/params.length; return showHtm+'平均值:'+average+'均匀度:12'; } }, legend: { orient:"vertical", // data:['01','02','03'], left:10, selector: ['all', 'inverse'] }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [ { name:'温度', type: 'value', axisLabel: { formatter: '{value} °C' } }, { name:'ct值', type:'value', } ], series: [ { name: '通道1', type: 'line', data: [10, 11, 13, 11, 12, 12, 9] }, { name: '通道2', type: 'line', data: [1, 3, 5, 2, 3, 5, 0] }, { name: '通道3', type: 'line', data: [1, 2, 5, 3, 5, 2, 0] }, { name: '通道4', type: 'line', data: [1, 3, 4, 4, 7, 2, 0] }, { name: '通道5', type: 'bar', yAxisIndex: 1, data: [1, 3, 4, 4, 7, 2, 0] }, ] }, chartStyle: { width: '100%', height: '65%' } } },
mounted(){ this.renderChart(); }, methods: { renderChart() { this.myChart = shallowRef(echarts.init(this.$refs.chartDom)); addListener(this.$refs.chartDom, _.debounce(this.resize, 300)); this.myChart.setOption(this.chartOption); }, resize() { this.myChart.resize(); }, disposeChart() { if(!this.myChart) return; this.myChart.dispose(); this.myChart = null; } }, beforeUnmount() { removeListener(this.$refs.chartDom, this.resize); }, unmounted() { this.disposeChart(); }
记录自己的采坑之路,需要时方便查找
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步