雪月圣雕 发表于 2021-4-21 07:51:17

风险统计图---》引入饼图数据库数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pie</title>
    <!--引入链接-->
    <script src="echarts.js"></script>
</head>
<body>
    <!--每个div单独占据一行，如果想要显示多个统计图，可以创建多个div-->
    <div id="main" style="height: 400px;width: 1024px;"></div>
    <div id="main2" style="height: 400px;width: 1024px;"></div>
    <script type="text/javascript">
      <?php
            //添加公共文件
            include_once 'mysql_public.php';
            //获取所有风险记录
            $sql_risk = "SELECT * FROM `trisk_list`";
            //获取结果集
            $res_risk = myerror($sql_risk);
            //获取结果集数据条数：多少行记录
            $rows_risk = mysqli_num_rows($res_risk);
            //利用while获取，每次取到数据之后判断保存数据的结果，只要结果不为false，那么一直取
            while($row_risk = mysqli_fetch_assoc($res_risk))
            {
                //获取风险统计数组
                $risks[] = $row_risk;
            }
            //echo '<pre>';
            //建立一个循环，修改每个风险记录的时间，只保留年份。
            for($index = 0; $index < $rows_risk; $index++)
            {
                //对日期部分进行分割，分割后返回的datetime为一个数组。
                $dateTime = explode('-',$risks[$index]['Record_time']);
                //令风险记录时间只保留年份
                $risks[$index]['Record_time'] = $dateTime;
            }
            //输出修改后的风险记录
            //var_dump($risks);

            //设计一个变量来接受各个年份的数据
            $RiskNum = array(
                '2019'=>array(
                  '高风险'=>0,
                  '中风险'=>0,
                  '低风险'=>0
                ),
                '2020'=>array(
                  '高风险'=>0,
                  '中风险'=>0,
                  '低风险'=>0
                ),
                '2021'=>array(
                  '高风险'=>0,
                  '中风险'=>0,
                  '低风险'=>0
                )
            );
            //记录不同年份的各个风险类型的数量。
            for($index = 0; $index < $rows_risk; $index++)
            {
                if((int)($risks[$index]['Record_time']) == 2019)
                {
                  if((int)($risks[$index]['Risk_type']) == 1)
                  {
                        $RiskNum['2019']['高风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 2)
                  {
                        $RiskNum['2019']['中风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 3)
                  {
                        $RiskNum['2019']['低风险']++;
                  }
                }
                else if((int)($risks[$index]['Record_time']) == 2020)
                {
                  if((int)($risks[$index]['Risk_type']) == 1)
                  {
                        $RiskNum['2020']['高风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 2)
                  {
                        $RiskNum['2020']['中风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 3)
                  {
                        $RiskNum['2020']['低风险']++;
                  }
                }
                else if((int)($risks[$index]['Record_time']) == 2021)
                {
                  if((int)($risks[$index]['Risk_type']) == 1)
                  {
                        $RiskNum['2021']['高风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 2)
                  {
                        $RiskNum['2021']['中风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 3)
                  {
                        $RiskNum['2021']['低风险']++;
                  }
                }
            }

            //输出风险数量数组
            //var_dump($RiskNum);

            //将php数组转为json格式
            $RiskNum_json = json_encode($RiskNum);
      ?>
      //引用该js文件后，该js文件需要获取外部数据
      var RiskNum_json = <?=$RiskNum_json?>;
      var RiskNum = eval(RiskNum_json);
      //color为此系列自己的调色盘
      //radius:饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
      //数据库传递过来的数据项是一个二维数组，如何处理？
      //解：将数组传递给data即可
      //value_1,表示高风险总数。以此类推。
      var value_1 = RiskNum['2019']['高风险']+RiskNum['2020']['高风险']+RiskNum['2021']['高风险'];
      var value_2 = RiskNum['2019']['中风险']+RiskNum['2020']['中风险']+RiskNum['2021']['中风险'];
      var value_3 = RiskNum['2019']['低风险']+RiskNum['2020']['低风险']+RiskNum['2021']['低风险'];
      var value_2019 = RiskNum['2019']['高风险']+RiskNum['2019']['中风险']+RiskNum['2019']['低风险'];
      var value_2020 = RiskNum['2020']['高风险']+RiskNum['2020']['中风险']+RiskNum['2020']['低风险'];
      var value_2021 = RiskNum['2021']['高风险']+RiskNum['2021']['中风险']+RiskNum['2021']['低风险'];
      var RiskData = [
            {value:value_1,name:"较大风险"},
            {value:value_2,name:"中风险"},
            {value:value_3,name:"低风险"},
      ];
      var RiskData2 = [
            {value:value_2019,name:"2019年风险数量"},
            {value:value_2020,name:"2020年风险数量"},
            {value:value_2021,name:"2021年风险数量"},
      ];

      //定位：如果使用center/middle等位置描述，需写成字符串格式,百分比也这么写:radius:'55%'。如果写绝对值，那么以number形式书写，单位是像数值(单位不用写)
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
            title: [{
                text: '风险统计图',
                left: "center"
            },{
                subtext: "风险类型占比",
                left: "18%",
                top: "75%",
                textAline:'center'
            },{
                subtext: "年度风险总量",
                left: "74%",
                top: "75%",
                textAline:'center'
            }],
            tooltip: {   
                trigger: 'item',
                //饼图： a:系列名，b:数据名,c:数值，d：百分比。
                //formatter，提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox:{
                show: true,
                feature: {
                  mark: {show: true},
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
            },
            legend: {
                data:['较大风险','中风险','低风险','2019年风险数量','2020年风险数量','2021年风险数量'],
                top:'10%',
            },
            series:[{
                name: "风险类型占比",
                color:['red','orange','blue'],
                type: "pie",
                radius: '35%',
                center:['50%','50%'],
                data: RiskData,
                right:'55%',
                left:0,
                top:0,
                buttom:0
            },{
                name: "年度风险总量",
                color:['red','orange','pink'],
                type: "pie",
                radius: '35%',
                data: RiskData2,
                left:'55%',
                right:0,
                top:0,
                buttom:0
            }]
      };
      myChart.setOption(option);
      // 处理点击事件并且弹出数据名称
      myChart.on('click', function (params) {
            alert(params.name);
      });
    </script>
    <script type="text/javascript">
      <?php
            //添加公共文件
            include_once 'mysql_public.php';
            //获取所有风险记录
            $sql_risk = "SELECT * FROM `trisk_list`";
            //获取结果集
            $res_risk = myerror($sql_risk);
            //获取结果集数据条数：多少行记录
            $rows_risk = mysqli_num_rows($res_risk);
            //利用while获取，每次取到数据之后判断保存数据的结果，只要结果不为false，那么一直取
            while($row_risk = mysqli_fetch_assoc($res_risk))
            {
                //获取风险统计数组
                $risks[] = $row_risk;
            }
            //echo '<pre>';
            //建立一个循环，修改每个风险记录的时间，只保留年份。
            for($index = 0; $index < $rows_risk; $index++)
            {
                //对日期部分进行分割，分割后返回的datetime为一个数组。
                $dateTime = explode('-',$risks[$index]['Record_time']);
                //令风险记录时间只保留年份
                $risks[$index]['Record_time'] = $dateTime;
            }
            //输出修改后的风险记录
            //var_dump($risks);

            //设计一个变量来接受各个年份的数据
            $RiskNum = array(
                '2019'=>array(
                  '高风险'=>0,
                  '中风险'=>0,
                  '低风险'=>0
                ),
                '2020'=>array(
                  '高风险'=>0,
                  '中风险'=>0,
                  '低风险'=>0
                ),
                '2021'=>array(
                  '高风险'=>0,
                  '中风险'=>0,
                  '低风险'=>0
                )
            );
            //记录不同年份的各个风险类型的数量。
            for($index = 0; $index < $rows_risk; $index++)
            {
                if((int)($risks[$index]['Record_time']) == 2019)
                {
                  if((int)($risks[$index]['Risk_type']) == 1)
                  {
                        $RiskNum['2019']['高风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 2)
                  {
                        $RiskNum['2019']['中风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 3)
                  {
                        $RiskNum['2019']['低风险']++;
                  }
                }
                else if((int)($risks[$index]['Record_time']) == 2020)
                {
                  if((int)($risks[$index]['Risk_type']) == 1)
                  {
                        $RiskNum['2020']['高风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 2)
                  {
                        $RiskNum['2020']['中风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 3)
                  {
                        $RiskNum['2020']['低风险']++;
                  }
                }
                else if((int)($risks[$index]['Record_time']) == 2021)
                {
                  if((int)($risks[$index]['Risk_type']) == 1)
                  {
                        $RiskNum['2021']['高风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 2)
                  {
                        $RiskNum['2021']['中风险']++;
                  }
                  else if((int)($risks[$index]['Risk_type']) == 3)
                  {
                        $RiskNum['2021']['低风险']++;
                  }
                }
            }

            //输出风险数量数组
            //var_dump($RiskNum);

            //将php数组转为json格式
            $RiskNum_json = json_encode($RiskNum);
      ?>
      //引用该js文件后，该js文件需要获取外部数据
      var RiskNum_json = <?=$RiskNum_json?>;
      var RiskNum = eval(RiskNum_json);
      //输出2019年高风险数据，测试传输成功与否
      //alert(RiskNum['2019']['高风险']);
      //legend:图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
      //legend,会在统计图顶部显示不同颜色的按钮。
      var myChart = echarts.init(document.getElementById('main2'));
      var option = {
            title:{text:"年度风险数量对比直方图",left:"center"},
            legend: {
                top:"7%",
                data:['高风险','中风险','低风险']
            },
            toolbox: {
                show :true,
                feature: {
                  dataView:{show:true,title:'数据视图',optionToContent:function(){
                        var table = '<table class="dataViewTable"><tbody><tr class="dataViewTr">'
                                  + '<td class="dataViewHead">' + 'year'+ '</td>'
                                  + '<td class="dataViewHead">' + '高风险' + '</td>'
                                  + '<td class="dataViewHead">' + '中风险' + '</td>'
                                  + '<td class="dataViewHead">' + '低风险' + '</td>'
                                  + '</tr>';
                        for(var index = 2019; index <= 2021; index++){
                            var year = index.toString();
                            table += '<tr class="dataViewTr">'
                                  + '<td class="dataViewTd">' + index + '</td>'
                                  + '<td class="dataViewTd">' + RiskNum['高风险'] + '</td>'
                                  + '<td class="dataViewTd">' + RiskNum['中风险'] + '</td>'
                                  + '<td class="dataViewTd">' + RiskNum['低风险'] + '</td>'
                                  + '</tr>';
                        }
                        table += '</tbody></table>';
                        return table;
                  }},
                  restore:{show:true},
                  magicType:{type:['bar','line']},
                  saveAsImage:{show:true}
                }
            },
            tooltip: {
            },
            xAxis:{
                type:'category',
                data: ['2019','2020','2021']   
            },
            yAxis:{
                type:'value'
            },
            dataset:{
                source:[
                  ['year','高风险','中风险','低风险'],
                  ['2019',RiskNum['2019']['高风险'],RiskNum['2019']['中风险'],RiskNum['2019']['低风险']],
                  ['2020',RiskNum['2019']['高风险'],RiskNum['2020']['中风险'],RiskNum['2020']['低风险']],
                  ['2021',RiskNum['2021']['高风险'],RiskNum['2021']['中风险'],RiskNum['2021']['低风险']],
                ]
            },
            series: [
                {
                  //name: '高风险',
                  type: 'bar',
                  // 根据stack的值来选取那些柱子堆叠在一起
                  stack: '风险等级',
                  color: 'red',
                  emphasis: {
                        focus: 'series'
                  },
                  //data: ,
                  barWidth: '25%'
                },
                {
                  //name: '中风险',
                  type: 'bar',
                  stack: '风险等级',
                  color: 'orange',
                  emphasis: {
                        focus: 'series'
                  },
                  //data: ,
                  barWidth: '25%'
                },
                {
                  //name: '低风险',
                  type: 'bar',
                  stack: '风险等级',
                  color: 'blue',
                  emphasis: {
                        focus: 'series'
                  },
                  //data: ,
                  barWidth: '25%'
                }
            ]
      };
      //把配置项给实例对象
      myChart.setOption(option);
    </script>
</body>
</html>

bool想学C 发表于 2021-4-21 08:45:29

厉害学习了{:10_279:}{:10_279:}{:10_279:}
页: [1]
查看完整版本: 风险统计图---》引入饼图数据库数据