master

分支 (1)

管理

管理

master

echarts-mockjs
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./mock.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
    <script>
      //输入与之匹配的请求 URL地址进行拦截
      //提供相应的模板进行数据的返回
      // Mock.mock("http://www.baidu.com/", "get", {
      //   name: "test",
      //   "age|20-200": 25,
      // });

      // $.ajax({
      //     get: 'get',
      //     url: 'http://www.baidu.com/',
      //     dataType: 'json',
      //     success: function (data) {
      //         console.log(data)
      //     }
      // })
    </script>

    <style>
      #btn {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div id="view" style="width: 1000px; height: 600px;"></div>
    <button id="btn">刷新</button>

    <script src="./echarts/echarts.js"></script>
    <script>
      Mock.mock("/api/echarts/list", "get", function () {
        return Mock.mock({
          "user|5-10": [
            {
              "id|+3": 10,
              name: "@cname()",
            },
          ],
        });
      });
    </script>

    <script>
      var myChart = echarts.init(document.getElementById("view"));
      var setT;
      $("#btn").click(() => {
        if (setT) {
          console.log("清除定时器---");
          clearInterval(setT);
        }
        setT = setInterval(function () {
          getEcharts(); // 发送请求
          console.log("定时器开启");
        }, 2000);
      });

      // 发送请求
      function getEcharts() {
        $.ajax({
          get: "get",
          url: "/api/echarts/list",
          dataType: "json",
          success: function (data) {
            var xData = [];
            var yData = [];
            var d = {};
            data.user.map(function (v) {
              xData.push(v.name);
              yData.push(v.id);
            });
            d = { xData: xData, yData: yData };
            setOpt(d); // 给echarts 传值
            console.log(d);
          },
        });
      }

      // 传值 渲染 echarts
      function setOpt(data) {
        myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: [
            {
              top: 100,
              bottom: 101,
            },
            {
              height: 60,
              bottom: 40,
            },
          ],
          xAxis: [
            {
              type: "category",
              data: data.xData,
              gridIndex: 0,
              axisLabel: {
                color: "#333",
              },
              axisLine: {
                lineStyle: {
                  color: "#e7e7e7",
                },
              },
              axisTick: {
                lineStyle: {
                  color: "#e7e7e7",
                },
              },
              zlevel: 2,
            },
            {
              type: "category",
              gridIndex: 1,
              axisLine: {
                show: false,
              },
              zlevel: 1,
            },
          ],
          yAxis: [
            {
              type: "value",
              gridIndex: 0,
              axisLabel: {
                color: "#333",
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#ccc",
                },
              },
              axisTick: {
                lineStyle: {
                  color: "#ccc",
                },
              },
            },
            {
              type: "value",
              gridIndex: 1,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              data: data.yData,
              type: "bar",
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#555",
                },
              },
              itemStyle: {
                normal: {
                  color: (params) => {
                    let colors = [
                      "#4150d8",
                      "#28bf7e",
                      "#ed7c2f",
                      "#f2a93b",
                      "#f9cf36",
                      "#4a5bdc",
                      "#4cd698",
                      "#f4914e",
                      "#fcb75b",
                      "#ffe180",
                      "#b6c2ff",
                      "#96edc1",
                    ];
                    return colors[params.dataIndex];
                  },
                },
              },
              xAxisIndex: 0,
              yAxisIndex: 0,
            },
            {
              data: [
                {
                  name: "贵阳市",
                  value: 1,
                },
              ],
              label: {
                show: true,
                position: "inside",
                formatter: "{b}",
                offset: [0, 10],
                textStyle: {
                  color: "#777",
                },
              },
              type: "bar",
              barGap: 0,
              barWidth: "27.2727%",
              itemStyle: {
                normal: {
                  color: "rgba(134,176,237, .5)",
                },
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              data: [
                {
                  name: "六盘水市",
                  value: 1,
                },
              ],
              label: {
                show: true,
                position: "inside",
                formatter: "{b}",
                offset: [0, 10],
                textStyle: {
                  color: "#777",
                },
              },
              type: "bar",
              barGap: 0,
              barWidth: "18.1818%",
              itemStyle: {
                normal: {
                  color: "rgba(40,191,126, .5)",
                },
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              data: [
                {
                  name: "遵义市",
                  value: 1,
                },
              ],
              label: {
                show: true,
                position: "inside",
                formatter: "{b}",
                offset: [0, 10],
                textStyle: {
                  color: "#777",
                },
              },
              type: "bar",
              barGap: 0,
              barWidth: "27.2727%",
              itemStyle: {
                normal: {
                  color: "rgba(237,124,47, .5)",
                },
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              data: [
                {
                  name: "安顺市",
                  value: 1,
                },
              ],
              label: {
                show: true,
                position: "inside",
                formatter: "{b}",
                offset: [0, 10],
                textStyle: {
                  color: "#777",
                },
              },
              type: "bar",
              barGap: 0,
              barWidth: "18.1818%",
              itemStyle: {
                normal: {
                  color: "rgba(242,169,59, .5)",
                },
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              data: [
                {
                  name: "铜仁市",
                  value: 1,
                },
              ],
              label: {
                show: true,
                position: "inside",
                formatter: "{b}",
                offset: [0, 10],
                textStyle: {
                  color: "#777",
                },
              },
              type: "bar",
              barCategoryGap: 0,
              barGap: 0,
              barWidth: "9.0909%",
              itemStyle: {
                normal: {
                  color: "rgba(249,207,54, .5)",
                },
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
          ],
        });
      }

      getEcharts(); // 发送请求
    </script>
  </body>
</html>