Echarts大屏可视化

雾岛听风691
于 2024-09-04 18:42:08 发布
阅读量360
点赞数 9
文章标签： echarts 前端 javascript
本文链接：https://blog.csdn.net/qq_74922407/article/details/141901123
版权
构建可视化大屏：
构建布局：通过css和html对整个页面进行模块拆分，控制好每一张图的位置和大小，再将echarts实例化对象放到不同的盒子里
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大屏可视化</title>

    <style>
        .box{
            width:30%;
            height: 45%;
            position: absolute;
            top: 10%;
            left: 0;
            /* background-color:aqua; */
        }
        .ss{
            width: 30%;
            height: 45%;
            position: absolute;
            top: 55%;
            left: 0;
            /* background-color: aquamarine; */
        }
        body{
            background-color:rgb(152, 170, 223)
        }
        .sl{
            width: 25%;
            height: 45%;
            position: absolute;
          
            top: 10%;
            right: 0; 
            margin-right: 40px;
            /* background: #000; */
    
        }
        .ye{
            width: 30%;
            height: 45%;
            position: absolute;
            top: 55%;
            right: 0;
            /* background: red; */
        }
        .xhz{
            /* background-image: url(./tupian/微信图片_20231123095915.png); */
            width: 40%;
            height:10%;
            position: absolute;
            top: 0;
            left: 0;
            margin: auto;
            margin-left: 600px;
            

        }
        .zj{
            width: 40%;
            height: 90%;
            top: 10%;
            left: 30%;
            right: 30%;
            position:absolute;
            /* background-color: aqua; */
        }
    </style>
    <script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    
   
</head>
<body>
    <span class="xhz"><h1>Echarts数据分析</h1></span>
	<!-- 2.准备具有大小的DOM容器 -->
   <div class="box">box</div>
   <div class="ss">ss</div>
   <div class="zj"></div>
   <div class="sl"></div>
   <div class="ye"></div>
    <script>
        
        var myCharts = echarts.init(document.querySelector('.ss'))
        var option = {
              // legend: {
              //   top: 'bottom'
              // },
              // toolbox: {
              //   show: true,
              //   feature: {
              //     mark: { show: true },
              //     dataView: { show: true, readOnly: false },
              //     restore: { show: true },
              //     saveAsImage: { show: true }
              //   }
              // },
              series: [
                {
                  name: 'Nightingale Chart',
                  type: 'pie',
                  radius: [30, 150],
                  center: ['50%', '50%'],
                  roseType: 'area',
                  itemStyle: {
                    borderRadius: 8
                  },
                  data: [
                    { value: 40, name: '数据1' },
                    { value: 38, name: '数据2' },
                    { value: 32, name: '数据3' },
                    { value: 30, name: '数据4' },
                    { value: 28, name: '数据5' },
                    { value: 26, name: '数据6' },
                    { value: 22, name: '数据7' },
                    { value: 18, name: '数据8' }
                  ]
                }
              ]
            };

        myCharts.setOption(option)

     var box_echarts= echarts.init(document.querySelector('.sl'))
    var option = {
  title: {
    // text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['鞋子', '帽子', '衬衫', '裤子', '棉衣']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '鞋子',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '帽子',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '衬衫',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '裤子',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '棉衣',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
box_echarts.setOption(option)


var sl_echarts=echarts.init(document.querySelector('.box'))
option = {
  // backgroundColor: '#2c343c',
  title: {
    text: '大数据 Pie', 
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: 'hadoop' },
        { value: 310, name: 'spark' },
        { value: 274, name: 'zookeeper' },
        { value: 235, name: 'flume' },
        { value: 400, name: 'flink' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      // animationDelay: function (idx) {
      //   return Math.random() * 200;
      // }
    }
  ]
};
sl_echarts.setOption(option)


var ye_echarts=echarts.init(document.querySelector('.ye'))
var  option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};
ye_echarts.setOption(option)

var zj_echarts= echarts.init(document.querySelector('.zj'))
  var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['spark', 'hadoop', 'zookeeper', 'flume', 'hive', 'sqoop', 'flink']
  },
  series: [
    {
      name: 'spark',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'hadoop',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'zookeeper',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'flume',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'hive',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};   
zj_echarts.setOption(option)

</script>
</body>
</html>