zoukankan      html  css  js  c++  java
  • 关于折线图的使用

    1 js 分两部,一步写方法,一步写配置

    showLine:function(){                                                                    //折线图配置

    var _t=this;                                                                             //先赋值定义数据    

    var myChart_line,option_line;                                               var data_time=['2016年','2017年','2018年','2019年','2020年'];

    option_line=option_trend_new;                                            var tongbao=[0,0,0,0,0,0,0,0];

    //获取一年前月份                                                                  var zhenggai=[0,0,0,0,0,0,0,0];

    var date=new Date;                                                              var shenhe=[0,0,0,0,0,0,0,0];

    var year=date.getFullYear()-1+'';                                          var option_trend_new={

    var month=date.getMonth()+1'';                                          title:[{show:true,text:"(个)",配置在echart里有

    var time=year+month;                                                           xAxis:[{ data:data_time}],

    $.post(this.URL+'?showLine',{                                              yAxis:[{minInterval:1}],//y轴去掉小数点

    act:'showLine',                                                                      series:[{areaStyle:{nomal:{ color:new echarts.graphic.LinearGradient(0,0,0,1,[{

    time:time                                                                               offset:0,

    },function(v){                                                                          color:''

    if(v=='[]') return false;                                                           offset:1

    v=JSON.parse(v);                                                                color:''//渐变颜色

    var dataArr_X=[]; //用来显示x轴上的数据

    var data=new Date();

    for(var i=0;i<8;i++){ //每次循环一次日期-1

    data.setDate(date.getDate()-1);

    var m=data.getMonth()+1;

    var d=data.getDate();

    m=m<10?"0"+m:''+m;

    d=d<10?"0"+d:''+d;

    dataArr_X.unshift(data.getFullYear()+'-'+(m)+'-'+(d))

    }

    //定义赋值

    var obj={0:[0,0,0,0,0,0,0,0],1:[0,0,0,0,0,0,0,0],};//状态最近八天的数据

    for(var x=0,l=v.length;x<l;x++){

    if(dataArr_X.indexOf(v[x].Feedback_time)>-1){

    if(!obj[v[x].state]){

    obj[v[x].state]=[];

    }

    obj[v[x].state][dataArr_X.indexOf(v[x].Feedback_time)]=v[x].num;} //取每天返回的数据

    }

    var arr=[];

    for(var i=0;i<obj[5].length;++i){       //取状态的综合

    arr[i]=+obj[5][i]+ +obj[6][i];

    }

    //给x轴 y轴赋值

    option_line.xAxis[0].data=dataArr_X;

    option_line.series[0].data=obj[0];

    option_line.series[1.data=obj[0];

    option_line.series[0].data=arr;

    myChart_line=echarts.init(document.getElementById('echarts_trend'));

    myChart_line.setOption(option_line);

    });

    ),

    //显示如下

  • 相关阅读:
    POJ2126——Prime Path(BFS)
    POJ3020——Antenna Placement(二分图的最大匹配)
    POJ1019——Number Sequence(大数处理)
    CodeForces484A——Bits(贪心算法)
    CodeForces485B——Valuable Resources(水题)
    CodeForces485A——Factory(抽屉原理)
    HDU5092——Seam Carving(动态规划+回溯)(2014上海邀请赛重现)
    cache和buffer区别
    https页面证书验证、加密过程简介
    主要的开源镜像站点资源
  • 原文地址:https://www.cnblogs.com/mmore123/p/14108093.html
Copyright © 2011-2022 走看看