在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的值来动态更新图表了。使用组件封装的方式可以使代码更加模块化和可重用。