echart 图表问题

最新推荐文章于 2024-06-25 15:34:07 发布

青梅煮酒论英雄

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量2.7k

点赞数

分类专栏： echart 文章标签：函数 echarts3-0-柱状图-斜

本文链接：https://blog.csdn.net/this_tall_people/article/details/74212012

版权

本文介绍了Echarts的多种图表类型，包括纵坐标最大值设定、堆叠柱状图、折线图、双曲线折线图、以及柱状图与折线图的组合使用，并强调了tooltips的formatter函数在数据展示中的重要性。

摘要由CSDN通过智能技术生成

echart 网址 : http://echarts.baidu.com/index.html

纵坐标的最大值

//计算最大值
    var getMax=function(arr,ifnumber){
   
        var newArr=[];
        for (var i = 0; i < arr.length; i++) {
            newArr.push(arr[i]);
        }
        for (var i = 0; i < newArr.length; i++) {
            if(isNaN(newArr[i])){
                newArr[i]=0;
            }
        }
        if (isNaN(Math.max.apply(null,newArr))||Math.max.apply(null,newArr)<=1) {
            if(ifnumber==undefined || ifnumber==''){
                return 1;
            }else{
                return 10;
            }
        }else if(isNaN(Math.max.apply(null,newArr))||Math.max.apply(null,newArr)<=10){
            return 10;
        }else{
            var max = Math.max.apply(null,newArr); 
            //获得数组的最大值
            var num = Math.ceil(max / Math.pow(10,String(Math.ceil(max)).length-1) );
            max = Math.pow(10,String(Math.ceil(max)).length-1 )*num;
            return max;
        }
    }

堆叠柱状图

比较完整

任何要显示给用户看的数据或者数据格式都要在tooltips设置 formatter: function (params)，params参数是个神奇的参数

data:[
        [日期],
        [数据百分比],
        [数据总量],
        [legend 值]
    ]
var allSeries=[],
        lengdata = [],
        biao=[],
        all=[],
        topp='',
        len = data.length,
        lenfo = data[len-1].length;
        var j=0;
        //Series显示的数据
        for(var i=0;i<lenfo-1;i++){
              lengdata[i] = data[len-1][i+1];
              allSeries[i] = {};
              allSeries[i].name =data[len-1][i+1];
              allSeries[i].type = 'bar';
              //类型为柱状图
              allSeries[i].stack = '总量';
              allSeries[i].barMinWidth = 10;
              柱子的大小
              allSeries[i].barMaxWidth =28;
              allSeries[i].barGap =3;
              allSeries[i].left =20;
              allSeries[i].itemStyle =   {
  "normal":{
  "barBorderRadius":0}};
              allSeries[i].data = data[i+1];
     }

    for(var i=lenfo;i<len-1;i++){
        //显示的数量值
        biao[j] = data[i];
        j++;
    }
    if (data[len-1][0].search('TM Number') == '-1' ) {
        topp = 25; }
    else{
        topp =22;
    }
        var chart = echarts.init(document.getElementById(containerId, 'infographic'));
        chart.setOption({
            tooltip : {
                 trigger: 'axis',
                 //指示器
                 axisPointer:{
                    type: 'line',
                    lineStyle: {
                      color: '#008FD4',
                      width: '2'
                    }
                 },
                 position: function (point, params, dom, rect, size) {
                    // 固定在顶部
                    return [point[0]+15, point[1]+15];
                },
                //鼠标移入显示的值
                formatter: function (params) {

                 var jj="";
                for (var i = 0; i < params.length; i++) {
                    var index = params[i].dataIndex;
                    var biaodata='';
                      if (params[i].seriesName =='other' || params[i].seriesName =='sone' ) {
                          biaodata = biao[0][index] ;
                      }

                      else
                         biaodata = biao[6][index];
                    jj +='<br/>' + '<div style="width: 15px;height: 10px;border-radius:2px;background:'+params[i].color+';display: inline-block;"></div>'+' '+params[i].seriesName+':'+params[i].value+'%('+biaodata+')';
                }

                  return params[0].name+ jj;}
            },
            //左上角的标题
            title:{
              text:data[len-1][0],
              x:'le