前端 【Echarts】在html中引入echarts详细步骤教程【源码】

vue3中引入echatrs详细步骤

：

【Echarts】在vue3中使用echarts绘散点图（待更新）_Morning_xx的博客-CSDN博客

vue3组件中单独引入echarts详细步骤：

【vue3】组件中使用引入echarts方法-CSDN博客

1、进入echarts官网

Apache ECharts

点击【下载】

2、滑到最下面、点击【在线定制】

3、选择要打包的图表后，点击【下载】生成echarts.min.js文件

4、将下载后的echarts.min.js放到同级目录里面，引入html

5、到官网找一个案例，我找了一个散点图案例，下面是HTML源码

生成效果：

6.Echarts-基础配置

以下配置很重要：series xAxis yAxis grid tooltip title legend color

series

系列列表，每个系列通过 type 决定自己的图表类型

图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

如有帮助请不要吝啬你的赞哦~~~~！

推荐文章