ECharts 甘特图 | 兴趣使然の边缘人小站

前端

发布日期: 2021-01-24

作者: adaichan

文章字数: 586

阅读时长: 2 分

阅读次数:

一、引入

进入 ECharts 官网：https://echarts.apache.org/zh/index.html ，没有用过的话最好先过一遍它的5分钟快速入门教程。

值得注意的是在使用 ECharts 时 jQuery 的库也要按需引入。推荐使用 jsDelivr 方式引入。

<script type="text/javascript" src="jQuery存放路径/jquery.min.js"></script>
<script type="text/javascript" src="echarts存放/echarts.min.js"></script>

二、甘特图

参考 CSDN 社区的这篇博客：https://blog.csdn.net/yixu0534/article/details/82785119

他的甘特图不兼容高版本的 ECharts，使用时需要引入 4.0.2 版本。

引入后发现我之前用 5.0.1 版本制作的树，饼、柱状图表默认样式变丑了，还有部分图表无法显示，体验不是很好。所以想要自定义一个不错的甘特图还是得慢慢看文档说明。

三、部分代码

// head
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts 图表</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>

// body
<body>
    <div class="chartBox">
      <div class="leftChart">
        <div id="chart1" style="width: 600px; height: 300px"></div>
        <div id="chart4" style="width: 600px; height: 300px"></div>
      </div>

      <div class="rightChart">
        <div id="chart2" style="width: 600px; height: 300px"></div>
        <div id="chart3" style="width: 600px; height: 300px"></div>
      </div>
    </div>
</body>

// script
<script type="text/javascript">
  var chartDom1 = document.getElementById("chart1");
  var myChart1 = echarts.init(chartDom1);
  var option1;
  var treeDatePath = "./echartsTree.json";

  var chartDom2 = document.getElementById("chart2");
  var myChart2 = echarts.init(chartDom2);
  var option2;

  var chartDom3 = document.getElementById("chart3");
  var myChart3 = echarts.init(chartDom3);
  var option3;

  var chartDom4 = document.getElementById("chart4");
  var myChart4 = echarts.init(chartDom4);
  var option4;

  // 树状图（参考示例）
  ... 
  // 饼状图（参考示例）
  option2 = { ...
  // 柱形图（参考示例）
  option3 = { ...
  // 甘特图（参考示例）
  option4 = { ...
  
  option1 && myChart1.setOption(option1);
  option2 && myChart2.setOption(option2);
  option3 && myChart3.setOption(option3);
  option4 && myChart4.setOption(option4);
</script>

// style
<style>
  .chartBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .leftChart {
    margin: 20px;
  }

  .rightChart {
    margin: 20px;
  }
</style>