vue3+JS引入echarts

1. 首先安装echarts

npm install echarts --save

2. 可以直接在组件中引入也可以在main.js中引入,我就在组件中引入啦

<template>
<div id="main" style="width:500px;height:500px;"></div>
</template>
<script>
import { reactive,onMounted } from 'vue'
import * as echarts from 'echarts'
export default {
setup(){
	const data = reactive({option:null})
	onMounted(()=>{
		const myChart = echarts.init(document.getElementById('main'))
		 // 绘制图表
      data.option = {
  			title: {
		    text: 'ECharts 入门示例'
		  },
  			tooltip: {},
		  xAxis: {
		    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		  },
		  yAxis: {},
		  series: [
		    {
		      name: '销量',
		      type: 'bar',
		      data: [5, 20, 36, 10, 10, 20]
		    }
		  ]
		}
		myChart.setOption(data.option)
		// 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        myChart.resize()
      })
	})
	return{
	
		}
	}
}
</script>

这样，就会在页面中显示了，千万别忘记，html结构中设置宽和高哈~