image.png

1、html代码

 <div id="barChart" style="width: 100%; height: 200px"></div>

2、options配置

 setBarChart() {
            // 指定图表的配置项和数据
            // 基于准备好的dom，初始化echarts实例
            let self = this;
            let xDatas = ["蒙惠", "鲜尔美", "香甜", "厨篮网", "汝锦", "晶郁"];
            let yDatas = ["600", "900", "1500", "1300", "700", "1200"];
          
            var myChart = this.$echarts.init(document.getElementById("barChart"));
            var option = {
                backgroundColor: '#00000000',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b0}: {c0}',
                    backgroundColor: "#b3000000",
                    borderColor: "#00000000",
                    textStyle: {
                        color: '#b3ffffff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                label: {
                    show: false,
                    position: 'top'
                },
                legend: {
                    show: false,
                    data: ['line', 'bar'],
                    textStyle: {
                        color: '#ccc',
                        fontSize: 10
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        textStyle: {
                            color: '#BABABC',
                            fontSize: 10
                        },
                        interval: 0,//代表显示所有x轴标签显示
                    },
                    axisLine: {
                        //x轴线的颜色以及宽度
                        show: true,
                        // lineStyle: {
                        //     color: '#0e96b0',
                        //     width: 1,
                        //     type: 'solid'
                        // }
                    },
                    splitLine: {
                        //分割线配置
                        show: false,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    // boundaryGap: [0, 0.008],
                    data: xDatas
                },
                yAxis: {
                    axisLine: {
                        //x轴线的颜色以及宽度
                        show: false,
                        lineStyle: {
                            color: '#0e96b0',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#BABABC',
                            fontSize: 10
                        }
                    },
                    splitLine: {
                        show: true, //隐藏或显示
                        lineStyle: {
                            type: "dotted", //设置网格线类型 dotted：虚线   solid:实线
                            color: "rgba(255, 255, 255, 0.1)"
                        },
                    },
                },
                series: [
                    {
                        name: 'line',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 15,
                        itemStyle: {
                            color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: '#003792' },
                                { offset: 0.5, color: '#036aa4' },
                                { offset: 1, color: '#08c9c4' }
                            ])
                        },
                        z: 10,
                        data: yDatas
                    },
                    {
                        type: 'pictorialBar',
                        symbol: 'rect',
                        itemStyle: {
                            color: '#0f164a'
                        },
                        label: {
                            show: false,
                            position: 'top'
                        },
                        symbolRepeat: true,
                        symbolSize: [16, 2],
                        symbolMargin: 3,
                        z: 12,
                        data: yDatas
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);
        },