《ECharts数据可视化项目实践09浙江前端讲义教学课件.pptx》由会员分享，可在线阅读，更多相关《ECharts数据可视化项目实践09浙江前端讲义教学课件.pptx（74页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、ECharts数据可视化项目实践09浙江前端讲义E C h a r t s 数 据 可 视 化 项 目 实 践邵辉可视化项目三浙江新能源汽车服务平台(纯属虚构)项目目录数据说明项目分析开发环境项目目标项目背景后端开发前端开发项目总结对接岗位数据可视化展示图形数据可视化EchartsEcharts知识点知识点 阶梯图、饼图、rich富文本、桑基图、多列条形图、单容器多图的配置和绘制；Echarts事件的编写；主题的使用。3.2 展示图形展示图形数据可视化数据可视化数据可视化数据可视化任务所需Echarts知识点：阶梯图的绘制和配置、主题更换。3.2.1 3.2.1 任务1 1 阶梯图展示数据可视
2、化数据可视化数据可视化数据可视化 数据可视化数据可视化数据可视化数据可视化图3-13 阶梯图阶梯图最后呈现的结果如图3-13所示。数据可视化图3-14 阶梯图在页面展示阶梯图出现在页面的结果则如图3-14所示。数据可视化以任务一为例完成主题风格更换，在index.html文件的里增加函数“showdata”的代码如下：数据可视化数据可视化图3-15 roma风格的阶梯图当主题是roma的时候，阶梯图如图3-15所示；当主题是wonderland的时候，阶梯图如图3-16所示。图3-16 wonderland风格的阶梯图数据可视化任务所需Echarts知识点：饼图的绘制和配置、Echarts事件
3、。3.2.2 3.2.2 任务2 2 饼图展示数据可视化数据可视化数据可视化数据可视化 饼图series配置项的配置代码如下：数据可视化 饼图的提示tooltip代码如下：数据可视化数据可视化图3-17 饼图饼图最后呈现的结果如图3-17所示。数据可视化任务所需Echarts知识点：富文本、饼图的绘制和配置、Echarts事件 3.2.3 3.2.3 任务3 3带富文本的饼图展示数据可视化数据可视化数据可视化带富文本的饼图提示tooltip的配置，代码如下：数据可视化 带富文本的饼图series配置项的配置代码如下：数据可视化 饼图里增加一个富文本的lable代码如下：数据可视化数据可视化Ec
4、harts鼠标左键双击事件代码如下：数据可视化图3-18 带富文本的饼图带富文本的饼图最后呈现的结果如图3-18所示。数据可视化任务所需的Echarts知识点：桑基图的绘制和配置、Echarts事件。3.2.4 3.2.4 任务4 4桑基图展示数据可视化数据可视化数据可视化数据可视化数据可视化图3-19 桑基图桑基图最后呈现的结果如图3-19所示。数据可视化任务所需的Echarts知识点：单容器多图的绘制和配置、Echarts事件。3.2.5 任务5 5 当容器多图展示数据可视化数据可视化数据可视化数据可视化数据可视化 单容器多图y轴yAxis的配置代码如下：数据可视化 单容器多图series
5、配置项的配置代码如下：数据可视化Echarts的legendselectchanged事件代码如下：数据可视化图3-20 单容器多图 单容器多图最后呈现的结果如图3-20所示。数据可视化任务所需Echarts知识点：多列条形图的绘制和配置。3.2.6 3.2.6 任务6 6多列条形图展示数据可视化数据可视化 数据可视化 数据可视化x轴的配置xAxis代码如下：数据可视化 yAxis:type:category,data:data.name,axisLabel:show:true,textStyle:color:#fff ,多列条形图y轴的配置yAxis代码如下：数据可视化 series:nam
6、e:总共总共,type:bar,data:data.value1 ,name:公用公用,type:bar,data:data.value2 ,name:专用专用,type:bar,data:data.value3 series的配置代码如下：数据可视化图3-21 多列条形图 多列条形图最后呈现的结果如图3-21所示。项目总结捌数据可视化完成可视化大屏项目重难点数据可视化完成可视化大屏数据可视化 1.完成可视化大屏完成可视化大屏图3-22 可视化大屏初始页面数据可视化图3-23 roma主题风格可视化大屏roma主题风格如图3-23所示。数据可视化图3-24 westeros主题风格可视化大屏westeros主题风格如图3-24所示。数据可视化项目重难点数据可视化 2.项目重难点项目重难点对接岗位玖数据可视化对接岗位数据可视化 【对接岗位】【对接岗位】表3-3 大数据可视化开发工程师岗位要求感谢您的观看可化视