有关echarts

最新推荐文章于 2022-10-29 12:33:29 发布
最新推荐文章于 2022-10-29 12:33:29 发布
阅读量137 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenmin1987/article/details/86486618
版权

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" src="js/Utils.js" ></script>
    </head>
     <style type="text/css">
         /*.mui-bar{    position: inherit;
                    z-index: 10;
                    right: 0;
                    left: 0;
                    height:139px !important;
                    }*/
         .bg-color{
             background-color:#24C789;
             /*height:139px;*/
         }
         .bg-color a,.bg-color h1{color:#FFFFFF;}
         /*.headbox1{
             overflow: hidden;
         }*/
         .headbox{
             width:100%;
             /*padding-top: 0px;*/
             overflow:hidden;
             background-color:#24C789;
             }
         .headbox2,.headbox3{
             float: left;
            width:49%;
            text-align: center;
         }
         .suline{
             float:left;
             height:50px;
             margin-left:5px;
             margin-top: 5px; 
             border:1px solid #FFFFFF ;
             opacity:0.5;
             }
         .headbox2 span,.headbox3 span{
             color:#FFFFFF;
             }
         .headbox2 h4,.headbox3 h4{
             font-size: 32px; color:#FFFFFF;
             }
         .headbox3 h4 span{
             font-size: 15px;
             }
         .mui-content{
             margin-top:0px;
             }
             .chart {  
                height: 195px;
               
                margin-left: -170px;  
                padding: 0px;  
            } 
            .chart2 {  
                width: 100%;  
                height: 195px; 
               
                margin-left: 0px;  
                padding: 0px;  
            } 
         .bodybox1{
             width:100%;
             height:195px;
             background-color:#fff;
             /*border:1px solid red ;*/
         }
         .bodybox2,.bodybox2,.bodybox3{
             margin-top:10px;
             height: 195px;
             background-color:#fff;
             /*border:1px solid red;*/
             }
             
         .bodybox2-in{width:100%;padding: 20px 0px;}
         .bodybox2-1{
             float: left;
                width:33.33%;
                background-color:#fff;
                /*border: gray solid 1px;*/
         }    
         .bodybox2-1-1,.bodybox2-1-2,.bodybox2-1-3,.bodybox2-1-4{
             text-align: center;
             height:88px;
         }  
         .bodybox2-1-M{
             text-align: center; 
             height:176px;
             }
         .bodybox2-1-M .bodybox2-1-I{
             width:128px;
             height:128px;
             line-height: 160px;
         }
         .bodybox3{
             padding-top: 24px;
             height:130px;
             background-color:#fff;
             }
         .bodybox3-1,.bodybox3-2,.bodybox3-3{
             float: left;
            width:33.33%;
            text-align: center;    
         }
         .bodybox3-span{
             display: inline-block;
             width:50px;
            height:15px;
            line-height: 15px;
            font-size: 10px;
            border: 1px solid #999999;
            border-radius:8px;
         }
         /*#imgfenxiang{
             width:40px; 
             height:40px;
         }*/
         /*#imgfenxiang{
             width:"35%"; 
             height:50px;
         }*/
     </style>
    <body>
    <!--<header class="mui-bar mui-bar-nav bg-color">
             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
             <h1 class="mui-title">运动中</h1>
             <a  class="mui-pull-right"><img id="imgfenxiang" src="img/sportDetail/分享.png"/></a>
    </header>-->
    <!--<div class="mui-content">-->
        
    <!--</div>-->    
        
        <script src="js/mui.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
        <script type="text/javascript">
            var url = "http://192.168.10.15:8083/motion/motionTimeSlotData/1854";
            mui.init();
            var motionData ={};
            var map = {};
            mui.ajax(url,{
                data:{
                    "userId": 432,
                      "interfaceId": 0
                    },
                dataType:'json',//服务器返回json格式数据
                type:'post',//HTTP请求类型
                timeout:10000,//超时时间设置为10秒；
                headers:{'Content-Type':'application/json'},
                success:function(data)
                {
//                    debugger;
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                     console.log(JSON.stringify(data));
                    motionData = JSON.parse(JSON.stringify(data.obj.list[0]));
                    document.getElementById('dayTotalExerciseTime').innerHTML = sec_to_time(parseInt(motionData.dayTotalExerciseTime)*60);
                    document.getElementById('dayConsume').innerHTML = motionData.dayConsume+"<span>大卡</span>";
                    document.getElementById('totalExerciseTime').innerHTML =sec_to_time(parseInt( motionData.totalExerciseTime)*60);
                    document.getElementById('powerGeneration').innerHTML = motionData.powerGeneration+"<span>千焦</span>";
                    document.getElementById('meanHeartRateStrength').innerHTML = motionData.meanHeartRateStrength+"<span>次/秒</span>";
                    document.getElementById('consume').innerHTML = motionData.consume+"<span>大卡</span>";
                    document.getElementById('distance').innerHTML = motionData.distance+"<span>千米</span>";
                    document.getElementById('imgUrl').src=motionData.imgUrl;
                    document.getElementById('equipmentName').innerHTML = motionData.equipmentName;
                    if(parseInt(motionData.motionState) == 0){
                        document.getElementById('motionState').innerHTML ="未完成";
                    }else if(parseInt(motionData.motionState) == 1){
                        document.getElementById('motionState').innerHTML ="进行中";
                    }else{
                        document.getElementById('motionState').innerHTML ="已完成";
                    }
                    
//                    debugger;
                    map={
                            "极限运动":motionData.maximalExercise+"min",
                        "无氧运动":motionData.anaerobicExercise+"min",
                        "有氧运动":motionData.aerobicExercise+"min",
                        "燃脂运动":motionData.fatMovement+"min",
                        "热身运动":motionData.warmup+"min"
                        };
//                        echarts.init(document.getElementById("pieChart")).showLoading();
                        var formatterB = "{b|"+motionData.consume+"}";
                echarts.init(document.getElementById("pieChart")).setOption({
                tooltip: {//提示框浮层
                    showContent:false,//showContent
                    trigger: 'item',//无类目轴的图表使用item，有类目轴使用axis触发，none表示不触发提示框
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                toolbox:{
                    feature:{
                        readOnly:true
                    }
                },
                legend: {
                    formatter: function (name) {
//                        debugger;
                        var retunName =name+' '+' '+' '+' '+' '+' '+map[name];
                            return  retunName;//5min为后台返回数据
                        },
                    selectedMode:false,//控制是否可以通过点击图例改变系列的显示状态
                    orient: 'vertical',
                    left:370,
                     y:'center',
                     data:[
                     {name:'极限运动',icon:'image://img/sportDetail/Ellipse 10.png'},
                     {name:'无氧运动',icon:'image://img/sportDetail/Ellipse 10 copy.png'},
                     {name:'有氧运动',icon:'image://img/sportDetail/Ellipse 10 copy 2.png'},
                     {name:'燃脂运动',icon:'image://img/sportDetail/Ellipse 10 copy 3.png'},
                     {name:'热身运动',icon:'image://img/sportDetail/Ellipse 10 copy 4.png'}
                     ]
                },
                color:['#F16565','#FFED77','#36D7B7','#3558DA','#868A8E'],
                series: [
                    {
                        hoverAnimation:false,//是否开启 hover 在扇区上的放大动画效果。
                        name:'运动数据',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap:false,//是否启用防止标签重叠策略， 这里把标签放在中心 必须重叠
                        label: {
                            normal: {
                                show: true,//是否显示圆环里面的内容
//                                formatter:'运动数据\n999',//圆环里面的内容(支持换行)
                                formatter: [
                                    '{a|运动点数}',
                                    formatterB
                                    ].join('\n'),
                                rich: {
                                    a: {
                                        fontSize:10
                                        },
                                    b: {
                                        fontSize:18,
                                        fontWeight:'bolder',
                                        height: 20
                                        }
                                    },
                                    lineHeight: 20,
                                color:'#999999',
                                fontWeight:'bold',
                                position: 'center'
                            },
                            emphasis: {
                                show: false,//点击相关区域是否显示在圆环里面显示内容
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show:false
                            }
                        },
                        data:[
                            {value:motionData.maximalExercise, name:'极限运动'},
                            {value:motionData.anaerobicExercise, name:'无氧运动'},
                            {value:motionData.aerobicExercise, name:'有氧运动'},
                            {value:motionData.fatMovement, name:'燃脂运动'},
                            {value:motionData.warmup, name:'热身运动'}
                        ]
                    }
                ]
            });
            var arr=[];
            
            function getXData(value){
                //motionData.heartRate.length
                if(value <= 30){
                    for (var i = 0;i<=30;i++) {
                    arr.push(i);
                    }
                }
                else{
                    for (var i = 0;i<=value;i++) {
                    arr.push(i);
                    }
                }
                return arr;
            }
//            echarts.init(document.getElementById("pieChart")).hideLoading();
                echarts.init(document.getElementById("pieChart2")).setOption({
            toolbox:{
                        show: false,
                        feature: 
                        {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
            calculable : false,
//          dataZoom: [//给x轴设置滚动条    
//                         //下面这个属性是里面拖到    inside
//                         {    
//                             type: 'inside',  
//                             filterMode:'empty',
//                             show: true,    
//                             xAxisIndex: [0],
//                             start: 0,//默认为1    
//                             end: motionData.heartRate.length+1
//                         },    
//                     ], 
               xAxis: 
               [
                   {
                    name:'min',
                    splitLine:{show: false},
//                          splitArea : {show : true},//保留网格区域
                    type: 'category',
//                        gridIndex:0,
//                        min:2,
                    boundaryGap:true,
//                    axisLine:
//                    {
//                        symbol:['none', 'arrow'],
//                        symbolSize:[8,10]
//                    },
                    axisTick:
                    {
                        alignWithLabel:true
                    },
//                    axisLabel:
//                    {
                        interval: getaside(1,100)
//                        interval: 4
//                    },
                    data:getXData(motionData.heartRate.length)
                }
               ],
            yAxis: 
            [
                {
                    splitLine:
                    {
                        show: false
                    },
                    type: 'value',
                    scale: true,
                    name: '心率强度',
                    max: 120,
                    axisLabel : 
                    {
                        formatter: function(value)
                        {
                            return value+'%'; 
                        } 
                    }, 
                        splitArea : {show : true} 
                }
            ],
            series: 
            [
                {
                    name: 'test',
                    type: 'bar',
                    itemStyle: 
                    {
                           normal: 
                           {
                            color: function(params) 
                            {
                                   var colorList = [
                              '#F16565','#FFED77','#36D7B7','#3558DA','#868A8E'
                                    ];
                                if(0<=params.data && params.data<=20){
                                return colorList[0]
                                } if(20<params.data && params.data<=40){
                                return colorList[1]
                                } if(40<params.data && params.data<=60){
                                return colorList[2]
                                }
                                 if(60<params.data && params.data<=80){
                                return colorList[3]
                                }
                                 else{
                                return colorList[4]
                                }
                            },
　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: false,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                            }
                        }
                    },
                    data: motionData.heartRate
                }
            ]
        });
                echarts.init(document.getElementById("pieChart")).hideLoading();
                },
                error:function(xhr,type,errorThrown)
                {
                    //异常处理；
                    debugger;
                    console.log(type);
                }

            });
        </script>
        <div class="headbox">
            <div class="headbox2">
                <span>总时间</span>
                <h4 id="dayTotalExerciseTime"></h4>
            </div>
            <div class="suline"></div>
            <div class="headbox3">
                <span>总卡路里</span>
                <h4 id="dayConsume"></h4>
            </div>
        </div>  
        <!--<a href="test.html">ssssss</a>-->
        <div class="bodybox1">
            <div class="mui-slider" style="height: 200px;">
              <div class="mui-slider-group">
                <div class="mui-slider-item"><div class="chart" id="pieChart"></div> </div>
                <div class="mui-slider-item"><div class="chart2" id="pieChart2"></div> </div>
              </div>
            </div>
            
        </div>
        <div class="bodybox2">
            <div class="bodybox2-in">
                <div class="bodybox2-1">
                    <div class="bodybox2-1-1">
                        <img src="img/sportDetail/时间 (2).png"/>
                        <h6 id="totalExerciseTime"><span></span></h6>
                    </div>
                    <div class="bodybox2-1-2">
                        <img src="img/sportDetail/矢量智能对象1.png"/>
                        <h6 id="powerGeneration"></h6>
                    </div>
                </div>
                <div class="bodybox2-1">
                    <div class="bodybox2-1-M">
                        <div class="bodybox2-1-I">
                            <img src="img/sportDetail/心率.png" />
                        </div>
                        <h6 id="meanHeartRateStrength"></h6>
                    </div>
                    
                        
                </div>
                <div class="bodybox2-1">
                    <div class="bodybox2-1-3">
                        <img src="img/sportDetail/矢量智能对象2.png"/>
                        <h6 id="consume"></h6>
                    </div>
                    <div class="bodybox2-1-4">
                        <img src="img/sportDetail/里程_f.png"/>
                        <h6 id="distance"></h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="bodybox3">
            <div class="bodybox3-1">
                <img id="imgUrl" src="img/sportDetail/单车出租1.png"/>
                <h6><span id="equipmentName"></span></h6>
                <span class="bodybox3-span" id="motionState">进行中</span>
            </div>
        </div>
       <script type="text/javascript">
           document.getElementById('dayTotalExerciseTime').innerHTML = sec_to_time(parseInt(motionData.dayTotalExerciseTime)*60)
       </script>
    </body>

</html>

wenmin1987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue echarts 雷达图（radar）动态获取数据并渲染
weixin_30741653的博客
08-08 4625
一、给个容器 二、获取数据 mounted(){ this._getCategory() }, _getCategory(){ getCategory().then(res=>{ let data = res.data.data ...
echarts相关的数据
05-12
echarts相关的数据
e-charts 雷达图点击事件
Julia_0502的博客
12-02 3352
e-charts 雷达图 文章目录e-charts 雷达图前言一、雷达图点击效果1.html 部分2.js部分3.实现效果总结 前言 提示：雷达图的点击事件 提示：以下是本篇文章正文内容，下面案例可供参考 一、雷达图点击效果 1.html 部分 代码如下（示例）： <ve-radar class="customer-rating" width="100%" height="240px" :data="chartData" :settings='chartSettings'
单网页vue的charts数据可视化作图介绍和使用初级版
左手の明天的博客
06-11 1590
1 说明 1.1 推荐指数：★★★★ 1.2 在官方文档的基础上进行，具体化和简单化，目的就是一秒就懂，拿来就能使用。 1.3 亲测的工具：谷歌浏览器和微软vscode编辑器。 2 v-charts介绍： 2.1 是vue的charts的封装。 2.2 在线地址：https://v-charts.js.org/#/ 3 本次介绍单网页vue的数据可视化，插件名称介绍。 饼图：ve-pie 折线图：ve-line 柱状图：ve-histogram 水滴图：ve-liquidfill 散点图：ve-scatt.
关于echarts的雷达图比较详细的参数说明
csdn_zsdf的博客
08-02 11万+
要实现的效果图如下： (https://img-blog.csdn.net/20180802194613401?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenNkZg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) 接下来主要关于下面的几个参数进行设置 1....
【贪心】Radar Installation
VegB的博客
02-25 2470
题目地址：Radar Installation
有关echarts的引入问题
weixin_49065682的博客
12-02 871
在我们写echarts时候排除了其他问题出现下面问题 vue.runtime.esm.js?430a:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'init')" 和 TypeError: Cannot read properties of undefined (reading 'init') 可以更换引入的方式，把import echarts from .
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
ECharts使用学习
gc_2299的博客
11-06 484
ECharts是用JavaScript编写的开源图表库，本文主要介绍ECharts的安装及使用示例
echarts自定义地图
12-25
echarts自定义地图，根据地图的坐标进行绘制自己相关的地图，用html+css+echarts来实现，费用值得借鉴过来使用。
echarts_5.0.0.zip
12-30
ECharts，一个使用 Js实现的开源可视化库，可流畅运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制...
echarts的相关文件
05-30
echarts的相关文件
echarts地图相关.rar
05-25
浙江下属市级，比如宁波，温州，丽水，金华，嘉兴，湖州，杭州，衢州等等echarts-map的地图边界经纬json数据，再结合百度echarts，参考链接如下： https://echarts.apache.org/examples/zh/editor.html?c=map-HK
javascript时间日期处理--new Date(),format()
wenmin1987的博客
12-10 1万+
创建时间对象：       var objDate=new Date([arguments list]);    参数有5种形式：      1）new Date("month dd,yyyy hh:mm:ss");       2）new Date("month dd,yyyy");       3）new Date(yyyy,mth,dd,hh,mm,ss);       4）new ...
JavaScript书写基本规范
wenmin1987的博客
07-16 3991
1.不要在同一行声明多个变量 var a = null; var b = 0; var c = undefined;这样更好：var a = null; b = 0; c = undefind   2.请使用 ===/!==来比较true/false或者数值，防止JavaScript语言中一些强制类型转换 var a = 1; var b = '2'; if(a === b...
登录过期--localStorage加sessionStorage实现7天登录过期
wenmin1987的博客
10-09 1724
localStorage实现7天登录过期 实现原理：存localStorage比较初始登录时存在缓存的时间戳和现在进入页面的时间戳，然后用sessionStorage去判断不勾选但是登录了的状态 精简版 function isPastDue() { // 过期时间7天 var time = 604800000; //1000*60*60*24*7; var storage = window.localStorage; var oldTimestamp = storage.g...
javascript事件基础--窗口重置（resize事件）和页面滚动（scroll事件）
wenmin1987的博客
03-26 1303
浏览器窗口重置时触发（调整窗口大小，最大化，最小化）：resize <body> <div id="box"></div> <script type="text/javascript"> var box=document.getElementById("box"); ...
localStorage设置过期时间
wenmin1987的博客
10-09 999
众所周知，前端三大缓存，cookie，sessionStorage，localStorage，cookie空间太小，一旦大了，会消耗流量，只适合存一些登录会话信息，而sessionStorage的过期时间就是关闭浏览器，是个临时会话窗口，但是，最近这个差点把我坑了，就是sessionStorage只能在同一标签下共享，加入你把网址复制粘贴到新打开的标签页里面，你会惊喜的发现，what？居然不共享，这不坑爹呢吗？咳咳。。还有就是localStorage了，这个好处就是存储空间大，长时间保存，同一浏览器，标签页
javaScript遍历对象、数组、类数组总结
wenmin1987的博客
03-03 994
一、对象直接量的遍历 var o={ a:1, b:2, c:3, d:5 } Object.keys(o) :遍历自己的属性，原型上的和继承过来的都不遍历 Object.keys(o) // ["a", "b", "c", "d"]---输出的是数组key值 delete o.a;//true Object.keys(o) // ["b", "c", "d&quot
有关echarts的知识点
最新发布
08-18
以下是一些与 Echarts 相关的常见知识点： 1. 基本概念：Echarts 主要由三个组件组成，分别是画布（Chart）、系列（Series）和坐标系（Coordinate System）。画布是图表的容器，系列是图表中的数据序列，坐标系则是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值