搭建Vite环境
首先，我们使用命令：
yarn create vite echarts-test创建空白的vite项目：
这里有很多个选项，我们不需要额外的Javascript框架，所以选择第一个选项Vanilla，原生Javascript。接下还有一个选项，选择Typescript或者Javascript，我们选择Typescript。
这里项目就被创建成功了。
这里提示我们可以cd echarts-test进入该项目，我们无视他，因为，我们一般不会用命令行开发，都是用IDE开发。
我们用VSCode打开，刚刚新建的项目：
使用：
yarn install安装项目的依赖。安装完成用
yarn run dev启动Vite的服务：
在浏览器输入：localhost:5173就可以看到自动生成的项目的页面了。
导入Echarts
使用：
yarn add echarts安装echarts。
安装完成后，修改main.ts文件：
import './style.css'
import * as echarts from 'echarts';
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div>
<div id="main" ></div>
</div>
`
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '衣服销量'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '内裤']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 100]
}
]
});
最后的显示效果：
