【echarts】柱图+折线图

// 数据项
powerUse: {
    realTime: [1, 2, 4, 6],
    history: [9, 9, 3, 4],
    dataX: ['2时', '4时', '6时']
}

drawChart2() {
    let myChartContainer4 = document.getElementById("chartContainer2");
    if (myChartContainer4) {
        this.echart2 = this.$echart.init(myChartContainer4);
        let e2Data = this.powerUse;
        // e2Data.dataX = this.get24Hour();

        let points = [];// 描点路径(转换数据)
        let hightLine = [];
        if (e2Data.realTime.length) {
            e2Data.realTime.forEach(function (value, index) {
                points.push([index, value]);
            });
            hightLine = [{ coords: points }];
        } else {
            hightLine = [];
        }

        this.echart2.setOption({
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: [
                    {
                        name: "实时负荷",
                        icon: "line"
                    },
                    {
                        name: "历史均值",
                        icon: "rect"
                    }
                ],
                itemHeight: 8,
                itemWidth: 15,
                top: 0,
                right: "2%",
                textStyle: {
                    color: "#1E3765"
                }
            },
            grid: {
                left: "3%",
                right: "3%",
                bottom: 5,
                top: 30,
                containLabel: true
            },
            toolbox: {
                show: false
            },
            xAxis: {
                type: "category",
                // boundaryGap: true, //X轴不从零开始
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#2C89AD" //轴线的颜色
                    }
                },
                axisLabel: {
                    color: "#1E3765"
                },
                data: e2Data.dataX,
            },
            yAxis: {
                name: "单位/kW·h",
                nameGap: 10,
                nameTextStyle: {
                    color: "#4473A4",
                    padding: [3, 4, 5, 20]
                },
                type: "value",
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ["#2C89AD"], //网格线的颜色
                        type: "dashed",
                        width: 0.5
                    }
                },
                axisLine: {
                    show: "true",
                    lineStyle: {
                        color: "#00A8DD" //Y轴的颜色
                    }
                },
                axisLabel: {
                    color: "#4473A4"
                }
            },
            series: [
                {
                    name: "历史均值",
                    type: "bar",
                    barWidth: 15,
                    itemStyle: {
                        color: new this.$echart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: "#4BDDBB" },
                                { offset: 1, color: "#3DA4FF" }
                            ], false
                        ),
                        barBorderRadius: [0, 0, 5, 5],
                        label: {
                            show: false,
                            position: "top"
                        }
                    },
                    data: e2Data.history
                },
                {
                    name: "历史均值",// top
                    type: "pictorialBar",
                    tooltip: { show: false },
                    symbolSize: [15, 10],
                    symbolOffset: [0, -5],
                    symbolPosition: "end",
                    color: "#4BDDBB",
                    z: 12,
                    data: e2Data.history
                },
                {
                    name: "实时负荷",
                    type: "line",
                    z: 14,
                    areaStyle: {
                        color: new this.$echart.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: "rgba(255,155,0, 0.3)" },
                                { offset: 1, color: "rgba(255,155,0, 0)" }
                            ], false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 5
                    },
                    itemStyle: {
                        color: "rgb(255,155,0)",
                        borderColor: "rgba(255,155,0,0.2)",
                        borderWidth: 6
                    },
                    data: e2Data.realTime
                },
                {
                    coordinateSystem: "cartesian2d",
                    name: "实时负荷",
                    type: "lines",
                    zlevel: 2,
                    polyline: true,
                    effect: {
                        show: true,
                        period: 15,
                        trailLength: 0.5, // 线的小尾巴
                        symbolSize: 5,
                        color: "#fff",
                        loop: true
                    },
                    lineStyle: {
                        width: 0.01
                    },
                    silent: true,
                    data: hightLine
                }
            ]
        });
    }
},