echarts数据可视化 html模板（web数据可视化（ECharts版））
实训
实训1会员基本信息及消费能力对比分析
1．训练要点(1）掌握堆积柱状图的绘制 。(2）掌握标准条形图的绘制 。
(3）掌握瀑布图的绘制 。
2．需求说明
“会员信息表． xlsx ”文件记录了某鲜花店销售系统上的会员信息 ，具体包括会员编号 、姓名 、性别 、年龄 、年龄段 、城市 、人会方式 、会员级别 、会员人会日 、 VIP 建立日 、购买总金额 、购买总次数信息 。绘制堆积柱状图分析会员年龄分布 ，绘制标准条形图分析会员人会渠道 ，绘制瀑布图分析不同城市会员消费总金额分布 。
3．实现思路及步骤
(1）在 Eclipse 中依次创建3个． html 文件 ，分别为堆积柱状图． html 、标准条形图． html 和瀑布图． html 。
(2）绘制堆积柱状图 。首先 ，在堆积柱状图． html 文件中引人 echarts . js 库文件 。其次 ，准备一个指定了大小的 div 容器 ，并使用init0方法初始化容器 。最后 ，设置堆积柱状图的配置项 、“性别 ”“人会方式 ”数据 ，完成堆积柱状图绘制 。
(3）绘制标准条形图 。首先 ，在标准条形图． html 文件中引人 echarts . js 库文件 。其次 ，准备一个指定了大小的 div 容器 ，并使用 init 方法初始化容器 。最后 ，设置标准条形图的配置项 、“性别 ”“年龄段 ”数据 ，完成标准条形图绘制 。
(4）绘制瀑布图 。首先 ，在瀑布图． html 文件中引人 echarts js 库文件 。其次 ，准备一个指定了大小的 div 容器 ，并使用init0方法初始化容器 。最后 ，设置瀑布图的配置项 、“城市 ”“购买总金额 ”数据 ，完成瀑布图绘制 。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/echarts.js"></script> </head> <body> <!---为ECharts准备一个具备大小（宽高）的DOM--> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> //基于准备好的DOM ，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { title: { text: 会员年龄段分布情况, subtext: , }, tooltip: { trigger: axis, axisPointer: { //设置坐标轴指示器 ，坐标轴触发有效 type: shadow //设置坐标轴默认为直线 ，可选为:line|shadow } }, legend: { data: [男, 女] }, toolbox: { show: true, orient: vertical, x: right, y: center, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: [line, bar, stack, tiled] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: [ { type: category, data: [20～29岁, 30～39岁, 40～49岁] } ], yAxis: [ { type: value } ], series: [ { name: 男, type: bar, stack: 年龄段, //设置堆积效果 data: [4, 0, 1] }, { name: 女, type: bar, stack: 年龄段, //设置堆积效果 data: [6, 3, 0], markLine: { itemStyle: { normal: { lineStyle: { type: dashed } } }, } }, ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/echarts.js"></script> </head> <body> <!---为ECharts准备一个具备大小（宽高）的DOM--> <div id="main" style="width: 800px; height: 400px"></div> <script type="text/javascript"> //基于准备好的DOM ，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { title: { text: 会员入会渠道分布情况, subtext: , }, tooltip: { trigger: axis, }, legend: { data: [男, 女], }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: [line, bar] }, restore: { show: true }, saveAsImage: { show: true }, }, }, calculable: true, xAxis: [ { type: value, //设置柱状图 boundaryGap: [0, 0.01], }, ], yAxis: [ { type: category, data: [自愿, 微信推广, 团购促销, 节日活动], }, ], series: [ { name: 男, type: bar, data: [2, 0, 1, 2], }, { name: 女, type: bar, data: [3, 2, 2, 2], }, ], }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/echarts.js"></script> </head> <body> <!---为ECharts准备一个具备大小（宽高）的DOM--> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> //基于准备好的DOM ，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { title: { text: 不同城市消费总金额（单位:元）, subtext: , }, tooltip: { trigger: axis, axisPointer: { //设置坐标轴指示器 ，坐标轴触发有效 type: shadow //默认为直线 ，可选为：line | shadow }, formatter: function (params) { var tar = params[0]; return tar.name + <br/> + tar.seriesName + : + tar.value; } }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [ { type: category, splitLine: { show: false }, data: [广州, 佛山, 深圳, 东莞 ] } ], yAxis: [ { type: value } ], series: [ { name: 辅助, type: bar, stack: 总量, itemStyle: { normal: { //设置正常情况下柱子的样式 //barBorderColor: rgba(0,0,0,0), //设置柱子边框的颜色 barBorderColor:rgba(20,20,0,0.5), barBorderWidth: 5, //设置柱子边框的宽度 //color: rgba(0,0,0,0) //设置柱子的颜色 color:rgba(0,220,0,0.8) }, emphasis: { //设置鼠标滑过时柱子的样式 barBorderColor: rgba(0,0,0,0), //设置鼠标滑动到柱子边框的颜色 barBorderWidth: 25, //设置鼠标滑动到柱子边框的宽度 color: rgba(0,0,0,0) //设置鼠标滑动到柱子的颜色 } }, data: [0, 801, 1094, 635] }, { name: 生活费, type: bar, //设置柱状图 stack: 总量, //设置堆积 itemStyle: { normal: { label: { show: true, position: inside } } }, data: [3076, 2275, 1181, 546] } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html>实训2会员数量相关分析
1．训练要点
掌握折线图的绘制 。
2．需求说明
基于“会员信息表． xlsx ”数据绘制折线图 ，分析历年不同级别会员数量的变化趋势 。3．实现思路及步骤
(1）在 Eelipse 中创建折线图． html 文件 。
(2）绘制折线图 。首先 ，在折线图． html 文件中引人 echarts . js 库文件 。其次 ，准备一个指定了大小的 div 容器 ，并使用 init 方法初始化容器 。最后 ，设置折线图的配置项 、“会员人会日 ”“会员级别 ”数据 ，完成折线图绘制 。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/echarts.js"></script> </head> <body> <!---为ECharts准备一个具备大小（宽高）的DOM--> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> //基于准备好的DOM ，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { backgroundColor: #eee, title: { //配置标题组件 text: "历年不同级别会员数量变化趋势", //设置主标题 textStyle: { //设置主标题文字样式 color: red, }, x: center }, tooltip: { //配置提示框组件 trigger: axis }, legend: { data: [普通会员, VIP会员], left: right }, xAxis: [ //配置X轴坐标轴 { type: category, data: [2016年, 2017年, 2018年] } ], yAxis: [ //配置Y轴坐标轴 { type: value } ], series: [ //配置数据系列 { name: 普通会员, type: line, //设置指定显示为折线 data: [7, 0, 0], smooth: true }, { name: VIP会员, type: line, //设置指定显示为折线 data: [0, 3, 4], smooth: true }, ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html>实训3会员来源结构分析
1．训练要点
(1）掌握饼图的绘制 。(2）掌握圆环图的绘制 。2.需求说明基于“会员信息表 xlsx ”数据绘制饼图和圆环图 ，分析会员人会渠道分布 。
3．实现思路及步骤
(1）在 Eelipse 中创建饼图． html 和圆环图． html 文件 。(2）绘制饼图 。首先 ，在饼图． html 文件中引人 echarts . js 库文件 。其次 ，准备一个指定了大小的 div 容器 ，并使用init0方法初始化容器 。最后 ，设置饼图的配置项和“人会方式 ”数据 ，完成饼图绘制 。
(3）绘制圆环图 。首先 ，在圆环图． html 文件中引入 echarts . js 库文件 。其次 ，准备一个
指定了大小的 div 容器 ，并使用init0方法初始化容器 。最后 ，设置圆环图的配置项和“会方式 ”数据 ，完成圆环图绘制 。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/echarts.js"></script> </head> <body> <!---为ECharts准备一个具备大小（宽高）的DOM--> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> //基于准备好的DOM ，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { title: { //配置标题组件 text: 会员入会渠道分布情况, //设置主标题 subtext: , //设置次标题 left: center //设置主次标题都左右居中 }, tooltip: { //配置提示框组件 trigger: item, formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //配置图例组件 orient: vertical, //设置垂直排列 left: 62, //设置图例左边距 top: 22, //设置图例顶边距 data: [自愿, 微信推广, 团购促销, 节日活动] }, toolbox: { //配置工具箱组件 show: true, //设置工具箱组件是否显示 left: 444, //设置工具箱左边距 top: 28, //设置工具箱顶边距 feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: [pie, funnel], option: { funnel: { x: 25%, width: 50%, funnelAlign: left, max: 1548 } } }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, series: [ //配置数据系列组件 { name: 入会方式, type: pie, radius : 66%, //设置半径 //radius: [45%, 75%], center: [58%, 55%], //设置圆心 clockWise: true, data: [ //设置数据的具体值 { value: 5, name: 自愿 }, { value: 2, name: 微信推广 }, { value: 3, name: 团购促销 }, { value: 4, name: 节日活动 } ] } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/echarts.js"></script> </head> <body> <!---为ECharts准备一个具备大小（宽高）的DOM--> <div id="main" style="width: 900px; height: 600px"></div> <script type="text/javascript"> //基于准备好的DOM ，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { title: { //配置标题组件 backgroundColor: yellow, //设置主标题的背景颜色 text: 会员入会渠道分布情况, //设置主标题的文字 textStyle: { //设置主标题文字样式 color: green, //设置主标题文字的颜色 fontFamily: 黑体, //设置主标题文字的字体 fontSize: 28 //设置主标题文字的大小 }, x: center //设置主标题左右居中 }, tooltip: { //配置提示框组件 trigger: item, //设置提示框的触发方式 formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //配置图例组件 orient: vertical, //设置图例垂直方向 x: 32, //设置图例的水平方向 y: 74, //设置图例的垂直方向 data: [自愿, 微信推广, 团购促销, 节日活动] }, toolbox: { //配置工具箱组件 show: true, //设置工具箱是否显示 x: 555, //设置工具箱的水平位置 y: 74, //设置工具箱的垂直位置 feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: [pie, funnel] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: false, series: [ { name: 入会方式, type: pie, selectedMode: single, radius: [40%, 55%], data: [ { value: 5, name: 自愿 }, { value: 2, name: 微信推广 }, { value: 3, name: 团购促销 }, { value: 4, name: 节日活动 } ] } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！