1.1、引入图表
这一步仅仅引入图表,并不做与后端数据的交互
步骤一:打开echarts官网 Examples - Apache ECharts
![](https://img-blog.csdnimg.cn/img_convert/b0fb30a2980aeac34419957bedeff027.png)
步骤二:通过bootcdn( echarts (v5.4.1) - ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务)引入echarts
![](https://img-blog.csdnimg.cn/img_convert/59708d6376ed5d8cc938a34a5e068ede.png)
步骤三:放入对应的html文件中
![](https://img-blog.csdnimg.cn/img_convert/6c9718e61cc124ef94a98c17db1f3f30.png)
步骤四:复制代码编辑的基本样式到<Script>中
![](https://img-blog.csdnimg.cn/img_convert/3ffd7b556861eb496781f6282b1d778d.png)
![](https://img-blog.csdnimg.cn/img_convert/44bd4432c54bcde3c14dd9e162f4ea79.png)
步骤五:在html的body中加入容器
![](https://img-blog.csdnimg.cn/img_convert/0cada49084a31f8a3132d145ed3d5530.png)
步骤六:加入初始化的参数
![](https://img-blog.csdnimg.cn/img_convert/fc197559e5d02332c0434f323ec0cf89.png)
![](https://img-blog.csdnimg.cn/img_convert/2c185f60618d812e3903f810560e6563.png)
最终效果
![](https://img-blog.csdnimg.cn/img_convert/3643c69b94a0ab3e5b4e7ce1c1b9e886.png)
1.2、图表与后端的交互
连载更新,晚一些再写