Vue+ECharts 横向电量进度图

一、效果预览

二、代码

// index.vue
<template>
    <v-scale-screen width="1920" height="1080">
        <div class="chartContainer">
             <electricity-horizontal-progress v-for="(li, k) in chart" :key="k" :ref="k+'chart'" :axis="li"></electricity-horizontal-progress>
        </div>
    </v-scale-screen>
</template>
<script>
import ElectricityHorizontalProgress from './modules/ElectricityHorizontalProgress.vue'
export default {
    components: {
        ElectricityHorizontalProgress
    },
    data () {
        return {
            chart: {
                sjyyqhsl: {
                    max: 40,
                    colors: ['#4DAFDD', '#2E6CCA'],
                    data: [
                        {
                            name: '数量',
                            value: 27
                        }
                    ]
                },
                sjyyqhbl: {
                    unit: '%',
                    max: 40,
                    colors: ['#4DAFDD', '#2E6CCA'],
                    data: [
                        {
                            name: '比例',
                            value: 27
                        }
                    ]
                },
                qzxyyqhsl: {
                    max: 50,
                    colors: ['#2E6CCA', '#854DDD'],
                    data: [
                        {
                            name: '数量',
                            value: 48
                        }
                    ]
                },
                qzxyyqhbl: {
                    unit: '%',
                    max: 50,
                    colors: ['#2E6CCA', '#854DDD'],
                    data: [
                        {
                            name: '比例',
                            value: 48
                        }
                    ]
                },
                yejyyqhsl: {
                    max: 60,
                    colors: ['#2E6CCA', '#4DDDC3'],
                    data: [
                        {
                            name: '数量',
                            value: 53
                        }
                    ]
                },
                yejyyqhbl: {
                    unit: '%',
                    max: 60,
                    colors: ['#2E6CCA', '#4DDDC3'],
                    data: [
                        {
                            name: '比例',
                            value: 53
                        }
                    ]
                }
            }
        }
    }
}
</script>
<style scoped lang="less">
    .chartContainer {
        margin-top: 50px;
        display: grid;
        grid-template-rows: 141px;
        grid-template-columns: repeat(2, 891px);
        row-gap: 70px;
        column-gap: 40px;
    }
</style>

// ElectricityHorizontalProgress.vue
<template>
    <div class="chart-box">
        <chart style="width: 100%; height: 100%;" :options="options" autoresize />
    </div>
</template>
<script>
import label_bg from "@/assets/images/ybyjqhjc/label_bg.svg"
import chart from "vue-echarts"

export default {
    components: {
        chart
    },
    props: {
        axis: {
            type: Object,
            required: true,
            default () {
                return {
                    unit: '',
                    max: 0,
                    data: [],
                    colors: []
                }
            }
        }
    },
    computed: {
        options () {
            return {
                tooltip: {
                    trigger: 'none'
                },
                grid: {
                    containLabel: true,
                    left: 35,
                    top: 20,
                    right: 90,
                    bottom: 0,
                },
                xAxis: {
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            padding: [0, 0, 85, -10],
                            inside: true,
                            textStyle: {
                                fontFamily: 'YouSheBiaoTiHei',
                                fontSize: 20,
                                color: '#B4FFFE'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        data: this.axis.data.map(d => {
                            return d.name;
                        })
                    }
                ],
                series: [
                    {
                        type: 'bar', //柱状图实现电量进度渐变效果
                        barWidth: 24,
                        legendHoverLink: false,
                        symbolRepeat: true,
                        silent: true,
                        label: {
                            normal: {
                                show: true,
                                position: ['100%', '100%'],
                                offset: [-5, 5],
                                padding: [15, 10, 5],
                                backgroundColor: {
                                    image: label_bg //实际电量值的蓝色背景图
                                },
                                fontFamily: 'PingFangSC-Medium',
                                fontSize: 19,
                                fontWeight: 500,
                                align: 'center',
                                color: '#FFF',
                                formatter: (parmas) => {
                                    return 'unit' in this.axis?`${parmas.value}${this.axis.unit}`:parmas.value;
                                }
                            }
                        },
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: this.axis.colors[0], // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: this.axis.colors[1], // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        animationEasing: 'elasticOut',
                        data: this.axis.data,
                        z: 1
                    },
                    { //象形柱图--背景，“满电”效果
                        type: 'pictorialBar',
                        symbol: 'rect',
                        symbolMargin: '4',
                        symbolSize: [8, 24],
                        symbolRepeat: 'fixed',
                        label: {
                            show: true,
                            position: 'right',
                            distance: 20, 
                            formatter: (parmas) => {
                                return 'unit' in this.axis?`${parmas.value}${this.axis.unit}`:parmas.value;
                            },
                            fontFamily: 'PingFangSC-Medium',
                            fontSize: 19,
                            fontWeight: 500,
                            color: '#B4FFFE'
                        },
                        itemStyle: {
                            normal: {
                                color: '#263A45'
                            }
                        },
                        animationEasing: 'elasticOut',
                        data: [this.axis.max],
                        z: 0
                    },
                    { //象形柱图--分隔
                        type: 'pictorialBar',
                        symbol: 'rect',
                        symbolMargin: '4',
                        symbolSize: [8, 24],
                        symbolOffset: [-8, 0],
                        symbolRepeat: 'fixed',
                        symbolClip: true,
                        symbolPosition: 'start',
                        itemStyle: {
                            color: '#061C46' //与横向电量进度图背景图片的颜色一致，实现柱状图被分割的效果，实现实际电量展示效果
                        },
                        animationEasing: 'elasticOut',
                        data: this.axis.data,
                        z: 2
                    }
                ]
            };
        }
    }
}
</script>
<style scoped lang="less">
    .chart-box {
        height: 141px;
        background-image: url("~@/assets/images/ybyjqhjc/electricity_horizontal_progress_bg.svg"); //横向电量进度图的背景图片
        background-size: cover;
        background-position: center center;
    }
</style>

四、代码中涉及到的图片

https://download.csdn.net/download/hrcsdn13/89645087 

部分样式代码未附，实际效果会有一点小出入。