我们常常在项目中使用图表来表示数据,而目前最常用的图标就是echarts,接下来我们就开始学习在vue中使用echarts图标。
一、准备一个vue项目(一般通过vite来构建,而不是vue-cli)
1.找到打开vite官网
2. 运行创建命令
yarn create vite
3. 执行yarn install安装项目依赖,之后执行行yarn dev运行项目
二、添加echarts依赖
1. 搜索echarts官网
2. 添加依赖
yarn add echarts
三、写一个在vue中使用echarts的基本案例
<template><div id="main"></div>
</template><script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
onMounted(()=>{var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};option && myChart.setOption(option);
});</script><style scoped>
#main {width: 50vw;height: 50vh;
}
</style>
目前还存在一些问题:获取DOM节点、通常请求数据是异步的,下一篇重点讲解