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);
    });