• 基于Echarts的22个可视化大盘静态前台页面

    一、人口舆情分析大盘

    二、实时监控大盘、消费大盘、设备监控大盘

    三、设备故障检测大盘面

    四、湖南省物流大数据大盘

    五、智慧物流服务中心

    六、医院大数据大盘分析

    七、车联网平台大盘

    八、设备运维可视化监控大盘

    九、贵州省大学生消费状况大盘

    十、设备在线状况统计大盘

    十一、设备环境监测大盘

    十二、车联网大数据统计大盘

    十三、接入终端大盘

    十四、网络流量监控大盘

    十五、Echarts各种图表大盘

    可通过公众号 Coding路人王 获取
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    实现步骤：
    引入 Apache ECharts
    在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

    绘制一个简单的图表
    在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后，添加：

    <body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

    • 1
    • 2
    • 3
    • 4

    然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    这样你的第一个图表就诞生了！

  • 相关阅读:
    云原生架构设计理论与实践
    CMake Tutorial 巡礼(9)_选择静态或动态库
    KT148A电子语音芯片ic方案适用的场景以及常见产品类型
    Unity SKFramework框架（二十四）、Avatar Controller 第三人称控制
    从零开始 Spring Cloud 15：多级缓存
    22-06-27 西安redis（01） linux上安装redis、redis5种常见数据类型的命令
    【Linxu工具】：vim使用及简单配置
    代码格式规范--clang-format的安装及配置
    如何提高同行评审的有效性
    论文阅读 dyngraph2vec: Capturing Network Dynamics using Dynamic Graph Representation Learning
  • 原文地址：https://blog.csdn.net/wyn_365/article/details/125439996