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: {
     .........完整代码请登录后点击上方下载按钮下载查看