位置: 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 集成)

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

  • 一个超级好用的贴吧推广方法(有哪些好用的)

    一个超级好用的贴吧推广方法(有哪些好用的)

  • 华为免打扰设置在哪(华为免打扰设置例外)

    华为免打扰设置在哪(华为免打扰设置例外)

  • 苹果ipad的截屏功能在哪里(苹果ipad截屏怎么操作)

    苹果ipad的截屏功能在哪里(苹果ipad截屏怎么操作)

  • p40pro的微信视频可以打开美颜吗(p40pro微信视频丑)

    p40pro的微信视频可以打开美颜吗(p40pro微信视频丑)

  • vivo手机的wifi二维码在哪里(vivowifi在哪里)

    vivo手机的wifi二维码在哪里(vivowifi在哪里)

  • 华为p40pro充电慢怎么回事(华为mate50耗电快吗)

    华为p40pro充电慢怎么回事(华为mate50耗电快吗)

  • 1+8手机什么时候出(1+8手机什么时候上市)

    1+8手机什么时候出(1+8手机什么时候上市)

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

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

  • iphone11无法安装第三方app(iPhone11无法安装王者荣耀)

    iphone11无法安装第三方app(iPhone11无法安装王者荣耀)

  • 电脑文件损坏无法开机怎么办(电脑文件损坏无法启动怎么办)

    电脑文件损坏无法开机怎么办(电脑文件损坏无法启动怎么办)

  • 小米mix2s快充怎么开启(小米mix2快速充电)

    小米mix2s快充怎么开启(小米mix2快速充电)

  • 双11红包退货后退还吗(双11红包退货后还有吗)

    双11红包退货后退还吗(双11红包退货后还有吗)

  • 抖音年龄计算器是在哪里查的(抖音年龄计算器准吗)

    抖音年龄计算器是在哪里查的(抖音年龄计算器准吗)

  • 手机只能打出不能打进是怎么回事(手机只能打出不能打进)

    手机只能打出不能打进是怎么回事(手机只能打出不能打进)

  • 为啥抖音直播是黑屏(为啥抖音直播是开的,别人看不到)

    为啥抖音直播是黑屏(为啥抖音直播是开的,别人看不到)

  • iqoopro5g啥时候上市(vivo iqoo pro 5g什么时候上市的)

    iqoopro5g啥时候上市(vivo iqoo pro 5g什么时候上市的)

  • 趣键盘怎么突然用不了了(趣键盘app)

    趣键盘怎么突然用不了了(趣键盘app)

  • 怎么把几个瞬间拍成视频(怎么把多个片段弄成一个视频)

    怎么把几个瞬间拍成视频(怎么把多个片段弄成一个视频)

  • 美团怎么申请返现(美团怎么申请返现酒店)

    美团怎么申请返现(美团怎么申请返现酒店)

  • iphone6连不上wifi是怎么回事(iphone6连不上wifi是什么坏了)

    iphone6连不上wifi是怎么回事(iphone6连不上wifi是什么坏了)

  • vivo手机怎么把时间放在桌面上(vivo手机怎么把通讯录移到卡里)

    vivo手机怎么把时间放在桌面上(vivo手机怎么把通讯录移到卡里)

  • 华为nova5pro耳机孔在哪里(华为nova5pro耳机插上没有反应)

    华为nova5pro耳机孔在哪里(华为nova5pro耳机插上没有反应)

  • 拍照片怎么显示时间和地点(拍照片怎么显示时间)

    拍照片怎么显示时间和地点(拍照片怎么显示时间)

  • 小米手环4怎么听音乐(小米手环4怎么连接)

    小米手环4怎么听音乐(小米手环4怎么连接)

  • cad捕捉设置快捷键(cad2012捕捉设置快捷键)

    cad捕捉设置快捷键(cad2012捕捉设置快捷键)

  • 申报纳税的意思
  • 三个案例看清增值税即征即退?
  • 公司章程在工商局
  • 普通发票附注一般填什么
  • 金税盘减免政策依据
  • 安装服务费发票需要备注地址吗
  • 城市维护建设税减免税优惠政策
  • 退休人员额外收入的税收标准
  • 企业收到银行收款通知
  • 施工企业项目管理办法
  • 买一送一的增值税如何计算例题
  • 经营性固定资产计入什么科目
  • 建筑企业跨地区
  • 混合销售如何做会计分录
  • 暂估收入会计处理
  • 建筑企业对员工管理制度
  • 营改增后土地使用税计入什么科目
  • 企业为职工负担的个人所得税是什么意思
  • 租赁的厂房改造可以费用化吗
  • 残疾人保障金人数
  • 工资结算天数
  • 哪些支出可以在计算企业应纳税所得额时加计扣除
  • 劳务工程款和工人工资的区别
  • 零申报逾期未申报怎么补报
  • powershell不显示用户名
  • 公司在银行购买金币没有发票
  • 跟客户合作后发给客户的句子
  • 企业工会会费是什么意思
  • php加载
  • 安置房项目需要环评吗
  • 接受捐赠的固定资产可以入账依据是哪些?
  • 麦克米伦anki
  • 设置浏览器显示网络异常
  • 深度学习第一步——Pytorch-Gpu环境配置:Win11/Win10+Cuda10.2+cuDNN8.5.0+Pytorch1.8.0(步步巨细,少走十年弯路)
  • php trim函数
  • yolov5m
  • gmt微调
  • vue 动态样式
  • PHP mysqli_free_result()与mysqli_fetch_array()函数详解
  • 股东投资款怎么存入公司
  • 收到外币收入怎么入账
  • wordpress 自动生成文章
  • 发工资扣了社保可以要求退回吗
  • 个体户给对方公司开发票会怎样
  • mongodb 教程
  • sql,server
  • 店面收回转让费怎么办
  • 一般纳税人销售自己使用过的物品
  • 发票一般会失效几天
  • 应付账款不用付情况说明
  • 现金折扣商业折扣的区别
  • 购建固定资产属于投资活动吗
  • 开办幼儿园的流程图
  • 税控设备维护费会计分录
  • 进项税和销项税抵扣的会计分录
  • etc发票当天可以打印吗
  • 税控设备设置在哪儿
  • 微信怎么帮别人代缴社保
  • 培训费发票是否可以抵扣
  • 商业企业购入商品
  • freebsd挂载ntfs
  • iptables用法
  • win8.1自带usb3.0驱动吗
  • windows打开
  • cocos2dx android游戏防破解总结
  • JS中setTimeout的巧妙用法前端函数节流
  • shell脚本 教程
  • nodejs 动态网页
  • python语言文件
  • jquerygrid
  • python文件处理方法
  • 手游 unity
  • js实现字符串和数字对齐
  • javascript修改
  • bootstrap4 教程
  • 江西省国家税务局总局官网
  • 医保电子缴费凭证怎么查询
  • 福建电子税务局社保缴费操作
  • 广州天河东路税务局地址
  • 个人利息收入属于什么收入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设