ECharts大屏数据可视化展示

1. 可视化适配方案

设计稿是1920px

1. 手动修改 flexible.js 文件，将屏幕划分为24等份
   
2. 将 cssrem 插件的基准值设置为 80 px

插件 > 配置按钮 > 配置拓展设置 > Root Font Size 里面设置。

2. 注意事项

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

注意必须要有高度和宽度。

3. Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color 。

• series

  • 系列列表。每个系列通过 type 决定自己的图表类型
  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

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

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

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

• grid：直角坐标系内绘图网格。 网格配置，可以控制图表大小

• title：标题组件

• tooltip：提示框组件

• legend：图例组件（series 里面有了 name 值则 legend 里面的 data 可以删掉）

• color：调色盘颜色列表

• toolbox：工具箱组件，可以另存为图片等功能

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