echarts的区间图例实现方法

在项目过程中要实现数字区间的图例，例如  0-30  30-40……>75这种的图例，可以用以下方法：

    var option = {
        legend: {
            data: [point_name],//图例是站点名称,数据格式是数组
            right: 'center'
        },
        tooltip: {
            trigger: 'axis',
            formatter: "站点 : {a} 
时间 : {b} 
Leq : {c} dB(A) ",
            axisPointer:{
                type:'shadow'
            }
        },
        toolbox: {
            feature: {
                restore:{},
                saveAsImage: {
                    name:"历史数据查询"
                },
                dataZoom: {
                    yAxisIndex: 'none'
                }
            }
        },
        xAxis: {
            data: timeArr,
            type:'category',
            axisTick:{
                alignWidthLabel:true
            },
            splitLine: {
                show:true,
                lineStyle: {
                    color:'#ccc',
                    width:1
                }
            }
        },
        yAxis: {
            scale: true,
            name:'Leq (dB(A))',
            nameTextStyle:{
                fontSize:16,
                fontWeight:'bolder'
            }
        },
        //设置不同leq值不同显示颜色
        visualMap: {
            top: 24,
            x: 'center',
           /* min: 0,
            max: 100,
            splitNumber: 5,
            color: ['#d94e5d', '#eac736', '#50a3ba'],*/
            orient: 'horizontal',
            textStyle: {
                color: '#000'
            },
            pieces: [
                {
                    gt: 0,
                    lte: 30,
                    color: '#267300'
                },
                {
                    gt: 30,
                    lte: 35,
                    color: '#5E8C00'
                },
                {
                    gt: 35,
                    lte: 40,
                    color: '#A8A800'
                },
                {
                    gt: 40,
                    lte: 45,
                    color: '#C48300'
                },
                {
                    gt: 45,
                    lte: 50,
                    color: '#E04B00'
                },
                {
                    gt: 50,
                    lte: 55,
                    color: '#FF0000'
                },
                {
                    gt: 55,
                    lte: 60,
                    color: '#D41923'
                },
                {
                    gt: 60,
                    lte: 65,
                    color: '#A82236'
                },
                {
                    gt: 65,
                    lte: 70,
                    color: '#7D254A'
                },
                {
                    gt: 70,
                    lte: 75,
                    color: '#4F275E'
                },
                {
                    gt: 75,
                    color: '#002673'
                }
            ],
            outOfRange: {
                color: '#999'
            }
        },
        series: [{
            name: point_name,//数据格式是string
            data: leqArr,
            type: 'line',
            smooth:true,
            itemStyle: {
                normal: {
                    color: 'rgb(204, 46, 72)'
                }
            }
        }]
    }
    mychart = echarts.init(document.getElementById('his_chart'));
    mychart.setOption(option);

如上代码所示主要是设置visualMap中的pieces中的最大值、最小值、颜色即可。

最后实现效果图如下