echarts折线图实线与虚线拼接,及提示框浮层内容格式的设置

来源:互联网 发布:劫单挑亚索 知乎 编辑:程序博客网 时间:2024/05/29 12:49

话不多说上代码

option = {

    title: {
        text: '对数轴示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        formatter:function (params) {
         var str="";
         var n = []; //一个新的临时数组
         var m=[];
         for(var i=0;i<params.length;i++){
            if(params[i].data==""||undefined==params[i].data){
              
            }else{
                n.push(params[i].marker+params[i].seriesName+":"+params[i].data+"<br>");
            }
          };
      
          for(var i = 0; i < n.length; i++) //遍历当前数组
          {
        //如果当前数组的第i已经保存进了临时数组,那么跳过,
        //否则把当前项push到临时数组里面
            if (m.indexOf(n[i]) == -1) m.push(n[i]);
          }
        for(var i = 0; i < m.length; i++){
             str+=m[i];
        }
   //console.info(params);
    return str;
    }
    },
    legend: {
        left: 'left',
        data: [ '2的指数','3的指数']
    },
    xAxis: {
        type: 'category',
        name: 'x',
        splitLine: {show: false},
        data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'log',
        name: 'y'
    },
    series: [
        {
            name: '3的指数',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, , ,]
        },
        {
            name: '3的指数',
            type: 'line',
            itemStyle:{
               normal:{
                   lineStyle:{
                       width:2,
                       type:'dotted'  //'dotted'虚线 'solid'实线
                   }
               }
           }, 
            data: [, , , , , 247, 741, 2223, 6669]
        },
          {
            name: '2的指数',
            type: 'line',
            data: [3,5 ,7 ,35 , 3, 247, 74, 2223, 33]
        },
        
    ]

};

当params[i].marker为空时可这样写

var colortype = '<spanstyle="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[i].color+';"></span>'

 n.push(colortype+params[i].seriesName+":"+params[i].data+"<br>");

下面上图: