位置: IT常识 - 正文

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

编辑:rootadmin
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"> <!--引入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>web数据可视化(ECharts版)(web数据可视化(Echars版)实训)

 

 实训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>

 

本文链接地址:https://www.jiuchutong.com/zhishi/297840.html 转载请保留说明!

上一篇:集成学习之Stacking(堆栈)方法(stacking 集成)

下一篇:扒一扒抖音是如何做线程优化的(抖音是如何成功的)

  • 华为笔记本office怎么激活(华为笔记本office不激活有什么影响)

    华为笔记本office怎么激活(华为笔记本office不激活有什么影响)

  • 华为mate30听筒是实体听筒的吗

    华为mate30听筒是实体听筒的吗

  • 华为nova5为什么收到短信无提示(华为nova5为什么没有语音唤醒功能)

    华为nova5为什么收到短信无提示(华为nova5为什么没有语音唤醒功能)

  • vr对眼睛有没有伤害(vr对眼睛有没有害)

    vr对眼睛有没有伤害(vr对眼睛有没有害)

  • 为什么对方步数虚线(为什么对方步数一直是2956,不动了)

    为什么对方步数虚线(为什么对方步数一直是2956,不动了)

  • 微信运动会延迟多久(微信运动会延迟更新吗)

    微信运动会延迟多久(微信运动会延迟更新吗)

  • 红米note8可以息屏显示吗

    红米note8可以息屏显示吗

  • iphone录视频声音很小(iphone录视频声音很闷)

    iphone录视频声音很小(iphone录视频声音很闷)

  • 发现页管理是什么意思(发现页管理在哪)

    发现页管理是什么意思(发现页管理在哪)

  • 探探配对的聊天消失了(探探配对聊天要收费吗)

    探探配对的聊天消失了(探探配对聊天要收费吗)

  • 快手极速版无法提现怎么办(快手极速版无法注销 注销账号点不了)

    快手极速版无法提现怎么办(快手极速版无法注销 注销账号点不了)

  • 荣耀v20为什么停产(为什么荣耀v20那么便宜)

    荣耀v20为什么停产(为什么荣耀v20那么便宜)

  • 网络连接不可上网(网络连接不可上网怎么解决)

    网络连接不可上网(网络连接不可上网怎么解决)

  • 苹果8p电信卡识别不了(苹果8读不出电信卡)

    苹果8p电信卡识别不了(苹果8读不出电信卡)

  • 抖音会自动掉粉吗(抖音无缘无故就掉粉了)

    抖音会自动掉粉吗(抖音无缘无故就掉粉了)

  • 华为p30相机可放大多少倍(华为p30相机可以放大多少倍)

    华为p30相机可放大多少倍(华为p30相机可以放大多少倍)

  • 电脑小米同步是什么意思(小米笔记本的小米同步怎么打不开)

    电脑小米同步是什么意思(小米笔记本的小米同步怎么打不开)

  • 笔记本的sd卡插槽有什么用(笔记本的sd卡插上怎么没显示)

    笔记本的sd卡插槽有什么用(笔记本的sd卡插上怎么没显示)

  • 压缩文件的扩展名是什么(压缩文件的扩展名有哪些)

    压缩文件的扩展名是什么(压缩文件的扩展名有哪些)

  • qq特别关心怎么查看(qq特别关心怎么看关心我的人是谁)

    qq特别关心怎么查看(qq特别关心怎么看关心我的人是谁)

  • 华为手机怎么把焕彩桌面退出(华为手机怎么把数据导入苹果手机)

    华为手机怎么把焕彩桌面退出(华为手机怎么把数据导入苹果手机)

  • 有电话号码能定位吗(有电话号码定位器吗)

    有电话号码能定位吗(有电话号码定位器吗)

  • iwatch3和4差别大吗?(iwatch3和4哪个性价比高)

    iwatch3和4差别大吗?(iwatch3和4哪个性价比高)

  • ipados怎么分屏(ipad如何实现分屏)

    ipados怎么分屏(ipad如何实现分屏)

  • ppo手机微信铃声在哪里设置(phonering微信铃声)

    ppo手机微信铃声在哪里设置(phonering微信铃声)

  • 飞行模式在哪里(飞行模式在哪里设置)

    飞行模式在哪里(飞行模式在哪里设置)

  • 【uniappAPP实现支付宝授权登录】(uniapp支付流程)

    【uniappAPP实现支付宝授权登录】(uniapp支付流程)

  • 自有住房出租
  • 员工自己全额承担社保可以在个税申报吗
  • 进口增值税完税证明
  • 施工水电费扣除比例
  • 资产负债表所有者权益和利润表关系
  • 企业的培训费会计分录
  • 融资租赁手续费如何入账
  • 通行费发票勾选认证有多少就可以抵扣多少吗
  • 员工报销公司是哪个部门
  • 融资租赁固定资产会计处理
  • 国家高新补助款多久到账
  • 汇算清缴残保金填哪里
  • 企业借款给个人合法吗
  • 跨省的分公司亏损需要缴纳所得税吗?
  • 销售无形资产增值税纳税义务发生时间
  • 国际货运代理免税
  • 经营性租赁怎么做账
  • 税控盘第一次使用
  • etc发票抵扣进项
  • 公司购买物品流程
  • 怎么核对银行存款余额和对账单余额
  • 公司注销财务账需要保存几年
  • 哪些研发费用可以资本化
  • 购入土地使用权增值税税率
  • 企业亏损减资的会计处理
  • 材料成本差异率要算发出材料吗
  • 会员卡系统多少钱一套
  • 已经发货了点击确认收货可以吗?
  • 验资报告需要什么材料
  • 认购价和发行价的差价
  • 个人垫付汽车修理怎么办
  • 收到进项发票抵扣联怎么做分录
  • 网页老是自己跳出来
  • 进项税额加计抵减会计分录
  • 工业危废处理的前景
  • 长期股权投资引入新投资者账务处理
  • mplugin.exe是什么
  • 服装制造业现状和发展趋势
  • 购买加油卡能否抵扣
  • js正则表达式删除特定字符
  • 罗卡购物村
  • php数组内容替换
  • uni-swiper-dot
  • 公办学校的会计
  • 帝国cms和thinkphp哪个好
  • 进项税额已抵扣转出会计分录
  • 税票抵扣是多少个点
  • 开源 okr
  • 贴现模式怎么计算利息
  • 现金流量表存货增加额怎么算
  • 边际贡献总额什么意思
  • 横幅属于是什么税收大类?
  • 固定资产报废处置的请示
  • MySQL中create table as 与like的区别分析
  • 应交税费企业所得税科目
  • 按差额征税
  • 机械设备预付款比例
  • 上年度计提多了的奖金怎么办
  • 人力资源公司代发工资可以开专用发票吗
  • 应交个人所得税借方余额表示什么
  • 什么是活页式账户
  • mysql怎么切换到bin目录
  • win10周年版
  • 关闭windowsxp窗口的方法有
  • userexperience是什么意思
  • win7系统如何一键还原
  • win7小键盘怎么调出
  • window8设置ip
  • 体验Win8灵活分屏贴靠功能图文介绍
  • cocos2d动画
  • js判断手机浏览器设置了电脑版浏览
  • 最简单的游戏开发工具
  • 噩梦act2
  • js 根据时间排序
  • python爬虫工作内容
  • shell打开日志文件
  • python操作json数据
  • 基于javascript的毕业设计选题
  • 12366纳税服务平台人工时间
  • 财税公司经营范围介绍
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设