jcxt_qd/src/components/admin/dataEchart.vue

<template>
<div>
    <div>
        <h2>监测任务统计</h2>
        <div id="monitor" style="width:100%;height:400px;">
    </div>
    </div>
    
    
</div>
      
</template>

<script>
export default {
    data(){
         return {
             monitorData:'',
             task_class:'例行监测'
        }
    },
    created(){

    },
    mounted() {
        this.stasticalTasks();
    },
    methods:{
        async stasticalTasks(){
            const result = await this.$http.post("stasticalTasks",{task_class}); 
            this.monitorData = this.result.data.data
        },
         stasticalTasks () {
//第一步：实例化对象
            const monitorChart = this.$echarts.init(document.getElementById('monitor'))
//第二步：指定配置项和数据            
            const monitorData = {
                //工具提示
                tooltip: { 
                    trigger: 'axis',//触发：轴
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效（鼠标悬停时候的样式）
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                //网格样式
                grid: {
                    left: '15%',//左边距
                    right: '15%',//右边距
                    bottom: '3%',//底边距
                    containLabel: true//是否包含标签
                },
                //x轴
                xAxis: [ 
                {
                    type: 'category',
                    data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
                    axisTick: {
                        alignWithLabel: true //轴刻度 --与标签对齐
                    },
                    axisLabel:{
                        fontSize:15
                    },
                    //不显示x坐标轴线
                    axisLine:{
                        show: false,
                    }
                }
                ],
                //y轴
                yAxis: [  
                {
                    type: 'value',
                }
                ],
                //
                series: [
                {
                    type: 'bar', // type值设置图表类型，bar为柱状图
                    barWidth: '30%', // 柱形的宽度
                    data: [10, 52, 200, 334, 390 ],
                    showBackground: true,//是否显示背景色
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
      }
                }
                ]
            }
//第三步：把配置项给实例对象
      monitorChart.setOption(monitorData)
    }
    }
  

}
</script>
<style>
    h2{
        /* margin: 0 auto; */
        display: flex;
        justify-content: center;;
    }
</style>