vue2与vue3—引入echarts以及使用

安装echarts

npm install echarts --save    

vue2中的引入与使用

  main.js中 

import Vue from "vue";
import App from "./App.vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

 vue组件中

<div id="myChart" style="width: 500px;height: 500px"></div>
 
<script>
export default{
  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>