Skip to content

V
vue2-tools

Tinyu5 / vue2-tools
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
vue2-tools
提交 7d040942 编写于 作者: T tinyu
浏览文件
操作

fix:调整配置

上级 23b43487
隐藏空白更改
内联 并排
Showing with 255 addition and 188 deletion
src/components/ganttchart/useGantt.js
浏览文件 @ 7d040942
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import moment from 'moment'; import moment from 'moment';
export default function(){
const baseOption ={ const GraphType = Object.freeze({
backgroundColor: 'transparent', Rect: 1,
color: ['#fc7778', '#7481fd', '#02d18f', '#2cd0ff', '#edcf02', '#fe8a3d'], Img: 2,
grid: { })
containLabel: true,
show: false, /**
right: 0, * 获取自定义渲染函数
left: 0, * 内部设定高度映射 y[1-3] 2:表示竖向中间位置
bottom: 0, */
top: 0, function getRenderItem(yTick) {
borderColor: '#79B5CA', return function (params, api) {
borderWidth: 1 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: { animation: true,
show: true, animationEasingUpdate: 'linear',
start: 0, animationDurationUpdate: 100,
end: 25, // 显示25% animationDelayUpdate: 300
zoomOnMouseWheel: true, },
rangeMode: ['percent', 'percent'], splitLine: {
type: 'inside', show: false
filterMode: 'none' },
// 次刻度尺
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: { itemStyle: {
type: 'time', emphasis: {
// min: '2020-02-28 12:00:00', borderColor: 'rgba(192, 249, 254, 0.85)',
// max: '2020-05-28 12:00:00', borderType: 'solid',
borderWidth: 1,
// 主刻度尺 shadowColor: 'rgba(192, 249, 254, 0.85)',
axisTick: { shadowOffsetY: 1,
show: true, shadowOffsetX: -1,
interval: 0, shadowBlur: 5
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: { renderItem: getRenderItem(2),
show: false, data: [
type: 'value', {
min: 1, value: ['2020-03-01 12:00:00', '2020-03-03 00:00:00']
max: 3, },
axisLabel: { show: false } ['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: { itemStyle: {
trigger: 'item', emphasis: {
backgroundColor: '#333333', borderColor: 'rgba(192, 249, 254, 0.85)',
borderWidth: 1, borderType: 'solid',
borderColor: '#555', borderWidth: 1,
padding: 4, shadowColor: 'rgba(192, 249, 254, 0.85)',
position: 'top', shadowOffsetY: 1,
// 设置tooltip显示位置 shadowOffsetX: -1,
// point: 鼠标位置，如 [20, 40]。 shadowBlur: 5
// params: 同 formatter 的参数相同。 }
// dom: tooltip 的 dom 对象。 },
// rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。 renderItem: getRenderItem(1.75),
// size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。 data: [
// position(point, params, dom, rect, size) { {
// return [point[0], point[1] - 80]; value: ['2020-02-29 12:00:00', '2020-03-02 00:00:00']
// },
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( name: '测试3',
val.value[1] type: 'custom',
).format('MM-DD HH:mm')}` colorBy: 'data',
// let str = `<div style = "background:url( ${require('./images/trangle-border.png')}) no-repeat center center ;width:177px;height:65px;padding: 5px 0 0 5px;">状态：${ encode: {
// val.seriesName x: [0, 1],
// }<br/>时间：${val.value}</div>`; y: 1
// return str; },
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: [ renderItem: getRenderItem(2.25),
{ data: [
name: '测试1', {
type: 'custom', value: ['2020-03-02 08:00:00', '2020-03-03 20:00:00']
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 }
} return {
baseOption
}
} }
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或