【Echarts】使用及应用案例

最新推荐文章于 2024-07-09 23:44:56 发布

程序猿研究僧

最新推荐文章于 2024-07-09 23:44:56 发布

阅读量716

点赞数 17

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_43099842/article/details/139983931

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、官网

https://echarts.apache.org/zh/index.html

下载可得到两个文件 echarts.js、 echarts.min.js

区别（echarts.js 与 echarts.min.js）

min:压缩，省去空格、换行，所有的代码在一行中书写。适用于开发环境。

未压缩：保留的空格、换行。适用于查看代码。

2、项目中引入echarts文件

第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入

<script src="js/echarts.min.js"></script>

第二种引入方式：通过cdn网络加速引入

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

3、应用

柱状图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.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: "变电站数量统计",
        },
        //鼠标指向柱状图浮出详情
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["福建", "泉州", "宁德", "厦门", "福州"],
        },
        yAxis: {
          type: "value",
          name: "数量",
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: [
              Math.floor(Math.random() * 100),
              Math.floor(Math.random() * 100),
              Math.floor(Math.random() * 100),
              Math.floor(Math.random() * 100),
              Math.floor(Math.random() * 100),
            ],
          },
        ],
      };

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

饼状图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.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: "变电站数量统计",
        },
        //鼠标指向柱状图浮出详情
        tooltip: {},
        series: [
          {
            type: "pie",
            data: [
              {
                value: Math.floor(Math.random() * 100),
                name: "泉州",
              },
              {
                value: Math.floor(Math.random() * 100),
                name: "宁德",
              },
              {
                value: Math.floor(Math.random() * 100),
                name: "厦门",
              },
              {
                value: Math.floor(Math.random() * 100),
                name: "福州",
              },
            ],
            radius: "50%",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

程序猿研究僧

关注

17
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Echarts】使用及应用案例

第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
复制链接

扫一扫