柱形图+折线图echarts 柱状配置项内容和展示

       var data = {
                XDatas: [1, 2, 3, 4, 5, 6, 7, 8],
                chargePile: [100, 200, 400, 200, 400, 100, 500, 200],
                home: [400, 100, 200, 100, 500, 600, 500, 200],
                es: [800, 100, 200, 100, 500, 200, 500, 200],
                price: [100, 100, 200, 100, 300, 200, 100, 200],
            };
            var barWidth = 25;
            var fontSize = 30;
            var fontColor = 'rgba(63,92,122,1)';
            var option = {
                color: ["rgb(21, 174, 206)", "rgb(128, 250, 254)", "rgb(75, 234, 95)", "rgb(97, 206, 113)", "rgb(255, 180, 0)"],
                tooltip: {
                    trigger: 'axis',
                    borderColor: '#43845D',
                    borderWidth: 1,
                    backgroundColor: 'rgba(11,42,89,0.3)',
                    borderRadius: 20,
                    padding: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: 30
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    itemWidth: 30,
                    itemHeight: 24,
                    textStyle: {
                        color: '#96A1A7',
                        fontSize: fontSize
                    },
                    data: [
                        'a', 'b', 'c', 'd', 'e'
                    ]
                },
                grid: {
                    left: '10%',
                    right: '4%',
                    bottom: '10%',
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: fontColor
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: fontColor,
                            fontSize: fontSize
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    data: data.XDatas
                }],
                yAxis: [{
                    type: 'value',
                    name: '单位:元',
                    nameTextStyle: {
                        fontSize: fontSize,
                        color: fontColor,
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: fontColor,
                            fontSize: fontSize
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: fontColor
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#11366e'
                        }
                    }
                }, {
                    type: "value",
                    name: '单位:元',
                    nameTextStyle: {
                        fontSize: fontSize,
                        color: fontColor,
                    },
                    position: "right",
                    splitLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        formatter: "{value} %", //右侧Y轴文字显示
                        textStyle: {
                            color: "#ebf8ac"
                        }
                    }
                }],
                series: [{
                    name: 'a',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: data.home
                }, {
                    name: 'b',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: data.es
                }, {
                    name: 'c',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: data.chargePile
                }, {
                    name: 'd',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: data.pv
                }, {
                    name: 'e',
                    type: 'line',
                    data: data.price,
                    label: {
                        normal: {
                            show: false,
                            position: 'top',
                            formatter: 'C',
                            textStyle: {
                                color: '#fff',
                                fontSize: fontSize
                            }
                        }
                    }
                }]
            };