Thu Mar 28 15:03:00 CST 2024 inscode

package.json

@@ -11,7 +11,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
-    "less-loader": "5.0.0",
+    "moment": "^2.30.1",
     "vue": "^2.6.14",
     "vue-router": "3"
   },
@@ -23,6 +23,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "less": "3.0.4",
+    "less-loader": "5.0.0",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

src/components/ganttchart/index.vue

@@ -4,20 +4,43 @@
     </div>
 </template>
 <script>
+import * as echarts from 'echarts';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import useGantt from './useGantt'
+moment.locale('zh-cn');
 export default {
     name: 'ganttChart',
     data() {
         return {
-
+            chart:null,
         }
     },
-
+    emit:['chart-click'],
     mounted() {
-
+        this.init()
     },
 
     methods: {
-
+        
+        ///  初始化
+        init(){
+            const chart = echarts.init(this.$refs.chartRef);
+            chart.on('click', 'series', e => {
+                this.$emit('chart-click', e)
+            })
+            this.chart=chart;
+            this.draw();
+        },
+        /// 绘制图形
+        draw(){
+            if(!!this.chart){
+                const {baseOption} =useGantt();
+                this.chart.setOption(baseOption)
+            }else{
+                this.init()
+            }
+        }
     },
 
 }
@@ -44,7 +67,7 @@ export default {
         position: absolute;
         width: 100%;
         height: 24px;
-        background: #2cd0ff;
+        background: #cecece;  // xAxis 背景色
         opacity: 0.3;
         bottom: 1px;
         z-index: 0;

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
+        },
+        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
+            },
+            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
+              },
+              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']
+              ]
+            },
+        ]
+    } 
+    return {
+        baseOption
+    }   
+}
\ No newline at end of file