echarts 环形图动态数据

功能需求:统计水井工作状态占比,并已环形图的形式,展示动态数据
在这里插入图片描述

工作状态分为在线和不在线,在线为1,不在线为0

后端代码

controller

/**
     * 水井占比
     * */
    @RequiresPermissions("sjgg:aaa:sjlist")
    @GetMapping("/sjlist")
    @ResponseBody
    public List sjtongji(SjWell sjWell){

        List<SjWell> selectsjtongji = sjWellService.selectsjtongji(sjWell);

        return selectsjtongji;
    }

service

  /**
     * 水井占比
     */
    List<SjWell> selectsjtongji(SjWell sjWell);

serviceimpl

 /**
     * 水井占比统计
     */
    @Override
    public List<SjWell> selectsjtongji(SjWell sjWell) {
        return sjWellMapper.selectsjtjzb(sjWell);
    }

mapper

 /**
      * 水井占比统计
      * */
    List<SjWell> selectsjtjzb(SjWell sjWell);

mapperxml

<select id="selectsjtjzb" resultType="String">
        select count(*)work_status from sj_well GROUP BY work_status
    </select>

页面代码

1先创建一个div 设置好一个容器

<div id="charts4" class="sideLine rightChart x12 mb20"></div>

2创建<script></script>将下列代码放入

fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象

fetch("/sjgg/indexa/sjlist").then(response => response.json()).then(res => {
        // [{
        //     name:"在线",
        //     value:"2"
        // },{
        //     name:"不在线",
        //     value:"1"
        // }]
        // ["2","1"]
        let myChart = echarts.init(document.getElementById('charts4'));
        let option = {
            title: {//标题
                text: '水井占比图',
                textStyle: {
                    fontSize: 20,
                    color: '#fff'
                },
                left: 'center',
                top: '5%'
            },
            color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
            grid: {
                top: '0',
                left: '0',
                right: '0',
                bottom: '0'
            },
            tooltip: {
                show: false,
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
                show: false,

            },
            legend: {
                type: "scroll",
                orient: 'vertical',
                right: '3%',
                align: 'left',
                top: 'middle',
                textStyle: {
                    color: '#eee'
                },
                height: 150
            },
            series: [{
                name: '',
                type: 'pie',
                radius: [50, 75],
                center: ["35%", "50%"],
                //后台数据    parseInt() 函数可解析一个字符串,并返回一个整数
                data: [{value:parseInt(res[0]),name:"不在线"},{value:parseInt(res[1]),name:"在线"}]
            }]
        };

     
        console.log(option)
        myChart.setOption(option, true);
    });

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值