js教程

百度echarts柱状图使用教程

我的站长站 2024-09-06 人阅读

echarts简介

echarts是百度出品的一款开源JS柱状图框架,目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架,echarts文档太复杂,我的站长站精简了使用方法,不看原理,只给出使用示例。

百度echarts柱状图使用教程

官网:https://echarts.apache.org/zh/

文档:https://echarts.apache.org/zh/feature.html

示例:https://echarts.apache.org/examples/zh/index.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: {},
        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>

echarts配置方法

echarts全部的配置参数可以下面这篇文章,代码太长了,新开了一篇。你只需要找到需要修改的地方,复制粘贴即可。

相关信息
echarts柱状图样式参数

1:线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: &#39;line&#39;, itemStyle: { normal: { color: &...

相关推荐
  • echarts
  • 柱状图
  • echarts柱状图样式参数

    1:线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: &#39;line&#39;, itemStyle: { normal: { color: &#39;#E6A23C&#39;, lineStyle: { color: &#39;#409EFF&#39...

    js教程 9 2个月前
  • 百度echarts柱状图使用教程
    百度echarts柱状图使用教程

    echarts简介echarts是百度出品的一款开源JS柱状图框架,目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架,echarts文档太复杂,我的站长站精简了使用方法,不看原理,只给...

    js教程 8 2个月前
  • echarts增加loading加载中效果方法

    需要开发echarts中的loading加载中效果,我们可以使用到echart自带showLoading()方法。在需要加载数据的地方使用showLoadin()方法显示loading加载中效果,数据加载完成后再调用hideLoading()方法,隐藏loading加载中效果。官方文档官方文档地址:https://ec...

    js教程 9 2个月前
  • echarts柱状图样式参数

    1:线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: &#39;line&#39;, itemStyle: { normal: { color: &#39;#E6A23C&#39;, lineStyle: { color: &#39;#409EFF&#39...

    js教程 9 2个月前
  • 百度echarts柱状图使用教程
    百度echarts柱状图使用教程

    echarts简介echarts是百度出品的一款开源JS柱状图框架,目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架,echarts文档太复杂,我的站长站精简了使用方法,不看原理,只给...

    js教程 8 2个月前
最新更新