当前位置： 首页 > news >正文

教育行业网站建设审批/域名购买

news 2025/7/28 2:23:11
教育行业网站建设审批,域名购买,河北手机网站制作公司,bootstrap 购物网站 导航菜单对四个图进行尝试 Echarts的官网 ：https://echarts.apache.org/zh/tutorial.html 示例 : https://echarts.apache.org/examples/zh/index.html 官网示例，有完整代码如左边 以下是我的代码，主要是对示例进行属性修改，具体数据可以…

在这里插入图片描述

对四个图进行尝试

Echarts的官网 ：https://echarts.apache.org/zh/tutorial.html
示例 : https://echarts.apache.org/examples/zh/index.html
在这里插入图片描述
官网示例，有完整代码如左边

以下是我的代码，主要是对示例进行属性修改，具体数据可以自己设计或是利用api

<!--THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-smooth
-->
<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;" background="./image/bg_body.jpg">
<!--<div style="height:50%;width: 50%;margin-top: 0px" >-->
<!--    <div id="container" style="height: 100%"></div>-->
<!--    -->
<!--</div>-->
<div style="height: 45%"><div style="height:100%;width: 50%;float: left;"><div id="container" style="height: 100% ;"></div></div><div style="height:100%;width: 50%;float: right;"><div id="container3" style="height: 100% ;"></div></div></div>
<div style="height: 45%"><div style="height:100%;width: 50%;float: left;"><div id="container1" style="height: 100% ;"></div></div><div style="height:100%;width: 50%;float: right;"><div id="container2" style="height: 100% ;"></div></div>
</div>
<title>树洞数据统计</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script><script type="text/javascript">window.onload = function () {var curDate = new Date();var curYear=curDate.getFullYear();var curMonth = curDate.getMonth()+1;  //获取当前月份(0-11,0代表1月)if(curMonth<10){curMonth="0"+curMonth}var curDay = curDate.getDate()+1;if(curDay<10){curDay="0"+curDay}console.log(curYear+""+curMonth+""+curDay)var nowtime=curYear+""+curMonth+""+curDayvar dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;var starttime = "20200801"var endtime = nowtime$.ajax({type: "get",url: "https://xxxxxx.com/api/cloud/debug/forum/user/login",data: {"starttime": starttime,"endtime": endtime},success: function (data) { //【成功回调】option = {// dataZoom: [//     {//         id: 'dataZoomX',//         type: 'slider',//         xAxisIndex: [0],//         filterMode: 'filter'//     },//     {//         id: 'dataZoomY',//         type: 'slider',//         yAxisIndex: [0],//         filterMode: 'empty'//     }// ],xAxis: {type: 'category',data: data.date,axisLabel: {interval: 0,//X轴信息全部展示rotate: 15,//60 标签倾斜的角度show: true,textStyle: {color: '#ffffff'}}},yAxis: {type: 'value',axisLabel: {show: true,textStyle: {color: '#ffffff'}}},dataZoom: [{type: 'slider',start: 0,end: 60}, {start: 0,end: 10}],series: [{data: data.data,type: 'line',smooth: true,lineStyle: {normal: {width: 3,  //连线粗细color: "#ffffff"  //连线颜色}},itemStyle: {normal: {color: "#F00" //图标颜色}},}],grid: {// x: 50,// x2: "50%",// y: 50,// y2:500},title: {text: "用户登录分析",left: "center",textStyle: {fontSize: 18,//字体大小color: '#ffffff'//字体颜色},}};if (option && typeof option === 'object') {myChart.setOption(option);}},error: function (xhr, type) { //【失败回调】}});/*** 用户发送*/var dom1 = document.getElementById("container1");var myChart1 = echarts.init(dom1);var app1 = {};var option1;var starttime = "20200801"var endtime = nowtime$.ajax({type: "get",url: "https://xxxxxx.com/api/cloud/debug/forum/user/sent",data: {"starttime": starttime,"endtime": endtime},success: function (data) { //【成功回调】var dom = document.getElementById("container1");var myChart = echarts.init(dom);var app = {};var option;// var base = +new Date(1968, 9, 3);// var oneDay = 24 * 3600 * 1000;// var date = [];//// var data = [Math.random() * 300];//// for (var i = 1; i < 20000; i++) {//     var now = new Date(base += oneDay);//     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));//     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));// }option = {tooltip: {trigger: 'axis',position: function (pt) {return [pt[0], '10%'];}},title: {left: 'center',text: '用户发送分析',textStyle: {fontSize: 18,//字体大小color: '#ffffff'//字体颜色},},toolbox: {feature: {dataZoom: {yAxisIndex: 'none'},restore: {},saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: data.date,axisLabel: {show: true,textStyle: {color: '#ffffff'}}},yAxis: {type: 'value',boundaryGap: [0, '100%'],axisLabel: {show: true,textStyle: {color: '#ffffff'}}},dataZoom: [{type: 'inside',start: 0,end: 60}, {start: 0,end: 0}],series: [{name: '数据',type: 'line',symbol: 'none',sampling: 'lttb',itemStyle: {color: 'rgb(255, 70, 131)'},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 158, 68)'}, {offset: 1,color: 'rgb(255, 70, 131)'}])},data: data.data}]};if (option && typeof option === 'object') {myChart.setOption(option);}},error: function (xhr, type) { //【失败回调】}});/*** 多分析*/$.ajax({type: "get",url: "https://xxxxxxxx.com/api/cloud/debug/forum/picture",data: {"starttime": starttime,"endtime": endtime},success: function (data) { //【成功回调】$.ajax({type: "get",url: "https://xxxxxx.com/api/cloud/debug/forum/forum",data: {"starttime": starttime,"endtime": endtime},success: function (data1) { //【成功回调】$.ajax({type: "get",url: "https://xxxxxxx.com/api/cloud/debug/forum/reply",data: {"starttime": starttime,"endtime": endtime},success: function (data2) { //【成功回调】$.ajax({type: "get",url: "https://xxxxxx.com/api/cloud/debug/forum/replyComment",data: {"starttime": starttime,"endtime": endtime},success: function (data3) { //【成功回调】var dom = document.getElementById("container2");var myChart = echarts.init(dom);var app = {};var option;option = {color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087'],title: {text: '其他分析',left: '15%',textStyle: {fontSize: 18,//字体大小color: '#ffffff'//字体颜色},},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['上传图片', '发帖', '回帖', '评论'],textStyle: {fontSize: 15,//字体大小color: '#ffffff'//字体颜色},},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: data1.date,axisLabel: {show: true,textStyle: {color: '#ffffff'}}}],yAxis: [{type: 'value',axisLabel: {show: true,textStyle: {color: '#ffffff'}}}],series: [{name: '上传图片',type: 'line',stack: '总量',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(128, 255, 165)'}, {offset: 1,color: 'rgba(1, 191, 236)'}])},emphasis: {focus: 'series'},data: data.data},{name: '发帖',type: 'line',stack: '总量',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(0, 221, 255)'}, {offset: 1,color: 'rgba(77, 119, 255)'}])},emphasis: {focus: 'series'},data: data1.data},{name: '回帖',type: 'line',stack: '总量',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(55, 162, 255)'}, {offset: 1,color: 'rgba(116, 21, 219)'}])},emphasis: {focus: 'series'},data: data2.data},{name: '评论',type: 'line',stack: '总量',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(255, 0, 135)'}, {offset: 1,color: 'rgba(135, 0, 157)'}])},emphasis: {focus: 'series'},data: data3.data},]};if (option && typeof option === 'object') {myChart.setOption(option);}},error: function (xhr, type) { //【失败回调】}});},error: function (xhr, type) { //【失败回调】}});},error: function (xhr, type) { //【失败回调】}});},error: function (xhr, type) { //【失败回调】}});/***24小时分析*/$.ajax({type: "get",url: "https://xxxxxxxx.com/api/cloud/debug/forum/hours",data: {"starttime": starttime,"endtime": endtime},success: function (dataa) { //【成功回调】var dom1 = document.getElementById("container3");var myChart3 = echarts.init(dom1);var app = {};var option3;var arr = new Array();for (i = 0; i <= 23; i++) {// for (j = 0; j < 23; j++) {//     if (parseInt(dataa.date[j]) == i) {//console.log(parseInt(dataa.data[j]) + "-" + parseInt(dataa.date[j]) + "-i:" + i + " j:" + j)arr[i] = {"value": parseInt(dataa.data[i]), "name": parseInt(dataa.date[i])}// break;// } else {// arr[i]={"value":0,"name":i}// }// }}option3 = {// legend: {//     top: 'bottom',//     textStyle: { //图例文字的样式//         color: '#fff',//         fontSize: 16//     },// },title: {left: 'center',text: '24小时分析',textStyle: {fontSize: 18,//字体大小color: '#ffffff'//字体颜色},},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true, readOnly: false},restore: {show: true},saveAsImage: {show: true}}},dataZoom: [{type: 'slider',start: 0,end: 60}, {start: 0,end: 10}],series: [{name: '24小时分析',type: 'pie',radius: [50, 100],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 1},label: {normal: {textStyle: {color: '#ffffff'  // 改变标示文字的颜色},}},data: arr,/*** [{value: 40, name: 'rose 1'},{value: 38, name: 'rose 2'},{value: 32, name: 'rose 3'},{value: 30, name: 'rose 4'},{value: 28, name: 'rose 5'},{value: 26, name: 'rose 6'},{value: 22, name: 'rose 7'},{value: 18, name: 'rose 8'}]*/}]};if (option3 && typeof option3 === 'object') {myChart3.setOption(option3);}},error: function (xhr, type) { //【失败回调】}});}</script>
<script type="text/javascript"></script>
</body>
</html>
http://www.lbrq.cn/news/942229.html

相关文章：

  • 网站建设全程揭秘 课件下载/视频号关键词搜索排名
  • 北京专业做网站的公司/论坛seo招聘
  • 品牌网站建设有哪些/站长推广网
  • 稳定的网站建设/什么是搜索引擎优化seo
  • dw怎么做phpcms网站/域名权重
  • 电商网站成功的营销策略/互联网下的网络营销
  • 福州网站建设服务价格最实惠/搜索引擎营销的主要方法
  • 行业电子商务网站有哪些/app网络推广方案
  • 哪些网站可以做代理/优化网站链接的方法
  • 推广赚钱的软件有哪些/百度seo什么意思
  • 广州冼村改造/seo引流什么意思
  • 各个做网站的有什么区别/cilimao磁力猫最新版地址
  • 网易免费企业邮箱入口/seo运营做什么
  • 做微信平台网站需要多少钱/磁力天堂最佳搜索引擎入口
  • 宁夏建设厅网站官网/seo就业前景如何
  • 哪个网站做服装批发比较好/百度首页登录官网
  • 金融理财网站建设方案/每天三分钟新闻天下事
  • 黑客收徒网站建设/网站的营销策略
  • 网站logo图怎么做的/深圳seo秘籍
  • php开源网站/室内设计师培训班学费多少
  • 做高级电工题的网站/沈阳seo博客
  • xp系统中做网站服务器/培训机构好还是学校好
  • 松江网站建设品划网络/网络媒体发稿平台
  • 淄博网站客户/百度seo优化软件
  • 微信如何建网站/永久免费个人网站申请注册
  • 测试网站访问速度/联赛积分榜排名
  • 合肥做网站可以吗/网站源码下载
  • wordpress如何写网站/广州网站优化公司排名
  • 外贸网站收录工具/搜索竞价
  • 自助建站系统建的网站做排名吗/推广网页怎么做的
  • Dify开发教程笔记(一)： 文件及系统参数变量说明及使用
  • Windows11下和Vmware中的Ubuntu22.04设置samba服务遇到的一个问题- valid users和guest设置冲突
  • 【C语言进阶】程序环境和预处理
  • MongoDB数据模型
  • connect系统调用及示例
  • DNS 服务正反向解析与 Web 集成实战：从配置到验证全流程