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>

web数据可视化（ECharts版）相关推荐

数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化第二版-拓展-和鲸网约车分析一等奖作品
文章目录数据可视化第二版-拓展-网约车分析案例竞赛介绍 1等奖作品-IT从业者张某某的作品结论过程数据和思考数据处理数据探索数据分析方法选择数据分析相关性分析转化率分析分析结论 ...
中国举办的世界园艺博览会概览-web数据可视化(d3.js path)
1.先看效果. 哔哩哔哩在线解读演示: 中国举办的世界园艺博览会概览-web数据可视化-000006_哔哩哔哩_bilibili 中国举办的世界园艺博览会概览-web数据可视化-000006 截图: ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
数据可视化第二版-03部分-07章-局部与整体
文章目录数据可视化第二版-03部分-07章-局部与整体总结可视化视角-局部与整体代码实现韦恩图 venn3 venn2 饼图环形图旭日图园堆积图矩形树图漏斗图基于matplot' ...
中国近三年上市公司信息统计(主板、创业板、科创板)-web数据可视化(d3.brush-时间选择器)
1.先看效果. 哔哩哔哩在线解读演示: 中国近三年上市公司信息统计(主板.创业板.科创板)-web数据可视化(时间选择器)-000009_哔哩哔哩_bilibili 中国近三年上市公司信息统计(主板. ...
Canvas与web数据可视化
什么是Canvas Canvas是HTML5新增的一个元素,该元素用于2d图像的绘制,Canvas元素本身并没有绘图的能力,它需要结合javascript使用官方提供的API进行绘制图形. Canva ...
数据可视化——echarts
目录一.可视化面板介绍二.可视化库介绍三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...

web数据可视化（ECharts版）

web数据可视化（ECharts版）相关推荐

最新文章

热门文章