echarts甘特图

回答: echarts甘特图可以通过Echarts库来实现，你可以在Echarts官网的实例中找到官方示例图以及其他贡献者发布的图表。控制图表的js代码基本结构如下：

// 基于准备好的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);

根据你提供的图表效果，甘特图的横坐标刻度值为时间，纵坐标为“方案”、“纲要”、“成果”三个项目阶段类目。每个阶段类目中包含了按时完成（蓝色柱状图）和超时完成（红色柱状图）两种系列的数据。此外，还有垂直于x时间坐标轴的“计划开始时间”和“有效期”两条时间标线。结合官网文档和示例，以上是初步的结论。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [使用 Echarts 实现项目进度甘特图](https://blog.csdn.net/qq_33404903/article/details/84341339)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]