Echarts在线免费图表

 
            let chartData = {
    xdata: ['01-01 01:00', '01-02 01:00', '01-03 01:00', '01-04 01:00', '01-05 01:00'],
    jslList: [80, 20, 30, 40, 50],
    skrlList: [100, 40, 30, 40, 70], 
};

const jslList = chartData.jslList || []
const skrlList = chartData.skrlList || []
 
const resultList = jslList.map((jslItem, index) => (jslItem || 0) + (skrlList[index] || 0)); 
const maxResult = resultList.reduce((max, current) => Math.max(max, current), -Infinity) + 20;
const color = [ 'rgba(36,241,228','rgba(139,170,44' ];

option = {
    backgroundColor:"#313131",
    tooltip: {
        trigger: 'axis', 
         axisPointer: {
            type: "shadow",
        },
        backgroundColor: "rgba(255,255,255,0.75)",
        extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
        textStyle: {
            fontSize: 14,
            color: "#000",
        },
    },
    grid: {
        top:  20,
        left: 40,
        right: 60,
        bottom: 20,
        containLabel: true,
    },
    xAxis: {  
        name: '',
        nameTextStyle: {
            color: 'rgb(250,250,250,.7)',
            fontSize: 12,
            padding: [0, 0, 0 , 10 ], 
        },
        position: 'bottom',
        data: chartData.xdata,
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.2)',
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.2)',
                type: 'solid',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'rgba(250,250,250,1)',
                fontSize: 12,
            },
        },
        data: chartData.xdata,
    },
    yAxis: [
        {   name: '水位',
            nameLocation:'center',
            nameRotate: 90, 
            nameTextStyle: { 
                color: color[0] + ')',
                fontSize: 14,
                fontWeight: 'bold',
                padding: [0, 0, 35 , 0 ], 
            },
            type: 'value',
            max: maxResult,
            inverse: true,
            color: '#fff',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                    type: 'dotted',
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                //  改变y轴颜色
                show: false,
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 12,
                },
            },
        },
        {   
            name: '水库库容', 
            nameLocation:'center',
            nameRotate: -90, 
            nameTextStyle: {
                color: color[1] + ')',
                fontSize: 14,
                fontWeight: 'bold',
                padding: [0, 0, 55 , 0 ], 
            },
            type: 'value',
            max: maxResult,
            color: '#fff',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                    type: 'dotted',
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                //  改变y轴颜色
                show: false,
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 12,
                },
            },
        },
    ],
    series: [
        { 
            type: 'line',   
            markLine: {
                symbol: 'none',
                label: {
                    show: true,
                    position: 'end',
                    formatter: '水位高警戒线 ' + '\n{c}',
                    color: '#eb4747',
                    fontSize: 12,
                    lineHeight: 20
                },
                lineStyle: {
                    type: 'dashed',
                    color: '#eb4747',
                    width: 1,
                },
                data: [
                    {
                        name: '刻度标线',
                        yAxis: 70,
                    },
                ]
            },
        }, { 
            type: 'line',   
            markLine: {
                symbol: 'none',
                label: {
                    show: true,
                    position: 'end',
                    formatter: '水位低警戒线 ' + '\n{c}',
                    color: '#04bf0f',
                    fontSize: 12,
                    lineHeight: 20
                },
                lineStyle: {
                    type: 'dashed',
                    color: '#04bf0f',
                    width: 1,
                },
                data: [
                    {
                        name: '刻度标线',
                        yAxis: 10,
                    },
                ]
            },
        },
        {
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 10,
            barGap: '-100%',
            color: color[0] + ')',
            data: chartData.jslList,
        },
        {
            type: 'bar',
            yAxisIndex: 1,
            barWidth: 10,
            color: color[1] + ')',
            data: chartData.skrlList,
        },
    ],
};