Vue+ECharts 横向电量进度图

原创

已于 2024-08-16 15:50:22 修改 · 729 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #echarts

于 2024-08-16 15:42:06 首次发布

一、效果预览

二、代码

// 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: [
                        {