CMS可视化项目 之 开发图表渲染经验分析

一、ECharts数据可视化

1.借助图形手段, 清晰传达信息的表现方式  

2.把枯燥的数字数据, 转换成图形, 数据特点更突出  

Echarts官网（第三方可视化图表库）：Apache ECharts  

echart.js下载地址：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

 

二、根据ECharts所有的图表制作固定为三个步骤：制作图表。

1.导包:

   2.HTML结构：一行代码 3.js初始化                    

 所有的图表使用步骤都是固定的，不同的图表仅仅只是配置项和数据不同而已

 

 三、根据制作好的图表，进行页面盒子渲染数据。  

 根据图标的数据，渲染页面：

 柱状图因为有8组，因此需要通过事件委托点击事件，点击“BUTTON”

1.先渲染好了默认的表格

2.注册委托事件 在option里面；判断是不是点击的buton

3.根据点击的”button“，获取点击的组号文本

4.根据组号重新生成数据

5.修改图标的样式，只需要修改option对象里面的数据与实际数据一致

6.重新渲染option

7.按钮排他

8. 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);