BAIWebCS/WebVue/TaiHufenglang/src/components/charts/chart3.vue

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

const chart = ref();
onMounted(() => {    //加载图表
    chartInit()
})
function chartInit() {
    var myChart = echarts.init(chart.value);
    // 指定图表的配置项和数据
    var option = {
        grid: {
            left: '3%',
            right: '3%',
            top: '15%',
            bottom: '15%',  // 增加底部空间 
            containLabel: true
        },
        legend: {
            data: ['超警戒', '超保证'],  // 明确图例项
            textStyle: {
                fontSize: 12,           // 字体大小适配 
                color: '#fff'            // 字体颜色适配
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        dataset: {
            source: [
                ['类型', '超警戒', '超保证'],  // 列标题
                ['河道', 12, 4],              // 示例数据 
                ['大中型水库', 8, 2],         // 示例数据
                ['闸坝', 5, 1],              // 示例数据
                ['潮位', 9, 3]               // 示例数据 
            ]
        },
        xAxis: {
            type: 'category',
            data: ['河道', '大中型水库', '闸坝', '潮位'],  // 指定横轴项 
            axisLine: {
                lineStyle: {
                    color: '#00ffe4',  // 蓝色实线 
                    width: 2
                }
            },
            axisTick: {
                show: false  // 隐藏刻度线 
            }
        },
        yAxis: {
            type: 'value',
            name: '数量（个）',  // 纵轴标题 
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#00ffe4',  // 蓝色实线
                    width: 2
                }
            },
            splitLine: {
                show: false  // 去除网格线
            }
        },
        series: [
            {
                name: '超警戒',
                type: 'bar',
                itemStyle: {
                    color: '#0090ff'  // 蓝色 
                }
            },
            {
                name: '超保证',
                type: 'bar',
                itemStyle: {
                    color: '#FF4500'  // 红色
                }
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
</script>

<template>
    <div class="box" style="flex:0 1 33.33%;">
        <div class="title">超警超保统计</div>
        <div class="boxstyle">
            <div ref="chart" style="width: 100%; height:120%;top: 30px;bottom: 0px;"></div>
        </div>
    </div>
</template>

<style scoped></style>