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
    评论
要在 Echarts 中显示环形,需要使用 Echarts 的饼(pie)组件,然后设置饼的类型为环形(type: 'pie',roseType: 'radius'),并设置相关的数据和样式。 以下是一个简单的示例代码,可以将其放入 HTML 页面中查看效果: ```html <div id="chart" style="width: 600px; height: 400px;"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script> <script> // 初始化 Echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 设置饼的类型为环形 var option = { title: { text: '环形示例', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, series: [ { name: '数据名称', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '数据1'}, {value: 310, name: '数据2'}, {value: 234, name: '数据3'}, {value: 135, name: '数据4'}, {value: 1548, name: '数据5'} ] } ] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); </script> ``` 在上面的示例代码中,我们设置了一个环形的样式,并设置了一些数据,如数据名称、数值和数据名称。在实际使用中,可以根据需求修改数据和样式,以满足具体的展示需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值