vue3使用Echarts以及问题处理

安装 => https://echarts.apache.org/handbook/zh/basics/import

npm install echarts --save

引入

import * as echarts from 'echarts'

使用

<div id='chartbox'>
	<div
	   :id="chart"
	   style="width:100%;height:450px"
	 />
</div>

let myChart
let option = ref({})
let chart = ref("eChart" + Date.now() + Math.random()),//避免重新进来图表消失
//根据父元素chartbox的宽的自适应resize
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      myChart.resize()
    } 
  }
});
//初始化，进来的时候调一次
const echartinit = () => {
  myChart = echarts.init(document.getElementById(chart.value))
  resizeObserver.observe(document.getElementById('chartbox'));
}
//更新图表内容
const echartupdate = async () => {
	//更新option
	await axios().then(res=>{
		option.value=...
	})
	myChart.clear(); //清空上次加载的option数据，避免图表累加
	myChart.setOption(option.value)//渲染
}

• echarts中图例以及tooltip过多、x轴文本过长处理

• 路由切换再回来Echart图表消失问题=>指路
  

• 监听父元素chartbox的宽 自适应echarts的resize=>指路