Vue3 使用ECharts

一、建立最新的Vue3工程

npm init vue@latest

二、安装ECharts

npm install echarts --save

三、在vue中引入echarts

本文为了更清晰的展示代码，已将vue工程中多余的代码清除。

1.使用provide方法，在App.vue中引入全局echarts

代码如下：

<template>
  <RouterView/>
</template>

<script setup lang="ts">
import {
    
    RouterView} from 'vue-router'

import * as echarts from 'echarts'
import {
    
    provide} from "vue";

provide('ec', echarts)
</script>

2.创建chart1页面，引用echarts，使用echarts官方代码建立柱状图

<template>
  <div id="myEcharts" style="width: 900px;height: 800px"></div>
</template>

<script setup>
import {
    
    inject, onMounted} from "vue";

let echarts = inject("ec");

onMounted(() => {
    
    
  //建立echarts对象，指定显示区域
  let chart = echarts.init(document.getElementById("myEcharts"))
  // 指定图表的配置项和数据
  let option = {
    
    
    title: {
    
    
      text: 'ECharts 入门示例'
    },
    tooltip: {
    
    },
    legend: {
    
    
      data: ['销量']
    },
    xAxis: {
    
    
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
    
    },
    series: [
      {
    
    
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  chart.setOption(option);
});
</script>

3.成果

*provide / inject 是vue中提供的一种父组件为子组件传值的方法