fix:调整配置

src/components/ganttchart/useGantt.js

 import * as echarts from 'echarts';
 import moment from 'moment';
-export default function(){
-    const baseOption ={
-        backgroundColor: 'transparent',
-        color: ['#fc7778', '#7481fd', '#02d18f', '#2cd0ff', '#edcf02', '#fe8a3d'],
-        grid: {
-          containLabel: true,
-          show: false,
-          right: 0,
-          left: 0,
-          bottom: 0,
-          top: 0,
-          borderColor: '#79B5CA',
-          borderWidth: 1
+
+const GraphType = Object.freeze({
+  Rect: 1,
+  Img: 2,
+})
+
+/**
+ * 获取自定义渲染函数
+ * 内部设定高度映射 y[1-3]  2:表示竖向中间位置
+ */
+function getRenderItem(yTick) {
+  return function (params, api) {
+    const data = {
+      start: api.value(0),
+      end: api.value(1)
+    }
+    const status = api.value(2)
+    const [start, pos_y] = api.coord([data.start, yTick])
+    const [end] = api.coord([data.end, yTick])
+    const height = api.size([0, 1])[1] * 0.15
+
+    const rect = echarts.graphic.clipRectByRect(
+      {
+        x: start,
+        y: pos_y - height / 2,
+        width: end - start,
+        height: height
+      },
+      {
+        x: params.coordSys.x,
+        y: params.coordSys.y,
+        width: params.coordSys.width,
+        height: params.coordSys.height
+      }
+    )
+    const childrenImageLine = [
+      {
+        type: 'rect',
+        shape: rect,
+        style: api.style(),
+        emphasis: {
+          style: api.styleEmphasis()
+        }
+      }
+    ]
+    return {
+      type: 'group',
+      children: childrenImageLine
+    }
+  }
+}
+
+
+
+export default function () {
+  const baseOption = {
+    backgroundColor: 'transparent',
+    color: ['#fc7778', '#7481fd', '#02d18f', '#2cd0ff', '#edcf02', '#fe8a3d'],
+    grid: {
+      containLabel: true,
+      show: false,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      top: 0,
+      borderColor: '#79B5CA',
+      borderWidth: 1
+    },
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 25, // 显示25%
+      zoomOnMouseWheel: true,
+      rangeMode: ['percent', 'percent'],
+      type: 'inside',
+      filterMode: 'none'
+    },
+    xAxis: {
+      type: 'time',
+      // min: '2020-02-28 12:00:00',
+      // max: '2020-05-28 12:00:00',
+
+      // 主刻度尺
+      axisTick: {
+        show: true,
+        interval: 0,
+        length: 10,
+        inside: true,
+
+        lineStyle: {
+          color: '#bbb',
+          width: 2
         },
-        dataZoom: {
-          show: true,
-          start: 0,
-          end: 25, // 显示25%
-          zoomOnMouseWheel: true,
-          rangeMode: ['percent', 'percent'],
-          type: 'inside',
-          filterMode: 'none'
+        animation: true,
+        animationEasingUpdate: 'linear',
+        animationDurationUpdate: 100,
+        animationDelayUpdate: 300
+      },
+      splitLine: {
+        show: false
+      },
+      // 次刻度尺
+      minorTick: {
+        show: true,
+        length: 5,
+        lineStyle: {
+          color: '#bbb',
+          width: 1
+        }
+      },
+
+      axisLabel: {
+        inside: true,
+        hideOverlap: false,
+        show: true,
+        interval: 0,
+        formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
+        // '{yyyy}-{MM}-{dd}\n{hh}:{mm}:{ss}',
+        textStyle: {
+          // 图例文字的样式
+          color: '#333',
+          fontSize: 10
+        }
+      },
+      axisLine: {
+        show: true, // 这里的show用于设置是否显示x轴那一条线 默认为true
+        lineStyle: {
+          // lineStyle里面写x轴那一条线的样式
+          color: '#bbb',
+          width: 2 // 轴线的粗细
+          // shadowColor: 'white',
+          // shadowBlur: 10,
+          // opacity: 1,
+          // shadowOffsetY: -1,
+        }
+      }
+    },
+    yAxis: {
+      show: false,
+      type: 'value',
+      min: 1,
+      max: 3,
+      axisLabel: { show: false }
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: '#333333',
+      borderWidth: 1,
+      borderColor: '#555',
+      padding: 4,
+      position: 'top',
+      // 设置tooltip显示位置
+      // point: 鼠标位置，如 [20, 40]。
+      // params: 同 formatter 的参数相同。
+      // dom: tooltip 的 dom 对象。
+      // rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
+      // size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
+      // position(point, params, dom, rect, size) {
+      //   return [point[0], point[1] - 80];
+      // },
+      textStyle: {
+        // textStyle里面写x轴下的字体的样式
+        color: '#fff',
+        fontSize: 12
+      },
+      formatter: val => {
+        return `${typeof val.value[2] === 'string' ? val.value[2] : val.seriesName
+          } ${moment(val.value[0]).format('MM-DD HH:mm')} ~ ${moment(
+            val.value[1]
+          ).format('MM-DD HH:mm')}`
+        // let str = `<div style = "background:url( ${require('./images/trangle-border.png')}) no-repeat center center ;width:177px;height:65px;padding: 5px 0 0 5px;">状态：${
+        //   val.seriesName
+        //   }<br/>时间：${val.value}</div>`;
+        // return str;
+      }
+      // alwaysShowContent: true,
+    },
+    series: [
+      {
+        name: '测试1',
+        type: 'custom',
+        colorBy: 'data',
+        encode: {
+          x: [0, 1],
+          y: 1
         },
-        xAxis: {
-          type: 'time',
-          // min: '2020-02-28 12:00:00',
-          // max: '2020-05-28 12:00:00',
-      
-          // 主刻度尺
-          axisTick: {
-            show: true,
-            interval: 0,
-            length: 10,
-            inside: true,
-      
-            lineStyle: {
-              color: '#bbb',
-              width: 2
-            },
-            animation: true,
-            animationEasingUpdate: 'linear',
-            animationDurationUpdate: 100,
-            animationDelayUpdate: 300
-          },
-          splitLine: {
-            show: false
-          },
-          // 次刻度尺
-          minorTick: {
-            show: true,
-            length: 5,
-            lineStyle: {
-              color: '#bbb',
-              width: 1
-            }
-          },
-      
-          axisLabel: {
-            inside: true,
-            hideOverlap: false,
-            show: true,
-            interval: 0,
-            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
-            // '{yyyy}-{MM}-{dd}\n{hh}:{mm}:{ss}',
-            textStyle: {
-              // 图例文字的样式
-              color: '#333',
-              fontSize: 10
-            }
-          },
-          axisLine: {
-            show: true, // 这里的show用于设置是否显示x轴那一条线 默认为true
-            lineStyle: {
-              // lineStyle里面写x轴那一条线的样式
-              color: '#bbb',
-              width: 2 // 轴线的粗细
-              // shadowColor: 'white',
-              // shadowBlur: 10,
-              // opacity: 1,
-              // shadowOffsetY: -1,
-            }
+        itemStyle: {
+          emphasis: {
+            borderColor: 'rgba(192, 249, 254, 0.85)',
+            borderType: 'solid',
+            borderWidth: 1,
+            shadowColor: 'rgba(192, 249, 254, 0.85)',
+            shadowOffsetY: 1,
+            shadowOffsetX: -1,
+            shadowBlur: 5
           }
         },
-        yAxis: {
-          show: false,
-          type: 'value',
-          min: 1,
-          max: 3,
-          axisLabel: { show: false }
+        renderItem: getRenderItem(2),
+        data: [
+          {
+            value: ['2020-03-01 12:00:00', '2020-03-03 00:00:00']
+          },
+          ['2020-03-03 01:00:00', '2020-03-14 00:00:00'],
+          ['2020-03-14 08:03:00', '2020-03-14 08:13:00'],
+          ['2020-03-15 02:00:00', '2020-04-01 00:00:00']
+        ]
+      },
+      {
+        name: '测试2',
+        type: 'custom',
+        colorBy: 'data',
+        encode: {
+          x: [0, 1],
+          y: 1
         },
-        tooltip: {
-          trigger: 'item',
-          backgroundColor: '#333333',
-          borderWidth: 1,
-          borderColor: '#555',
-          padding: 4,
-          position: 'top',
-          // 设置tooltip显示位置
-          // point: 鼠标位置，如 [20, 40]。
-          // params: 同 formatter 的参数相同。
-          // dom: tooltip 的 dom 对象。
-          // rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
-          // size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
-          // position(point, params, dom, rect, size) {
-          //   return [point[0], point[1] - 80];
-          // },
-          textStyle: {
-            // textStyle里面写x轴下的字体的样式
-            color: '#fff',
-            fontSize: 12
+        itemStyle: {
+          emphasis: {
+            borderColor: 'rgba(192, 249, 254, 0.85)',
+            borderType: 'solid',
+            borderWidth: 1,
+            shadowColor: 'rgba(192, 249, 254, 0.85)',
+            shadowOffsetY: 1,
+            shadowOffsetX: -1,
+            shadowBlur: 5
+          }
+        },
+        renderItem: getRenderItem(1.75),
+        data: [
+          {
+            value: ['2020-02-29 12:00:00', '2020-03-02 00:00:00']
           },
-          formatter: val => {
-            return `${
-              typeof val.value[2] === 'string' ? val.value[2] : val.seriesName
-            } ${moment(val.value[0]).format('MM-DD HH:mm')} ~ ${moment(
-              val.value[1]
-            ).format('MM-DD HH:mm')}`
-            // let str = `<div style = "background:url( ${require('./images/trangle-border.png')}) no-repeat center center ;width:177px;height:65px;padding: 5px 0 0 5px;">状态：${
-            //   val.seriesName
-            //   }<br/>时间：${val.value}</div>`;
-            // return str;
+        ]
+      },
+      {
+        name: '测试3',
+        type: 'custom',
+        colorBy: 'data',
+        encode: {
+          x: [0, 1],
+          y: 1
+        },
+        itemStyle: {
+          emphasis: {
+            borderColor: 'rgba(192, 249, 254, 0.85)',
+            borderType: 'solid',
+            borderWidth: 1,
+            shadowColor: 'rgba(192, 249, 254, 0.85)',
+            shadowOffsetY: 1,
+            shadowOffsetX: -1,
+            shadowBlur: 5
           }
-          // alwaysShowContent: true,
         },
-        series: [
-            {
-              name: '测试1',
-              type: 'custom',
-              colorBy: 'data',
-              encode: {
-                x: [0, 1],
-                y: 1
-              },
-              itemStyle: {
-                emphasis: {
-                  borderColor: 'rgba(192, 249, 254, 0.85)',
-                  borderType: 'solid',
-                  borderWidth: 1,
-                  shadowColor: 'rgba(192, 249, 254, 0.85)',
-                  shadowOffsetY: 1,
-                  shadowOffsetX: -1,
-                  shadowBlur: 5
-                }
-              },
-              renderItem: (params, api) => {
-                const data = {
-                  start: api.value(0),
-                  end: api.value(1)
-                }
-                const status = api.value(2)
-                const [start, pos_y] = api.coord([data.start, 2])
-                const [end] = api.coord([data.end, 2])
-                const height = api.size([0, 1])[1] * 0.15
-        
-                const rect = echarts.graphic.clipRectByRect(
-                  {
-                    x: start,
-                    y: pos_y - height / 2,
-                    width: end - start,
-                    height: height
-                  },
-                  {
-                    x: params.coordSys.x,
-                    y: params.coordSys.y,
-                    width: params.coordSys.width,
-                    height: params.coordSys.height
-                  }
-                )
-                const childrenImageLine = [
-                  {
-                    type: 'rect',
-                    shape: rect,
-                    style: api.style(),
-                    emphasis: {
-                      style: api.styleEmphasis()
-                    }
-                  }
-                ]
-                return {
-                  type: 'group',
-                  children: childrenImageLine
-                }
-              },
-              data: [
-                {
-                  value: ['2020-03-01 12:00:00', '2020-03-03 00:00:00']
-                },
-                ['2020-03-03 01:00:00', '2020-03-14 00:00:00'],
-                ['2020-03-14 08:03:00', '2020-03-14 08:13:00'],
-                ['2020-03-15 02:00:00', '2020-04-01 00:00:00']
-              ]
-            },
+        renderItem: getRenderItem(2.25),
+        data: [
+          {
+            value: ['2020-03-02 08:00:00', '2020-03-03 20:00:00']
+          },
         ]
-    } 
-    return {
-        baseOption
-    }   
+      },
+    ]
+  }
+  return {
+    baseOption
+  }
 }
\ No newline at end of file