const LINE_STYLE = {fill: null, stroke: '#da9be8', lineWidth: 2};
const DOT_LINE_STYLE = {lineDash: [3, 3], lineWidth: 2, opacity: .8};
const EMPPHASIS_STYLE = {lineWidth: 3, opacity: 1};
function buildLine({value, itemStyle:{normal, emphasis = {}}}, api) {
const [x1, y1] = api.coord([value[0], value[1]]);
const [x2, y2] = api.coord([value[2], value[3]]);
let {color, borderColor, borderWidth} = normal;
const style = api.style({fill: color, stroke: borderColor, lineWidth: borderWidth, ...DOT_LINE_STYLE});
let {color: fill, borderColor: stroke, borderWidth: lineWidth} = emphasis;
const styleEmphasis = api.styleEmphasis({fill, stroke, lineWidth, lineDash: [3, 3], ...EMPPHASIS_STYLE});
return {
type: 'line',
shape: {
x1, y1, x2, y2
},
style,
styleEmphasis
};
}
option = {
"series": [
{
"name": "SYMBOL",
"barWidth": "62.5%",
"barMinWidth": 10,
"barMaxWidth": 20,
"itemStyle": {
"normal": {
"color": "#6ba583",
"color0": "#d75442",
"borderColor": "#225437",
"borderColor0": "#5b1a13",
"borderWidth": 1,
"shadowBlur": 0,
"shadowColor": "transparent",
"shadowOffsetX": 0,
"shadowOffsetY": 0
}
},
"lineStyle": false,
"areaStyle": false,
"data": [
[
48.95,
48.85,
48.75,
48.95
],
[
48.76,
48.77,
48.65,
48.81
],
[
48.77,
48.87,
48.69,
48.87
],
[
49.02,
49.08,
48.9,
49.13
],
[
49.11,
48.9,
48.86,
49.14
],
[
48.97,
48.71,
48.46,
48.98
],
[
48.55,
48.61,
48.48,
48.65
],
[
48.68,
48.56,
48.44,
48.7
],
[
48.73,
48.65,
48.5,
48.73
],
[
48.61,
48.41,
48.19,
48.64
],
[
48.43,
48.34,
48.25,
48.46
],
[
48.45,
48.48,
48.34,
48.5
],
[
48.5,
48.55,
48.4,
48.6
],
[
48.5,
48.48,
48.29,
48.77
],
[
48.18,
48.22,
48.06,
48.31
],
[
48.02,
47.47,
47.46,
48.08
],
[
47.41,
47.55,
47.37,
47.61
],
[
47.85,
48.05,
47.85,
48.15
],
[
48.1,
47.9,
47.88,
48.1
],
[
48.04,
48.07,
48.01,
48.2
],
[
47.94,
47.37,
47.35,
48.06
],
[
47.24,
47.26,
47.1,
47.46
],
[
47.18,
47.25,
47.08,
47.32
],
[
47.36,
47.7,
47.36,
47.76
],
[
47.51,
47.63,
47.51,
47.75
],
[
47.78,
47.64,
47.62,
47.8
],
[
47.82,
47.81,
47.72,
47.92
],
[
47.9,
47.71,
47.6,
47.91
],
[
47.47,
47.7,
47.46,
47.73
],
[
47.65,
47.98,
47.61,
48.01
],
[
48.15,
48.43,
48.13,
48.46
],
[
48.54,
48.6,
48.5,
48.67
],
[
48.56,
48.17,
47.95,
48.61
],
[
48.29,
48.23,
48.16,
48.45
],
[
48.31,
48.13,
48,
48.31
],
[
48.04,
48.25,
47.98,
48.3
],
[
48.56,
48.77,
48.56,
48.82
],
[
48.89,
48.98,
48.83,
49.02
],
[
48.98,
48.96,
48.91,
49
],
[
48.9,
48.92,
48.81,
48.99
],
[
48.92,
49.07,
48.86,
49.07
],
[
49.19,
49.26,
49.15,
49.32
],
[
49.29,
49.16,
49.16,
49.32
],
[
49.26,
49.38,
49.19,
49.38
],
[
49.36,
49.27,
49.24,
49.37
],
[
49.23,
49.38,
49.22,
49.4
],
[
49.35,
49.39,
49.18,
49.46
],
[
49.44,
49.36,
49.36,
49.48
],
[
49.59,
49.66,
49.33,
49.73
],
[
49.6,
49.74,
49.49,
49.74
],
[
49.76,
49.88,
49.73,
49.9
],
[
49.88,
50.2,
49.86,
50.2
],
[
50.27,
50.33,
50.14,
50.33
],
[
50.29,
50.4,
50.21,
50.42
],
[
50.49,
50.51,
50.41,
50.56
],
[
50.37,
50.45,
50.33,
50.48
],
[
50.5,
50.32,
50.27,
50.56
],
[
50.48,
50.39,
50.32,
50.58
],
[
50.41,
50.45,
50.34,
50.45
],
[
50.36,
50.49,
50.32,
50.53
],
[
50.58,
50.52,
50.45,
50.64
],
[
50.57,
50.54,
50.49,
50.62
],
[
50.54,
50.49,
50.41,
50.58
],
[
50.58,
50.56,
50.47,
50.64
],
[
50.37,
50.61,
50.2,
50.61
],
[
50.82,
50.93,
50.77,
50.98
],
[
51.04,
50.71,
50.68,
51.04
],
[
50.8,
50.82,
50.74,
50.89
],
[
50.76,
50.49,
50.16,
50.81
],
[
50.59,
50.69,
50.47,
50.72
],
[
50.66,
50.94,
50.54,
50.95
],
[
50.82,
50.67,
50.58,
50.88
],
[
50.77,
50.88,
50.71,
50.95
],
[
51.1,
50.78,
50.71,
51.16
],
[
50.78,
50.86,
50.71,
51
],
[
50.82,
51,
50.76,
51.01
],
[
51.05,
51.25,
51.05,
51.27
],
[
51.25,
51,
50.88,
51.35
],
[
50.96,
51.08,
50.85,
51.11
],
[
50.79,
50.83,
50.54,
50.97
],
[
50.81,
50.92,
50.77,
50.97
],
[
50.78,
50.97,
50.71,
51.03
],
[
50.82,
50.95,
50.82,
50.97
],
[
50.72,
50.72,
50.41,
50.87
],
[
50.88,
51.19,
50.88,
51.3
],
[
51.15,
51.4,
51.15,
51.44
],
[
51.47,
51.59,
51.4,
51.6
],
[
51.75,
51.92,
51.73,
51.93
],
[
51.98,
51.92,
51.9,
52.04
],
[
52.06,
51.96,
51.94,
52.07
],
[
52.01,
51.82,
51.82,
52.03
],
[
51.93,
52.36,
51.89,
52.39
],
[
52.43,
52.5,
52.34,
52.68
],
[
52.68,
52.83,
52.66,
53.06
],
[
52.87,
52.71,
51.75,
52.87
],
[
53.14,
52.6,
52.6,
53.28
],
[
52.69,
52.27,
52.26,
52.69
],
[
52.18,
52.06,
52.02,
52.27
],
[
52.04,
52.43,
52.04,
52.53
],
[
52.66,
52.73,
52.53,
52.78
],
[
52.82,
52.74,
52.67,
52.85
],
[
52.81,
52.64,
52.63,
52.81
],
[
52.64,
52.53,
52.53,
52.8
],
[
52.59,
52.21,
52.18,
52.64
],
[
52.78,
52.65,
52.41,
52.86
],
[
53.1,
53.14,
52.99,
53.21
],
[
52.97,
52.97,
52.92,
53.27
],
[
53.02,
53.03,
52.89,
53.2
],
[
53.22,
53.16,
53.06,
53.23
],
[
53.08,
53.22,
53,
53.22
],
[
53.18,
53.29,
53.18,
53.33
],
[
53.31,
53.33,
53.27,
53.45
],
[
53.41,
53.54,
53.25,
53.55
],
[
53.73,
53.27,
53.25,
53.73
],
[
53.45,
53.68,
53.31,
53.68
],
[
53.73,
53.89,
53.73,
53.92
],
[
54.1,
54,
53.95,
54.15
],
[
54.18,
54.23,
54.04,
54.24
],
[
54.23,
54.42,
54.09,
54.45
],
[
54.53,
54.38,
54.32,
54.57
],
[
54.23,
54.19,
53.98,
54.28
],
[
54.28,
54.81,
54.26,
54.81
],
[
54.85,
54.99,
54.77,
55.01
],
[
55.21,
54.47,
54.38,
55.22
],
[
54.72,
54.9,
54.6,
55.01
],
[
54.85,
54.83,
54.74,
54.99
],
[
54.97,
55.35,
54.93,
55.35
],
[
55.41,
55.77,
55.38,
55.77
],
[
55.8,
55.99,
55.68,
56.01
],
[
56.12,
55.89,
55.66,
56.22
],
[
56.12,
55.87,
55.68,
56.18
],
[
55.99,
56.22,
55.77,
56.22
]
],
"type": "candlestick"
},
{
"name": "Pattern",
"type": "custom",
"dimensions": [],
"data": [
{
"tag": "Bullish",
"name": "Ascending Triangle",
"rl": {
"name": "Resistance",
"value": [
71,
53.3,
115.22165734621258,
53.26
],
"itemStyle": {
"normal": {
"color": "#da9be8",
"borderWidth": 2,
"borderType": "dotted",
"borderColor": "#da9be8"
}
}
},
"sl": {
"name": "Support",
"value": [
71,
49.35,
115.22165734621258,
53.26
],
"itemStyle": {
"normal": {
"color": "#da9be8",
"borderWidth": 2,
"borderType": "dotted",
"borderColor": "#da9be8"
}
}
},
"patternHeight": "N/A",
"value": [
77,
51.35,
83,
50.41,
95,
53.28,
103,
52.18,
106,
53.27,
122,
54.99
]
},
{
"tag": "Bullish",
"name": "V Bottom",
"rl": {
"name": "Resistance",
"value": [],
"itemStyle": {
"normal": {
"color": "#da9be8",
"borderWidth": 2,
"borderType": "dotted",
"borderColor": "#da9be8"
}
}
},
"sl": {
"name": "Support",
"value": [],
"itemStyle": {
"normal": {
"color": "#da9be8",
"borderWidth": 2,
"borderType": "dotted",
"borderColor": "#da9be8"
}
}
},
"patternHeight": 0.0261,
"value": [
14,
48.31,
22,
47.08,
23,
47.7
]
},
{
"tag": "Bullish",
"name": "V Bottom",
"rl": {
"name": "Resistance",
"value": [],
"itemStyle": {
"normal": {
"color": "#da9be8",
"borderWidth": 2,
"borderType": "dotted",
"borderColor": "#da9be8"
}
}
},
"sl": {
"name": "Support",
"value": [],
"itemStyle": {
"normal": {
"color": "#da9be8",
"borderWidth": 2,
"borderType": "dotted",
"borderColor": "#da9be8"
}
}
},
"patternHeight": 0.0296,
"value": [
13,
48.77,
16,
47.37,
17,
48.05
]
}
],
renderItem: function({dataIndex}, api) {
console.log(dataIndex);
const style = api.style(LINE_STYLE);
const {rl, sl, value} = option.series[1].data[dataIndex];
const children = [];
const group = {type: 'group', children};
const points = [];
for (let i = 0, len = value.length; i < len; i += 2) {
points.push(api.coord([value[i], value[i + 1]]));
}
children.push({
type: 'polyline',
shape: {
points
},
style,
styleEmphasis: api.styleEmphasis(EMPPHASIS_STYLE)
});
rl.value.length && children.push(buildLine(rl, api));
sl.value.length && children.push(buildLine(sl, api));
console.log(dataIndex);
return group;
}
}
],
"legend": {
"show": false
},
"grid": [
{
"height": 425,
"left": 0,
"right": 50,
"top": -1,
"containLabel": false,
"show": false,
"borderColor": "#555"
}
],
"xAxis": [
{
"type": "category",
"boundaryGap": true,
"max": "dataMax",
"axisLabel": {
"show": false
},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisPointer": {
"label": {
"show": false
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "#e6e6e6"
}
},
"data": [
"2017-07-20",
"2017-07-21",
"2017-07-24",
"2017-07-25",
"2017-07-26",
"2017-07-27",
"2017-07-28",
"2017-07-31",
"2017-08-01",
"2017-08-02",
"2017-08-03",
"2017-08-04",
"2017-08-07",
"2017-08-08",
"2017-08-09",
"2017-08-10",
"2017-08-11",
"2017-08-14",
"2017-08-15",
"2017-08-16",
"2017-08-17",
"2017-08-18",
"2017-08-21",
"2017-08-22",
"2017-08-23",
"2017-08-24",
"2017-08-25",
"2017-08-28",
"2017-08-29",
"2017-08-30",
"2017-08-31",
"2017-09-01",
"2017-09-05",
"2017-09-06",
"2017-09-07",
"2017-09-08",
"2017-09-11",
"2017-09-12",
"2017-09-13",
"2017-09-14",
"2017-09-15",
"2017-09-18",
"2017-09-19",
"2017-09-20",
"2017-09-21",
"2017-09-22",
"2017-09-25",
"2017-09-26",
"2017-09-27",
"2017-09-28",
"2017-09-29",
"2017-10-02",
"2017-10-03",
"2017-10-04",
"2017-10-05",
"2017-10-06",
"2017-10-09",
"2017-10-10",
"2017-10-11",
"2017-10-12",
"2017-10-13",
"2017-10-16",
"2017-10-17",
"2017-10-18",
"2017-10-19",
"2017-10-20",
"2017-10-23",
"2017-10-24",
"2017-10-25",
"2017-10-26",
"2017-10-27",
"2017-10-30",
"2017-10-31",
"2017-11-01",
"2017-11-02",
"2017-11-03",
"2017-11-06",
"2017-11-07",
"2017-11-08",
"2017-11-09",
"2017-11-10",
"2017-11-13",
"2017-11-14",
"2017-11-15",
"2017-11-16",
"2017-11-17",
"2017-11-20",
"2017-11-21",
"2017-11-22",
"2017-11-24",
"2017-11-27",
"2017-11-28",
"2017-11-29",
"2017-11-30",
"2017-12-01",
"2017-12-04",
"2017-12-05",
"2017-12-06",
"2017-12-07",
"2017-12-08",
"2017-12-11",
"2017-12-12",
"2017-12-13",
"2017-12-14",
"2017-12-15",
"2017-12-18",
"2017-12-19",
"2017-12-20",
"2017-12-21",
"2017-12-22",
"2017-12-26",
"2017-12-27",
"2017-12-28",
"2017-12-29",
"2018-01-02",
"2018-01-03",
"2018-01-04",
"2018-01-05",
"2018-01-08",
"2018-01-09",
"2018-01-10",
"2018-01-11",
"2018-01-12",
"2018-01-16",
"2018-01-17",
"2018-01-18",
"2018-01-19",
"2018-01-22",
"2018-01-23",
"2018-01-24",
"2018-01-25",
"2018-01-26"
]
}
],
"yAxis": [
{
"scale": true,
"boundaryGap": [
"5%",
"5%"
],
"splitArea": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#555",
"baseline": "top"
}
},
"axisLine": {
"lineStyle": {
"color": "#555"
}
},
"splitLine": {
"lineStyle": {
"color": "#e6e6e6"
}
},
"axisPointer": {
"label": {
"backgroundColor": "#0094ff"
}
},
"position": "right"
}
]
};