C#+layui+Echarts实现散点图

项目场景:

C#+layui+Echarts实现散点图


问题描述

项目后端数据的处理前端渲染未显示


解决方案:

这个和我上一篇帖子折线图类似 也是看echarts需要什么数据后端直接处理
这是后端代码

 List<TempIndoorList> list = new List<TempIndoorList>();
 string sql;

 // 查询小区
 sql = string.Format(@"SELECT
                         village,
                         building,
                         unit,
                         room,
                         [TempIndoor]
                     FROM
                         [FHHistory].[dbo].[TempIn] Tl
                         LEFT JOIN FHJL.dbo.RoomInfo R ON Tl.RoomId= R.RoomId 
                         WHERE
                         Record_Time BETWEEN '{3}' 
                         AND DATEADD( HOUR, 1, '{3}' ) 
                         AND heatUnitID = {2} 
                         AND village = '{0}'", villageName, buildingName, companyID, startime);

正常编写sql然后是重要的数据处理
 

   foreach (DataRow row in dt.Tables[0].Rows)
   {
       bool lineflag = true;
       string buildingNames = row["building"].ToString() + "号楼";
       string values = row["building"].ToString() + "-"+ row["unit"].ToString() + "-" + row["room"].ToString();
       string tempIndoorValue = row["TempIndoor"].ToString();

       for (int i = 0; i < list.Count; i++) // 先轮询存曲线数值的数值,看是否存在该名称的数据,有就直接增加数据,没有就添加
       {
           if (list[i].value == buildingNames)
           {
               TempIndoorListPro datas = new TempIndoorListPro
               {
                   value = values,
                   num = tempIndoorValue
               };
               list[i].children.Add(datas);
               lineflag = false;
               break; // 找到对应的buildingName后可以退出循环
           }
       }

       if (lineflag) // 循环一遍没有对应的名称的数据则新增一条
       {
           TempIndoorList tempIndoorList = new TempIndoorList
           {
               value = buildingNames,
               children = new List<TempIndoorListPro>()
           };
           TempIndoorListPro data = new TempIndoorListPro
           {
               value = values,
               num = tempIndoorValue
           };
           tempIndoorList.children.Add(data);
           list.Add(tempIndoorList);
       }
   }
   return list;

这里数据处理的思路是将数据中名字相同的数据存到一个数组里首先第一个for循环为空直接存入一个数据 然后跳出去将这个数据存到实体类的list集合内 然后去第一个循环继续遍历名称这次第二个循环内由于第一次循环有了一条数据 第二次循环第一个for循环时就有了比对 如果名字相同存到一起 不相同重新存
最后实现的数据格式是这样的

然后是前端代码前端有点长 慢慢看 大概意思就是绑定渲染的id然后遍历这个集合将数据处理好放入到x轴和y轴处即可
 

function selectScatterPlot(startdate) {
    $.ajax({
        type: "post",
        url: "../AJAXHandler.ashx",
        data: {
            "Method": "GetTempIndoor", "villagename": villagename, "buildingname": buildingID, "UnitName": unitID, "RoomName": roomID, "startdate": startdate,
        },
        success: function (result) {
            const myChart = echarts.init(document.getElementById('demolists'));
            baseData = JSON.parse(result).data;
            // 清除之前的图表数据
            myChart.clear();
            const markLineOpt = {
                animation: false,
                label: {
                    formatter: '基准温度:18℃',
                    align: 'left'

                },
                lineStyle: {
                    normal: {
                        type: 'solid',
                        color: 'blue'
                    }
                },

                tooltip: {
                    trigger: 'item'
                    //formatter: '({c})'                    
                },
                data: [
                    [
                        {
                            coord: [0, 18],
                            symbol: 'none'
                        },
                        {
                            coord: [69, 18],
                            symbol: 'none'
                        }
                    ]
                ]
            };
            const dLength = baseData.map(item => item.children.length).reduce((n, m) => n + m) // x轴数据总长度,用于计算父级x轴的宽度
            let xData = []
            let yData = []
            let series = [{
                data: yData,
                markLine: markLineOpt,
                type: 'scatter',
                label: {
                    show: false
                },
                itemStyle: {
                    // 动态颜色
                    color: function (params) {
                        // params是当前点的数据信息
                        return params.data >= 24 ? '#E10700' : params.data >= 22 ? '#F06F69' : params.data >= 20 ? '#FFB800' : params.data >= 18 ? '#2AD856' : params.data >= 16 ? '#00FFF6' : '#1E9FFF';
                    }
                },

                xAxisIndex: 0,
                yAxisIndex: 0
            }, {
                    name: '24℃以上',
                    type: 'scatter',
                    datasetIndex: 1
                },
                {
                    name: '22~24℃',
                    type: 'scatter',
                    datasetIndex: 2
                },{
                    name: '20~22℃',
                    type: 'scatter',
                    datasetIndex: 3
                },{
                    name: '18~20℃',
                    type: 'scatter',
                    datasetIndex: 4
                },{
                    name: '16~18℃',
                    type: 'scatter',
                    datasetIndex: 5
                },{
                    name: '16~18℃',
                    type: 'scatter',
                    datasetIndex: 6
                },
                {
                    name: 'line',
                    type: 'line',
                    smooth: true,
                    datasetIndex: 3,
                    symbolSize: 0.1,
                    symbol: 'circle',
                    label: { show: true, fontSize: 16 },
                    labelLayout: { dx: -20 },
                    encode: { label: 2, tooltip: 1 }
                }]
            let baseObj = {
                data: [{
                    name: '',
                    value: 5
                }],
                label: {
                    show: true,
                    position: 'bottom',
                    formatter: '{b}',
                    offset: [0, 10],
                    textStyle: {
                        color: '#666'
                    }
                },
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                barGap: 0,
                barWidth: '',
                itemStyle: {
                    color: '#FFFFFF',
                    opacity: .9,
                    borderWidth: 2,
                    borderColor: 'rgba(180, 180, 180, 0.2)'
                },
                animationEasing: 'bounceOut',
                xAxisIndex: 1,
                yAxisIndex: 1
            }
            baseData.forEach((item, index) => {
                let pObj = JSON.parse(JSON.stringify(baseObj))
                pObj.data[0].name = item.value
                pObj.barWidth = item.children.length / dLength * 100 + '%'
                //    pObj.itemStyle.color = colorBg(index)
                series.push(pObj)
                console.log(series)
                console.log(series)
                console.log(series)
                item.children.forEach(cItem => {
                    xData.push({
                        value: cItem.value,
                        pName: item.value
                    })
                    yData.push(cItem.num)
                })
            })

            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [
                        { name: '24℃以上', itemStyle: { color: '#E10700' } },
                        { name: '22~24℃', itemStyle: { color: '#F06F69' } },
                        { name: '20~22℃', itemStyle: { color: '#FFB800' } },
                        { name: '18~20℃', itemStyle: { color: '#2AD856' } },
                        { name: '16~18℃', itemStyle: { color: '#00FFF6' } },
                        { name: '16℃以下', itemStyle: { color: '#1E9FFF' } },
                    ],
                    bottom: 10
                },

                grid: [{
                    top: 100,
                    bottom: 111
                },

                {
                    top: 100,
                    //height: 200,
                    bottom: 111,
                    tooltip: { show: false }
                }],
  
                xAxis: [{
                    type: 'category',
                    data: xData,
                    gridIndex: 0,
                    axisLabel: {
                        show: false,
                        color: '#000000'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#000000'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#000000'
                        }
                    },
                    templet: '#colorBar',
                    zlevel: 2
                }, {
                    type: 'category',
                    gridIndex: 1,
                    axisLine: { show: false },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    zlevel: 1
                }],
                yAxis: [{
                    type: 'value',
                    gridIndex: 0,
                    axisLabel: {
                        color: '#000000'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#000000'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#000000'
                        }
                    }
                }, {
                    type: 'value',
                    gridIndex: 1,
                    axisLabel: { show: false },
                    axisLine: { show: false },
                    splitLine: { show: false },
                    axisTick: { show: false }
                }],
                series
            })

           

        }
    });
}

此代码只提供大概思路仅供参考,结合实际去处理数据

相关推荐

  1. python绘制

    2024-07-21 01:02:03       36 阅读
  2. matlab绘制

    2024-07-21 01:02:03       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-21 01:02:03       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-21 01:02:03       116 阅读
  3. 在Django里面运行非项目文件

    2024-07-21 01:02:03       95 阅读
  4. Python语言-面向对象

    2024-07-21 01:02:03       103 阅读

热门阅读

  1. Flutter 状态管理调研总结

    2024-07-21 01:02:03       23 阅读
  2. Elasticsearch 使用terms对long类型日期统计按月销售

    2024-07-21 01:02:03       30 阅读
  3. 轮播图变成响应式数据

    2024-07-21 01:02:03       29 阅读
  4. 基于python实现医院信息管理系统的设计与实现

    2024-07-21 01:02:03       24 阅读
  5. 为什么人们致力于解决深度学习的黑箱模型?

    2024-07-21 01:02:03       26 阅读
  6. 什么是TCP

    2024-07-21 01:02:03       28 阅读
  7. Ubuntu64新安装时问题的解决

    2024-07-21 01:02:03       22 阅读