位置: IT常识 - 正文

web数据可视化（ECharts版）(web数据可视化(Echars版)实训)

发布时间：2024-01-16

web数据可视化（ECharts版）

推荐整理分享web数据可视化（ECharts版）(web数据可视化(Echars版)实训)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:web数据可视化(Echars版)第五章实训,web数据可视化(Echars版)第四章实训,web数据可视化(Echars版)实训,web数据可视化(Echars版)第六章实训,web数据可视化(Echars版)第四章实训,web数据可视化(Echars版)第六章,web数据可视化(Echars版)代码,web数据可视化(Echars版)代码,内容如对您有帮助，希望把文章链接给更多的朋友！

实训实训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">  <script src="js/echarts.js"></script></head><body>  <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">  <script src="js/echarts.js"></script></head><body>  <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> web数据可视化（ECharts版）(web数据可视化(Echars版)实训)

实训2会员数量相关分析 1．训练要点掌握折线图的绘制。 2．需求说明基于“会员信息表． xlsx ”数据绘制折线图，分析历年不同级别会员数量的变化趋势。

3．实现思路及步骤 (1）在 Eelipse 中创建折线图． html 文件。 (2）绘制折线图。首先，在折线图． html 文件中引人 echarts . js 库文件。其次，准备一个指定了大小的 div 容器，并使用 init 方法初始化容器。最后，设置折线图的配置项、“会员人会日”“会员级别”数据，完成折线图绘制。

实训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">  <script src="js/echarts.js"></script></head><body>  <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">  <script src="js/echarts.js"></script></head><body>  <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>