8种基于ECharts改进的数据可视化，让你逆袭职场

一、纵坐标分组

1.1 options设置

option = {
   grid: {
       left: 250
    },
    xAxis: {
       axisLine: {
           lineStyle: {color: '#ccc'}
        },
       axisLabel: {
           textStyle: {color: '#777'}
        }
    },
    yAxis: [{
       inverse: true,
       splitLine: {
           show: true
        },
       axisTick: {
           length: 100,
           lineStyle: {color: '#ccc'}          
        },
       axisLine: {
           lineStyle: {color: '#ccc'}
        },
        data: ['-', '-', '-', '-', '-']      
    }, {
       name: '                     所属行业',
       nameLocation: 'start',      
       nameTextStyle: {
           fontWeight: 'bold'
        },
     position: 'left',
       offset: 130,
       axisLine: {
           onZero: false,
           show: false          
        },
       axisTick: {
           length: 70,
           inside: true,
           lineStyle: {color: '#ccc'}
        },      
       axisLabel: {
           inside: true
        },      
       inverse: true,      
       data: ['电商', '游戏', '金融', '旅游', '直播']
    }, {
       name: '                产品名',
       nameLocation: 'start',
       nameTextStyle: {
           fontWeight: 'bold'
        },      
 position: 'left',
       offset: 220,
       axisLine: {
           onZero: false,
           show: false
        },
       axisTick: {
           length: 100,
           inside: true,
           lineStyle: {color: '#ccc'}          
        },
       axisLabel: {
           inside: true
        },
       inverse: true,
       data: ['APP数据分析', 'DMP', '企业版', '移动广告鉴别', '']      
    }],
    series: [{
        type: 'bar',
        data:[220, 182, 191, 234, 290],
        label: {
          normal: {
               show: true,
               position: 'left',
               textStyle: {color: '#000'},
               formatter: '合同金额',              
            }
        }
    }, {
        type: 'bar',
        data:[210, 132, 91, 204, 220],
        label: {
          normal: {
               show: true,
               position: 'left',
               textStyle: {color: '#000'},
               formatter: '已收款',              
            }
        }      
    }, {
        type: 'bar',
        data:[120, 132, 131, 254, 278],
        label: {
          normal: {
               show: true,
               position: 'left',
               textStyle: {color: '#000'},
               formatter: '应收款',              
            }
        }      
    }, {      
        type: 'bar',
        data:['-', '-', '-', '-', '-'],
       yAxisIndex: 1
    }, {
        type: 'bar',
        data:['-', '-', '-', '-', '-'],
       yAxisIndex: 2
    }]
};

二、动态分组

2.1 options设置

	var siteThreeMonthYield = [
	    {"ThreeMonthYield":[{"yield": 0.9 , "agraderate": 0.8},{"yield": 0.87 , "agraderate": 0.5},{"yield": 0.98 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.93 , "agraderate": 0.68},{"yield": 0.78 , "agraderate": 0.55},{"yield": 0.998 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.98 , "agraderate": 0.65},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.78 , "agraderate": 0.45},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.68 , "agraderate": 0.46},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.79 , "agraderate": 0.56},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.60 , "agraderate": 0.28},{"yield": 0.873 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.54 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.47 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.69 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.89 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
	    {"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.76 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]}
	    ];
	var sitenames = ['安徽','北京','广东','定远','甘肃','山东','新疆','乌鲁木齐','深圳','西藏','贵州','湖南'];
	var threeMonth = ['201809','201810','201811'];
	var grids = [];
	var xAxes = [];
	var yAxes = [];
	var series = [];
	var titles = [];
	var datas =[];
	var aGradeRates=[];
	var count = 0;

	var zh_month = new Array(3);
	var sitesnum = sitenames.length;
	
	for(var i=0; i<3; i++){
		var strmon = threeMonth[i].substring(4,6);
		var month = parseInt(threeMonth[i].substring(4));
		switch(month)
		{
			case 1: zh_month[i] = '一月';break;
			case 2: zh_month[i] = '二月';break;
			case 3: zh_month[i] = '三月';break;
			case 4: zh_month[i] = '四月';break;
			case 5: zh_month[i] = '五月';break;
			case 6: zh_month[i] = '六月';break;
			case 7: zh_month[i] = '七月';break;
			case 8: zh_month[i] = '八月';break;
			case 9: zh_month[i] = '九月';break;
			case 10: zh_month[i] = '十月';break;
			case 11: zh_month[i] = '十一月';break;
			case 12: zh_month[i] = '十二月';break;
			default: break;
		}
	}
	
	
	for(var i = 0; i < sitesnum; i++) {
		siteThreeMonthYield[i].ThreeMonthYield
		
	    var data = new Array(3);
	    var aGradeRate = new Array(3);
	    for(var j=0 ; j < 3; j++){
	    	data[j]=siteThreeMonthYield[i].ThreeMonthYield[j].yield*100;
	    	aGradeRate[j]=siteThreeMonthYield[i].ThreeMonthYield[j].agraderate*100;
	    }
	    if(i===0){
	        grids.push({
	            left:'4%',
	            show: true,
	            borderWidth: 0,
	            backgroundColor: '#fff',
	            shadowColor: 'rgba(0, 0, 0, 0.3)',
	            shadowBlur: 1,
	            height:'70%',
	            top:'20%',
	            
	            width: (1/sitesnum*(100-4))+'%',
	            //右边距right的位置：左边100先减去第一个左移的4%，再减去宽度 (1/sitesnum*(100-4))+'%'
	            right: ((100-4)-(1/sitesnum*(100-4)))+'%' 
	        });
	    }else{
	        grids.push({
	            left:((4)+(i)/sitesnum*(100-4))+'%',//除去第一个左边距的4%,剩余渐分都以96%进行分割
	            show: true,
	            borderWidth: 0,
	                backgroundColor: '#fff',
	                shadowColor: 'rgba(0, 0, 0, 0.3)',
	                shadowBlur: 1,
	                height:'70%',
	                top:'20%',
	                Width: (1/sitesnum*(100-4))+'%',
	              //右边距right的位置：左边100%先减去第一个左移的4%，再减去96%为起始的该grid的左边距(i/sitesnum*(100-4))，再减去宽度 (1/sitesnum*(100-4))+'%'
	                right:((100-4)-(i/sitesnum*(100-4))-(1/sitesnum*(100-4)))+'%'
	            });
	    }
	    titles.push({
	    	text:'根据区域的数量自动调整宽度'
            ,left:'0%'
            ,top:'6%'
	    });
	    var titleoffset = 1.5;//针对不同的现地因名字长度不一样，显示的位置会有些许差别，默认是两个字符如'B1'
	    if(sitenames[i].length==2) titleoffset=1.5;//两个字符
	    if(sitenames[i].length==3) titleoffset=2;//三个字符
	    if(sitenames[i].length==4) titleoffset=3;//四个字符
	    if(i==0){
	    	
	         titles.push({
	            text:sitenames[i],
	            left:(i/sitesnum*(100-4)+4)+(1/sitesnum*(100-4)/2-titleoffset)+'%',
	            top:'94%'
	        });
	    }else{
	        titles.push({
	            text:sitenames[i],
	            left:(i/sitesnum*(100-4)+4)+(1/sitesnum*(100-4)/2-titleoffset)+'%',
	            top:'94%'
	        });
	    }

	    xAxes.push({
	        gridIndex:i,
	            type : 'category',
	            data : zh_month,
	            axisTick: {
	                alignWithLabel: false
	            },
	            textStyle: {
	                fontSize: 20,
	                color: 'red'
	            },
	            axisLabel:{
	                show:true,
	                interval:0
	                
	            }
	    });
	    if(i==0){
	        yAxes.push({
	            gridIndex:i,
	            type : 'value',
	            interval:20,
	            max:120,
	            min:0,
	            axisTick:{
	                inside:true
	            },
	            axisLabel:{
	                show:true
	            },
	            name : '百分比 (%)',
	 	        axisLabel : {
	 	                formatter: '{value} '
	 	            },
	 	        position: 'left'
	        });
	    }else{
	        yAxes.push({
	            gridIndex:i,
	            type : 'value',
	            interval:20,
	            max:120,
	            min:0,
	            axisTick:{//坐标轴刻度线
	                show:false
	            },
	            axisLine:{
	                show:false
	            },
	            axisLabel:{
	                show:false
	            }
	        });
	    }
	    series.push({
	        xAxisIndex: i,
	        yAxisIndex: i,
	        name:'良率',
	        type:'line',
	        //barWidth: '60%',
	        data:data
	    });
	    series.push({
	        xAxisIndex: i,
	        yAxisIndex: i,
	        name:'A级率',
	        type:'line',
	        //barWidth: '60%',
	        data:aGradeRate
	    });
	    
	}
	
option = {
	    title:titles,
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    legend: {
	        data : ['良率','A级率'],
	        top:'10%'
	    },
	    toolbox: {
	        top: '10%',
	        show: true,
	        feature: {
	            dataZoom: {
	                yAxisIndex: 'none'
	            },
	            dataView: {readOnly: false},
	            magicType: {type: ['line','bar']},
	            restore: {title:'Refresh'},
	            saveAsImage: {title:'Save'}
	        }
	    },
	    grid : grids,
	    xAxis : xAxes,
	    yAxis : yAxes,
	    series : series
};

三、柱状图叠加合并

3.1 options设置

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    normal: {
                        type: 'dashed'
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            barWidth : 5,
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
  };

四、阶梯线图

4.1 options设置

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [450, 432, 401, 454, 590, 530, 510]
    }
  ]
};

五、阶梯瀑布图

5.1 说明

Apache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。
假设数据数组中的值是表示对前一个值的增减：
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];

也就是第一个数据是 900，第二个数据 345 表示的是在 900 的基础上增加了 345……
将这个数据展示为阶梯瀑布图时，
我们可以使用三个系列：
第一个是不可交互的透明系列，用来实现“悬空”的柱状图效果；
第二个系列用来表示正数；第三个系列用来表示负数。

5.2 option

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
  if (data[i] >= 0) {
    positive.push(data[i]);
    negative.push('-');
  } else {
    positive.push('-');
    negative.push(-data[i]);
  }

  if (i === 0) {
    help.push(0);
  } else {
    sum += data[i - 1];
    if (data[i] < 0) {
      help.push(sum + data[i]);
    } else {
      help.push(sum);
    }
  }
}

option = {
  title: {
    text: 'Waterfall'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: (function() {
      var list = [];
      for (var i = 1; i <= 11; i++) {
        list.push('Oct/' + i);
      }
      return list;
    })()
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      stack: 'all',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      data: help
    },
    {
      name: 'positive',
      type: 'bar',
      stack: 'all',
      data: positive
    },
    {
      name: 'negative',
      type: 'bar',
      stack: 'all',
      data: negative,
      itemStyle: {
        color: '#f33'
      }
    }
  ]
};

六、数据集（ dataset ）

6.1 说明

有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。

用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：

'column': 默认值。系列被安放到 dataset 的列上面。
'row': 系列被安放到 dataset 的行上面。

6.2 option

option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};

七、双向柱子

7.1 option

  var myData = ['一审服判息诉率', '撤诉率', '调解率', '实际执行率', '裁判自动履行率', '执行标的到位率', '再审审查率']
    var lineData = [100, 100, 100, 100, 100, 100, 100]
    var lastYearData = {
        1: [3, 20, 62, 34, 55, 65, 33]
    }
    var thisYearData = {
        1: [11, 38, 23, 39, 66, 66, 79]
    }
    var timeLineData = [1]
    var background = "#0e2147"; //背景 

    var option = {
        baseOption: {
            backgroundColor: background,
            timeline: {
                show: false,
                top: 0,
                data: []
            },
            legend : {
                top : '5%',
                left : '31%',
                itemWidth : 22,
                itemHeight : 22,
                itemGap: 343,
                icon : 'horizontal',
                textStyle : {
                    color : '#ffffff',
                    fontSize : 20,
                },
                data: ['2017', '2018']
            },
            grid: [{
                show: false,
                left: '5%',
                top: '10%',
                bottom: '8%',
                containLabel: true,
                width: '37%'
            }, {
                show: false,
                left: '51%',
                top: '10%',
                bottom: '8%',
                width: '0%'
            }, {
                show: false,
                right: '2%',
                top: '10%',
                bottom: '8%',
                containLabel: true,
                width: '37%'
            }],
            xAxis: [{
                type: 'value',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'top',
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }, {
                gridIndex: 1,
                show: false
            }, {
                gridIndex: 2,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'top',
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }],
            yAxis: [{
                type: 'category',
                inverse: true,
                position: 'right',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: myData
            }, {
                gridIndex: 1,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }

                },
                data: myData.map(function(value) {
                    return {
                        value: value,
                        textStyle: {
                            align: 'center'
                        }
                    }
                })
            }, {
                gridIndex: 2,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false

                },
                data: myData
            }],
            series: []

        },
        options: []
    }

    option.baseOption.timeline.data.push(timeLineData[0])
    option.options.push({
        series: [
        {
            type: 'pictorialBar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            symbol: 'rect',
            itemStyle: {
                normal: {
                    color: 'rgba(3,147,114,0.27)'
                }
            },
            barWidth: 10,
            symbolRepeat: true,
            symbolSize: 14,
            data: lineData,
            barGap: '-100%',
            barCategoryGap: 0,
            label: {
                normal: {
                    show: true,
                    formatter: (series) => {
                        return lastYearData[timeLineData[0]][series.dataIndex] + '%'
                    },
                    position: 'insideTopLeft',
                    textStyle:{
                        color: '#ffffff',
                        fontSize: 20,
                    },
                    offset: [0, -35],
                }
            },
            z: -100,
                animationEasing: 'elasticOut',
                 animationDelay: function (dataIndex, params) {
                return params.index * 30;
            }
        }, {
            name: '2017',
            type: 'pictorialBar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            symbol: 'rect',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#039372'
                }
            },
            symbolRepeat: true,
            symbolSize: 14,
            data: lastYearData[timeLineData[0]],
            animationEasing: 'elasticOut',
            animationDelay: function (dataIndex, params) {
                return params.index * 30 * 1.1;
            }
        },
        {
            type: 'pictorialBar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            symbol: 'rect',
            itemStyle: {
                normal: {
                    color: 'rgba(54,215,182,0.27)'
                }
            },
            barWidth: 10,
            symbolRepeat: true,
            symbolSize: 14,
            data: lineData,
            barGap: '-100%',
            barCategoryGap: 0,
            label: {
                normal: {
                    show: true,
                    formatter: (series) => {
                        return thisYearData[timeLineData[0]][series.dataIndex] + '%'
                    },
                    position: 'insideTopRight',
                    textStyle:{
                        color: '#ffffff',
                        fontSize: 20,
                    },
                    offset: [0, -35],
                }
            },
            z: -100,
                animationEasing: 'elasticOut',
                 animationDelay: function (dataIndex, params) {
                return params.index * 30;
            }
        }, {
            name: '2018',
            type: 'pictorialBar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            symbol: 'rect',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#36d7b6'
                }
            },
            symbolRepeat: true,
            symbolSize: 14,
            data: thisYearData[timeLineData[0]],
            animationEasing: 'elasticOut',
            animationDelay: function (dataIndex, params) {
                return params.index * 30 * 1.1;
            }
        }
        ]
    });

八、时间轴

8.1 option

var data = [];
var dataCount = 10;
var startTime = +new Date();
var categories = ['categoryA', 'categoryB', 'categoryC'];
var types = [
  { name: 'JS Heap', color: '#7b9ce1' },
  { name: 'Documents', color: '#bd6d6c' },
  { name: 'Nodes', color: '#75d874' },
  { name: 'Listeners', color: '#e0bc78' },
  { name: 'GPU Memory', color: '#dc77dc' },
  { name: 'GPU', color: '#72b362' }
];
// Generate mock data
categories.forEach(function (category, index) {
  var baseTime = startTime;
  for (var i = 0; i < dataCount; i++) {
    var typeItem = types[Math.round(Math.random() * (types.length - 1))];
    var duration = Math.round(Math.random() * 10000);
    data.push({
      name: typeItem.name,
      value: [index, baseTime, (baseTime += duration), duration],
      itemStyle: {
        normal: {
          color: typeItem.color
        }
      }
    });
    baseTime += Math.round(Math.random() * 2000);
  }
});
function renderItem(params, api) {
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 0.6;
  var rectShape = echarts.graphic.clipRectByRect(
    {
      x: start[0],
      y: start[1] - height / 2,
      width: end[0] - start[0],
      height: height
    },
    {
      x: params.coordSys.x,
      y: params.coordSys.y,
      width: params.coordSys.width,
      height: params.coordSys.height
    }
  );
  return (
    rectShape && {
      type: 'rect',
      transition: ['shape'],
      shape: rectShape,
      style: api.style()
    }
  );
}
option = {
  tooltip: {
    formatter: function (params) {
      return params.marker + params.name + ': ' + params.value[3] + ' ms';
    }
  },
  title: {
    text: 'Profile',
    left: 'center'
  },
  dataZoom: [
    {
      type: 'slider',
      filterMode: 'weakFilter',
      showDataShadow: false,
      top: 400,
      labelFormatter: ''
    },
    {
      type: 'inside',
      filterMode: 'weakFilter'
    }
  ],
  grid: {
    height: 300
  },
  xAxis: {
    min: startTime,
    scale: true,
    axisLabel: {
      formatter: function (val) {
        return Math.max(0, val - startTime) + ' ms';
      }
    }
  },
  yAxis: {
    data: categories
  },
  series: [
    {
      type: 'custom',
      renderItem: renderItem,
      itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data: data
    }
  ]
};

如果本文对你有帮助的话，请不要忘记给我点赞留言哈