• 关于折线图的使用


    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);

    });

    ),

    //显示如下

  • 相关阅读:
    【转】Android Web Server
    【转】Android Http Server
    一步一步教你150行代码实现简书滑动返回效果
    Android代码内存优化建议 OnTrimMemory
    Android应用Activity、Dialog、PopWindow、Toast窗口添加机制及源码分析
    Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)
    阴影效果 ShadowLayout 布局实现(让控件实现立体效果)
    ViewDragHelper让你处理View拖动时,代码减半!
    Android淘宝电影日期选项卡的实现-tab 栏居中滚动
    Android开源项目分类汇总
  • 原文地址:https://www.cnblogs.com/mmore123/p/14108093.html
Copyright © 2020-2023  润新知