在Vue3中使用Echarts的示例 两种方法

在Vue 3中使用ECharts可以通过两种主要方法实现:全局安装和组件封装。下面我将分别

介绍这两种方法的具体实现步骤。

方法1:全局安装

1.安装ECharts

在你的Vue项目中，首先需要安装ECharts。打开终端，运行以下命令:

Bash

copy code

npm install echarts --save

2.在Vue组件中使用ECharts

在你的Vue组件中，首先需要引入ECharts，然后使用它来初始化图表。

<template>

  <div ref="chart" style="width: 600px; height: 400px;"></div>

</template>

<script setup>

import { onMounted, ref } from 'vue';

import * as echarts from 'echarts';

const chartRef = ref(null);

onMounted(() => {

  const chart = echarts.init(chartRef.value);

  const option = {

    title: {

      text: 'ECharts 示例'

    },

    tooltip: {},

    xAxis: {

      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

    },

    yAxis: {},

    series: [{

      name: '销量',

      type: 'bar',

      data: [5, 20, 36, 10, 10, 20]

    }]

  };

  chart.setOption(option);

});

</script>

方法2:组件封装

1.

创建ECharts组件

创建一个新的Vue组件，用于封装ECharts图表的初始化。

<!-- EChartsComponent.vue -->

<template>

  <div ref="chartRef" :style="{ width: width, height: height }"></div>

</template>

<script setup>

import { onMounted, ref, defineProps } from 'vue';

import * as echarts from 'echarts';

const props = defineProps({

  width: { type: String, default: '100%' },

  height: { type: String, default: '400px' },

  options: { type: Object, default: () => ({}) }

});

const chartRef = ref(null);

let chartInstance = null;

onMounted(() => {

  chartInstance = echarts.init(chartRef.value);

  chartInstance.setOption(props.options);

});

</script>

2.在父组件中使用ECharts组件

在你的父组件中，使用这个封装好的ECharts组件。

<template>

  <EChartsComponent :options="chartOptions" width="600px" height="400px" />

</template>

<script setup>

import EChartsComponent from './EChartsComponent.vue'; // 确保路径正确

import { ref } from 'vue';

// 图表配置项，可以动态修改这部分来改变图表展示内容。

const chartOptions = ref({

  title: { text: 'ECharts 示例' },

  tooltip: {},

  xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] },

  yAxis: {},

  series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]

});

</script>

这样，你就可以通过更改chartOptions的值来动态更新图表了。使用组件封装的方式可以使代码更加模块化和可重用。