vue2与vue3—引入echarts以及使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

引入方法二：组件中直接引入文章来源地址https://www.toymoban.com/news/detail-591468.html

<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>

到了这里，关于vue2与vue3—引入echarts以及使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！