河流图echarts themeRiver配置项内容和展示

河流图基本配置

      const colorArr = ['rgba(20, 255, 141,0.6)', 'rgba(255, 99, 14, 0.6)', 'rgba(253, 189, 20, 0.6)', 'rgba(38, 126, 245, 0.6)', 'rgba(126, 61, 48, 0.6)'];

option = {
    title: {
        text: '河流图',
        textStyle: {
            color: 'rgba(108, 177, 184, 0.85)'
        }
    },
    singleAxis: {
        type: 'time',
        bottom: '15%',
        formatter: val => {
            console.log(val)
        },
        axisLabel: {
            color: 'rgba(108, 177, 184, 0.8)',
            rotate: 45,
        },
        axisTick: {
            show: true,
            length: 4,
            inside: true,
            lineStyle: {
                width: 2,
                color: 'rgba(108, 177, 184, 0.8)',
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(108, 177, 184, 0.8)'
            }
        }
    },
    tooltip: {
        show: true
    },
    legend: {
        show: true,
        icon: 'circle'
    },
    series: [{
        type: 'themeRiver',
        name: '河流图',
        boundaryGap: ['10%', '10%'],
        label: {
            show: false,
            color: '#0ff',
            fontSize: 22,
            fontWeight: 600,
            position: 'center',
        },
        labelLine: {
            show: true,
        },
        itemStyle: {
            color: val => {
                if (val.data[2] === 'SS') {
                    return colorArr[0]
                } else if (val.data[2] === 'DQ') {
                    return colorArr[1]
                }
                return colorArr[2];
            },
            borderColor: '#fff',
            borderWidth: 3,
        },
        data: [
            ['2015/11/08', 10, 'DQ'],
            ['2015/11/09', 15, 'DQ'],
            ['2015/11/10', 35, 'DQ'],
            ['2015/11/11', 38, 'DQ'],
            ['2015/11/12', 22, 'DQ'],
            ['2015/11/13', 16, 'DQ'],
            ['2015/11/14', 7, 'DQ'],
            ['2015/11/15', 2, 'DQ'],
            ['2015/11/16', 17, 'DQ'],
            ['2015/11/17', 33, 'DQ'],
            ['2015/11/18', 40, 'DQ'],
            ['2015/11/19', 32, 'DQ'],
            ['2015/11/20', 26, 'DQ'],
            ['2015/11/21', 35, 'DQ'],
            ['2015/11/22', 40, 'DQ'],
            ['2015/11/23', 32, 'DQ'],
            ['2015/11/24', 26, 'DQ'],
            ['2015/11/25', 22, 'DQ'],
            ['2015/11/26', 16, 'DQ'],
            ['2015/11/27', 22, 'DQ'],
            ['2015/11/28', 10, 'DQ'],
            ['2015/11/08', 35, 'TY'],
            ['2015/11/09', 36, 'TY'],
            ['2015/11/10', 37, 'TY'],
            ['2015/11/11', 22, 'TY'],
            ['2015/11/12', 24, 'TY'],
            ['2015/11/13', 26, 'TY'],
            ['2015/11/14', 34, 'TY'],
            ['2015/11/15', 21, 'TY'],
            ['2015/11/16', 18, 'TY'],
            ['2015/11/17', 45, 'TY'],
            ['2015/11/18', 32, 'TY'],
            ['2015/11/19', 35, 'TY'],
            ['2015/11/20', 30, 'TY'],
            ['2015/11/21', 28, 'TY'],
            ['2015/11/22', 27, 'TY'],
            ['2015/11/23', 26, 'TY'],
            ['2015/11/24', 15, 'TY'],
            ['2015/11/25', 30, 'TY'],
            ['2015/11/26', 35, 'TY'],
            ['2015/11/27', 42, 'TY'],
            ['2015/11/28', 42, 'TY'],
            ['2015/11/08', 21, 'SS'],
            ['2015/11/09', 25, 'SS'],
            ['2015/11/10', 27, 'SS'],
            ['2015/11/11', 23, 'SS'],
            ['2015/11/12', 24, 'SS'],
            ['2015/11/13', 21, 'SS'],
            ['2015/11/14', 35, 'SS'],
            ['2015/11/15', 39, 'SS'],
            ['2015/11/16', 40, 'SS'],
            ['2015/11/17', 36, 'SS'],
            ['2015/11/18', 33, 'SS'],
            ['2015/11/19', 43, 'SS'],
            ['2015/11/20', 40, 'SS'],
            ['2015/11/21', 34, 'SS'],
            ['2015/11/22', 28, 'SS'],
            ['2015/11/23', 26, 'SS'],
            ['2015/11/24', 37, 'SS'],
            ['2015/11/25', 41, 'SS'],
            ['2015/11/26', 46, 'SS'],
            ['2015/11/27', 47, 'SS'],
            ['2015/11/28', 41, 'SS'],
        ],
    }],
};