在Vite中使用Echarts

搭建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" style="width: 600px;height:400px;"></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]
    }
  ]
});

最后的显示效果：