diff --git a/src/components/ganttchart/useGantt.js b/src/components/ganttchart/useGantt.js
index b1a67e6256be237cc335278c246431dad4a540c5..82cd76f9b5e7a105957b82bbeaf7e0732f74502e 100644
--- a/src/components/ganttchart/useGantt.js
+++ b/src/components/ganttchart/useGantt.js
@@ -1,200 +1,267 @@
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 = `状态：${
+ // val.seriesName
+ // }
时间：${val.value}
`;
+ // 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 = `状态：${
- // val.seriesName
- // }
时间：${val.value}
`;
- // 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