ajax+json模拟一个页面多个统计图数据交互-阿里云开发者社区

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>五分钟上手饼图</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="page-container">
      <!-- 统计图模块   -->
      <div class="row">
        <div class="col-md-12  col-sm-12  col-xs-12">
          <!-- 左侧饼图 -->
          <div class="col-md-2  col-sm-2  col-xs-2" style="width: 21%">
            <div class="charts2">
              <div id="main1" style="height: 180px;"></div>
            </div>
          </div>
          <!-- 右侧统计图 -->
          <div class="col-md-5  col-sm-5  col-xs-5" style="width: 39%;">
            <div class="charts4">
              <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
              <div id="main" style="width: 500px; height: 200px;"></div>
            </div>
            <div class="charts5">
              <div id="main2" style="width: 500px; height: 200px;"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12  col-sm-12  col-xs-12 charts6">
            <div id="main3" style="width: 500px;height: 200px;"></div>
          </div>
        </div>
        <!-- 底部统计图 -->
        <div class="col-md-12  col-sm-12  col-xs-12  bottom">
          <div class="col-md-7  col-sm-7  col-xs-7  charts7">
            <div id="main4" style=" height: 200px;"></div>
          </div>
          <div class="col-md-5  col-sm-5  col-xs-5  charts8">
            <div id="main5" style="width: 600px; height: 200px;"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $.ajax({
        url: "test.json",
        data: {},
        type: 'GET',
        success: function(data) {
          alert(JSON.stringify(data))
          aFun(data.echatX, data.echatY);
          bFun(data);
          cFun(data.echatX, data.echatY);
          dFun(data.echatX, data.echatY);
          eFun(data.echatX, data.echatY);
          fFun(data.echatX, data.echatY);
        },
      });
      // =============右上侧柱状图==============
      var aChart = echarts.init(document.getElementById('main'));
      function aFun(x_data, y_data) {
        // 指定图表的配置项和数据
        aChart.setOption({
          title: {},
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            /* 改变x轴颜色 */
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 5,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [{
            name: '巡检达标率',
            type: 'bar',
            // 设置柱状图大小
            barWidth: 20,
            // 设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#1268f3" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#08a4fa" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#01ccfe" // 100% 处的颜色
                }], false)
              }
            },
            data: y_data,
          }]
        });
      }
      // ==============左侧饼状图==============
      var bChart = echarts.init(document.getElementById('main1'));
      function bFun(param) {
        // 指定图表的配置项和数据
        bChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [{
            name: '统计人数',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                }
              }
            },
            data: [
              /* { value: 12, name: '管理', itemStyle: { color: '#5f4b9c' } },
                { value: 3, name: '炼钢工', itemStyle: { color: '#2e73ba' } },
                { value: 4, name: '操作工', itemStyle: { color: '#7aa83a' } },*/
              {
                value: param.peopleOutline,
                name: '在线',
                itemStyle: {
                  color: '#005eff'
                }
              },
              { value: param.peopleOnline, name: '离线', itemStyle: { color: '#ff9194' } },
            ]
          }]
        });
      }
      // ==============右上侧第二个折线图==============
      // 基于准备好的dom，初始化echarts实例
      var cChart = echarts.init(document.getElementById('main2'));
      function cFun(x_data, y_data) {
        // 指定图表的配置项和数据
        cChart.setOption({
          title: {
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['近七日收益']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            type: 'category',
            boundaryGap: false,
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 5,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [
            {
              name: '',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#0e4b7a" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "#0d3f70" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "#0c3367" // 100% 处的颜色
                  }], false)
                }
              },
              stack: '总量',
              data: y_data
            }
          ]
        });
      }
      // ==============中间满屏折线图==============
      // 基于准备好的dom，初始化echarts实例
      var dChart = echarts.init(document.getElementById('main3'));
      // 指定图表的配置项和数据
      function dFun(x_data, y_data) {
        dChart.setOption({
          title: {
            left: 'left',
            text: '概率',
            show: false
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{a}:{c}',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            show: false,
            top: '30',
            bottom: '60',
            right: '60',
            left: '60'
          },
          legend: {
            show: true,
            selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
            bottom: 10,
            left: 50,
            textStyle: {
              color: '#666',
              fontSize: 12
            },
            itemGap: 20,
            data: ['设备一', '设备二', '设备三'],
            inactiveColor: '#ccc'
          },
          xAxis: {
            splitLine: {　　　　 show: false　　 },
            type: 'category',
            data: x_data,
            axisPointer: {
              type: 'shadow'
            },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            axisTick: {
              show: true,
              interval: 0
            },
          },
          // 设置两个y轴，左边显示数量，右边显示概率
          yAxis: [{
              splitLine: {　　　　 show: false　　 },
              type: 'value',
              name: '数量',
              max: 1000,
              min: 0,
              show: true,
              interval: 500,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                }
              },
            },
            // 右边显示概率
            {
              splitLine: {　　　　 show: false　　 },
              type: 'value',
              name: '概率',
              min: 0,
              max: 100,
              interval: 10,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                }
              },
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
          series: [{
              name: '设备一',
              type: 'bar',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#0e4b7a" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "#0d3f70" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "#0c3367" // 100% 处的颜色
                  }], false)
                }
              },
              data: y_data,
              barWidth: '50%',
            },
            {
              name: '设备一',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
              data: y_data,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: "#DDA0DD"
                }
              }
            },
          ]
        });
      }
      // ==============底部第一个折线图==============
      // 基于准备好的dom，初始化echarts实例
      var eChart = echarts.init(document.getElementById('main4'));
      // 指定图表的配置项和数据
      function eFun(x_data, y_data) {
        eChart.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['近七日收益']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            type: 'category',
            boundaryGap: false,
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 10,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [
            {
              name: '近七日收益',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#0e4b7a" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "#0d3f70" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "#0c3367" // 100% 处的颜色
                  }], false)
                }
              },
              stack: '总量',
              data: y_data,
            }
          ]
        });
      }
      // ==============底部柱状图==============
      var fChart = echarts.init(document.getElementById('main5'));
      // 指定图表的配置项和数据
      function fFun(x_data, y_data) {
        fChart.setOption({
          title: {
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 10,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [{
            name: '巡检达标率',
            type: 'bar',
            // 设置柱状图大小
            barWidth: 20,
            // 设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#e12251" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#df635a" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#e79363" // 100% 处的颜色
                }], false)
              }
            },
            data: y_data,
          }]
        });
      }
    </script>
  </body>
</html>

test.json

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        0,
        10,3,43,5,47,8,39,0,1
    ],
    "echatY2": [
        0
    ],
    "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}

ajax+json模拟一个页面多个统计图数据交互

热门文章

最新文章

相关课程

相关电子书