echarts实现通用大数据可视化看板大屏效果代码-html代码-BFW代码库

echarts实现通用大数据可视化看板大屏效果代码

代码语言：html

所属分类：其他

代码描述：echarts实现通用大数据可视化看板大屏效果代码，地图数据实时变动，有交互动画。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echart-china.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
      $(".loading").fadeOut()
  });
  $(function() {
      a();
      b();
      c();
      d();

      function a() {
          var e = echarts.init(document.getElementById("echart1"));
          option = {
              tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series: [{
                  name: "占比情况",
                  type: "pie",
                  radius: "50%",
                  center: ["50%", "50%"],
                  clockwise: false,
                  data: [{
                      value: 25,
                      name: "公司1"
                  }, {
                      value: 15,
                      name: "公司2"
                  }, {
                      value: 8,
                      name: "公司3"
                  }],
                  label: {
                      normal: {
                          textStyle: {
                              color: "rgba(255,255,255,.6)",
                              fontSize: 14,
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
                  itemStyle: {
                      normal: {},
                      emphasis: {
                          borderWidth: 0,
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: "rgba(0, 0, 0, 0.5)"
                      }
                  }
              }],
              color: ["#62c98d", "#2f89cf", "#4cb9cf"],
          };
          e.setOption(option);
          window.addEventListener("resize", function() {
              e.resize()
          })
      }

      function b() {
          var e = echarts.init(document.getElementById("echart2"));
          var g = [
              [4, 3, 5, 9, 1, 8, 3, 7, 2, 4, 6, 4],
              [5, 5, 7, 3, 6, 8, 9, 4, 3, 7, 2, 2],
          ];
          var h = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
          var i = ["计划数量", "销售金额"];
          var f = [];
          $.each(g, function(j, l) {
              var k = {
                  name: i[j],
                  type: "bar",
                  itemStyle: {
                      normal: {
                          color: ""
                      }
                  },
                  barWidth: "30",
                  data: l
              };
              f.push(k)
          });
          option = {
              legend: {
                  data: i,
                  type: "scroll",
                  textStyle: {
                      color: "#fff"
                  },
                  top: "0"
              },
              tooltip: {
                  trigger: "axis",
                  axisPointer: {
                      type: "shadow"
                  }
              },
              color: ["#62c98d", "#2f89cf"],
              grid: {
                  top: "14%",
                  left: "15",
                  right: "35",
                  bottom: "12%",
                  containLabel: true
              },
              xAxis: [{
                  type: "category",
                  axisLabel: {
                      textStyle: {
                          color: "rgba(255,255,255,.6)",
                      }
                  },
                  axisLine: {
                      lineStyle: {
                          color: "rgba(255,255,255,.1)"
                      }
                  },
                  data: h,
              }],
              yAxis: [{
                  name: "",
                  type: "value",
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "#2f2a7a"
                      }
                  },
                  axisLabel: {
                      textStyle: {
                          color: "rgba(255,255,255,.6)"
                      }
                  },
                  axisLine: {
                      lineStyle: {
                          color: "rgba(255,255,255,.1)"
                      }
                  },
              }],
              dataZoom: [{
                  show: true,
                  height: 12,
                  xAxisIndex: [0],
                  bottom: 5,
                  start: 10,
                  end: 80,
                  handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                  handleSize: "110%",
                  handleStyle: {
                      color: "#d3dee5",
                  },
                  textStyle: {
                      color: "#fff"
                  },
                  borderColor: "rgba(255,255,255,.3)"
              }],
              series: f
          };
          e.setOption(option);
          window.addEventListener("resize", function() {
              e.resize()
          })
      }

      function c() {
          var i = echarts.init(document.getElementById("echart3").........完整代码请登录后点击上方下载按钮下载查看