Echarts折线图+柱状图+折线图堆叠展示

timearray=[1672209600, 1672209660]时间戳数列,此处举例数据自行补充
data1= [8957120, 8964520]此处举例数据自行补充
data2= [8957120, 8964520]此处举例数据自行补充

若还需要其他图,则yAxis控制显示两个y轴显示,legend和series对应增加图形数据

option = {
    
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }
    },
    legend: {
        data:["整机流量", "CPU温度"]
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
   

xAxis: [
                            {
                                type: 'category',
                                boundaryGap: true,
                                data: timearray,
                                axisLabel: {
                                    formatter: function (value) {
                                        return new Date(value*1000).format("HH:mm")
                                    }
                                }
                            }
                        ],
yAxis : [
                        {
                            type: 'value',
                            scale: true,
                            name: "",
                            min: 0,
                            boundaryGap: [0.2, 0.2],
                            axisLabel: {
                                formatter: function (value) {
                                    let showValue1 = ""
                                    showValue1 = unit_converter(value, "B", 2)

                                    return showValue1
                                }
                            }
                        },
                        {
                            type: 'value',
                            scale: true,
                            name: "",
                            min: 0,
                            boundaryGap: [0.2, 0.2],
                            axisLabel: {
                                show: unit1==unit2?false:true,
                                formatter: function (value) {
                                    let showValue2 = ""
                                    showValue2 = unit_converter(value, "B", 2)
                                    return showValue2
                                }
                            },
                            splitLine:{
                                show:false
                            }
                        }
                    ]
series = [{
                                    name:"整机流量",
                                    type:"line",
                                    symbol: "none",
                                    smooth: true,
                                    smoothMonotone:'x',
                                    lineStyle: { width: 0 },
                                    areaStyle: {
                                        opacity: 0.8,
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgb(128, 255, 165)' },
                                        { offset: 1, color: 'rgb(1, 191, 236)' }
                                        ])
                                    },
                                    yAxisIndex: 0,
                                    data:data1,
                                    barGap:'0%'
                                },
                                {
                                    name: "CPU温度",
                                    type:"bar",
                                    symbol: "none",
                                    yAxisIndex: 1,
                                    data:data2,
                                    barGap:'0%'
                                }]


};

猜你喜欢

转载自blog.csdn.net/xiansibao/article/details/128469221