安装echarts

npm install echarts --save    

vue2中的引入与使用

  main.js中 

import { createApp } from 'vue'
import * as echarts from 'echarts'   //主要代码
import App from './App.vue'
const app =  createApp(App)
app.mount('#app')

 vue组件中

<div id="myChart" :style="{ width: width, height: height }"></div><script>
export default defineComponent({mounted() {let myChart = this.$echarts.init(document.getElementById("myChart"));myChart.setOption({tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],},]});},
})
</script>

vue3中的引入与使用

引入方法一： 通过getCurrentInstance

main.js文件中：

import { createApp } from 'vue'
import * as echarts from 'echarts'   //主要代码
import App from './App.vue'
const app =  createApp(App)
app.config.globalProperties.$echarts = echarts      //主要代码
app.mount('#app')

vue组件中：

<div id="myChart" style="width: 200px; height:300px; "></div><script lang="ts" setup>
const echarts = getCurrentInstance()?.appContext.config.globalProperties.$echarts;function as() {const myChart = echarts.init(document.getElementById("myChart"));// 绘制图表myChart.setOption({tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],},],});
}
onMounted(() => {nextTick(() => {as();});
});
</script>

引入方法二： 组件中直接引入

<script lang="ts" setup>
import * as echarts from 'echarts'function as() {const myChart = echarts.init(document.getElementById("myChart"));  //主要语句myChart.setOption({tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],},],});
}onMounted(() =>{nextTick(() => {})
});</script>