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中提供的一种父组件为子组件传值的方法