前言
本文主要介绍了:echarts图表是怎么在vue中展示的
步骤
step1: 首先,创建一个vue项目
vue create 项目名称
- 进入工程文件并运行:
step2:删除不需要的文件
创建的vue项目默认是vue官方提供的一个组件,我们在components文件夹中将2个.vue文件删除,并且在main.js文件中将对这2个.vue文件的引用代码删除
step3:下载echarts
- 下载:
npm install --save echarts
step4:使用echarts绘制图表
在App.vue文件中对echarts进行使用,主要分为2部分:包括为图表提供一个盒子,以及为图表初始化echarts实例并进行相关的配置
App.vue完整代码:
<template>
<div>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div ref="chart" style="width: 100%;height:400px"></div>
</div>
</template>
<script setup>
import {
ref ,reactive,onMounted} from 'vue'
import * as echarts from 'echarts';
const chart = ref();
let option = reactive({
tooltip: {
},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [
{
name: '销量',
smooth: true,
type: 'bar',
data: [100,200,232,344,200,100]
}
]
});
onMounted(() => {
let myChart = echarts.init(chart.value);
myChart.setOption(option);
})
</script>
step5:运行vue项目文件
- 在终端输入运行命令:
npm run serve
- 结果: