关于javascript:Echarts电量进度条Vue

效果图：

代码：

<template>
    <div class="chart" id="chart"></div>
</template>
<script>
    export default {
        name : "Bar",
        data() {return {};
        },
        mounted() {this.bar();
        },
        methods: {bar() {this.myChart = this.$echarts.init(document.getElementById("chart"));
                var data = [100, 200, 300];
                var titlename = ["苹果", "香蕉", "橙子"];
                var option = {
                    backgroundColor:"#17326b",// 如果设置图片背景，在外层 div 设置 css 款式
                    grid: {
                        left: "10",
                        top: "10",
                        right: "0",
                        bottom: "10",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "value",
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        axisTick: {show: false},
                        axisLine: {show: false},
                    },
                    yAxis: [
                        {
                            type: "category",
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {
                                color: "black",
                                fontSize: 12,
                                textStyle: {color: "#fff",},
                            },
                            data: titlename,
                            // max:10, 设置 y 刻度最大值，相当于设置总体行高
                            inverse: true,// 横向进度条的要害
                        },
                        {
                            type: "category",
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {
                                color: "black",
                                fontSize: 12,
                                textStyle: {color: "#fff",},
                            },
                            data: data,
                            // max:10,
                            inverse: true,
                        },
                    ],
                    series: [
                        {
                            name: "条",
                            type: "pictorialBar",
                            symbolRepeat: "fixed",
                            symbolMargin: 1,
                            symbol: "rect",// 外部类型（方块，圆，svg，base64 图片）symbolClip: true,
                            symbolSize: [6, 8],// 进度条的宽高
                            symbolOffset: [5,0],// 柱子的地位偏移
                            data: data,
                            z: 2,
                            // barCategoryGap:0,

                            itemStyle: {
                                normal: {
                                    barBorderRadius: 7,
                                    // 柱体的色彩
                                    // 右，下，左，上（1，0，0，0）示意从正右开始向左突变
                                    color: function (params) {//   console.log(params);
                                        var colorList = [["#02f0fe", "#02B8EC"],
                                            ["#02f0fe", "#02B8EC"],
                                            ["#02f0fe", "#02B8EC"],
                                            ["#02f0fe", "#02B8EC"],
                                            ["#02f0fe", "#02B8EC"],
                                        ];
                                        var colorItem = colorList[params.dataIndex];
                                        return new that.$echarts.graphic.LinearGradient(
                                            1,
                                            0,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 0,
                                                    color: colorItem[0],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colorItem[1],
                                                },
                                            ],
                                            false
                                        );
                                    },
                                },
                            },
                            zlevel: 1,
                        },
                        {
                            name: "进度条背景",
                            type: "bar",
                            barGap: "-100%",
                            barWidth:16,
                            symbolOffset: [5, 0],// 柱子的地位
                            data: [100, 100, 100],
                            color: "#2e5384",
                            itemStyle: {
                                normal: {barBorderRadius:4,},
                            },
                        },
                    ],
                };
                this.myChart.setOption(option);
                // 尺寸自适应
                window.addEventListener("resize", () => {this.myChart.resize();});

            },
        }
</script>
<style>
    .panel {
        height: 340px;
        background: rgba(255, 255, 255, 0.04);
        padding: 10px;
    }
</style>