ECharts数据可视化项目-项目三 浙江新能源汽车服务平台.pptxVIP

;项目三 浙江新能源汽车服务平台 (纯属虚构);;项目背景;项目目标;数据说明;表3-1 浙江新能源汽车充电设施数据;项目分析; 1.需求分析;2.技术分析 项目开发采用当前最主流的前后端分离的方式、用Echarts技术完成图形展示。;开发环境; 1.选择开发环境 在Windows10操作系统上开发本项目。前端开发使用的工具为Vscode、后端开发使用的工具则为Pycharm。;后端开发;图3-1 Flask项目初始目录结构;图3-2 Flask项目目录结构;修改配置文件settings.py，代码如下：;清洗数据;清洗数据; 3.1 清洗数据;制作数据;?3.2 制作数据 ?? ???? 3.2.1 任务1阶梯图所需数据;? 3.2.2 任务2饼图所需数据 ;最后返回数据代码如下：; 3.2.3 任务3 带富文本的饼图所需数据;? 3.2.4 任务4桑基图所需数据 ;? 3.2.5 任务5单容器多图所需数据; 3.2.6任务6多列条形图所需数据;实现数据接口;? 3.3 实现数据接口 ;制作数据接口页面;图3-9 数据接口页面;解决跨域问题; 3.5 解决跨域问题 解决跨域问题的方法利用CORS。;;;项目三 浙江新能源汽车服务平台 (纯属虚构);;前端开发;制作可视化大屏布局;制作可视化大屏布局; 3.1 制作可视化大屏布局 准备好所有的目录和文件之后，在Vscode里形成的目录结构如图3-10所示。 ;图3-11 可视化大屏布局;? 3.1.1 完成HTML代码;接下来设置h1和h2标签完成标题。代码如下：; 该下拉框的内容被改变后，更换整个页面的主题风格。代码如下：;? 3.1.2 完成样式代码; 完成body和字体的样式设置，代码如下：;页面上面部分的头部样式设置。代码如下：;对panel容器设置样式。代码如下：;设置所有放置图形容器的样式。代码如下：;;;项目三 浙江新能源汽车服务平台 (纯属虚构);;展示图形;Echarts知识点 阶梯图、饼图、rich富文本、桑基图、多列条形图、单容器多图的配置和绘制；Echarts事件的编写；主题的使用。 ;任务所需Echarts知识点：阶梯图的绘制和配置、主题更换。; ;图3-13 阶梯图;图3-14 阶梯图在页面展示;以任务一为例完成主题风格更换，在index.html文件的body/body里增加函数“showdata”的代码如下：;图3-15 roma风格的阶梯图;任务所需Echarts知识点：饼图的绘制和配置、Echarts事件。; 饼图series配置项的配置代码如下：; 饼图的提示tooltip代码如下：;图3-17 饼图;任务所需Echarts知识点：富文本、饼图的绘制和配置、Echarts事件;带富文本的饼图提示tooltip的配置，代码如下：; 带富文本的饼图series配置项的配置代码如下：; 饼图里增加一个富文本的lable代码如下：;Echarts鼠标左键双击事件代码如下：;图3-18 带富文本的饼图;任务所需的Echarts知识点：桑基图的绘制和配置、Echarts事件。;图3-19 桑基图;任务所需的Echarts知识点：单容器多图的绘制和配置、Echarts事件。; 单容器多图y轴yAxis的配置代码如下：; 单容器多图series配置项的配置代码如下：;Echarts的legendselectchanged事件代码如下：;图3-20 单容器多图;任务所需Echarts知识点：多列条形图的绘制和配置。; ; ;x轴的配置xAxis代码如下：; yAxis: { type: category, data: data.name, axisLabel: { show: true, textStyle: { color: #fff } } },; series: [{ name: 总共, type: bar, data: data.value1 }, { name: 公用, t