series type custom画图echarts rect配置项内容和展示
如题，圈住区域出界
配置项如下
option = {
"title": {
"show": false,
"text": "",
"left": 0
},
"tooltip": {
"trigger": "none",
"axisPointer": {
"type": "cross"
}
},
"axisPointer": {
"label": {
"backgroundColor": "#cccccc",
"textStyle": {
"color": "#333333",
"fontSize": 12
}
},
"link": {
"xAxisIndex": "all"
}
},
"grid": [{
"left": "5%",
"right": "35",
"bottom": "0%",
"top": "5%",
"height": "75%"
}, {
"left": "5%",
"right": "35",
"top": "90%",
"bottom": "0",
"height": "10%"
}],
"xAxis": [{
"type": "category",
"gridIndex": 0,
"data": ["03-06-2017", "03-07-2017", "03-08-2017", "03-09-2017", "03-10-2017", "03-13-2017", "03-14-2017",
"03-15-2017", "03-16-2017", "03-17-2017", "03-20-2017", "03-21-2017", "03-22-2017", "03-23-2017",
"03-24-2017", "03-27-2017", "03-28-2017", "03-29-2017", "03-30-2017", "03-31-2017", "04-03-2017",
"04-04-2017", "04-05-2017", "04-06-2017", "04-07-2017", "04-10-2017", "04-11-2017", "04-12-2017",
"04-13-2017", "04-17-2017", "04-18-2017", "04-19-2017", "04-20-2017", "04-21-2017", "04-24-2017",
"04-25-2017", "04-26-2017", "04-27-2017", "04-28-2017", "05-01-2017", "05-02-2017", "05-03-2017",
"05-04-2017", "05-05-2017", "05-08-2017", "05-09-2017", "05-10-2017", "05-11-2017", "05-12-2017",
"05-15-2017", "05-16-2017", "05-17-2017", "05-18-2017", "05-19-2017", "05-22-2017", "05-23-2017",
"05-24-2017", "05-25-2017", "05-26-2017", "05-30-2017", "05-31-2017", "06-01-2017", "06-02-2017",
"06-05-2017", "06-06-2017", "06-07-2017", "06-08-2017", "06-09-2017", "06-12-2017", "06-13-2017",
"06-14-2017", "06-15-2017", "06-16-2017", "06-19-2017", "06-20-2017", "06-21-2017", "06-22-2017",
"06-23-2017", "06-26-2017", "06-27-2017", "06-28-2017", "06-29-2017", "06-30-2017", "07-03-2017",
"07-05-2017"
],
"scale": true,
"boundaryGap": true,
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#999999"
}
},
"min": "dataMin",
"max": "dataMax",
"axisPointer": {
"z": 100
}
}, {
"type": "category",
"gridIndex": 1,
"data": ["03-06-2017", "03-07-2017", "03-08-2017", "03-09-2017", "03-10-2017", "03-13-2017", "03-14-2017",
"03-15-2017", "03-16-2017", "03-17-2017", "03-20-2017", "03-21-2017", "03-22-2017", "03-23-2017",
"03-24-2017", "03-27-2017", "03-28-2017", "03-29-2017", "03-30-2017", "03-31-2017", "04-03-2017",
"04-04-2017", "04-05-2017", "04-06-2017", "04-07-2017", "04-10-2017", "04-11-2017", "04-12-2017",
"04-13-2017", "04-17-2017", "04-18-2017", "04-19-2017", "04-20-2017", "04-21-2017", "04-24-2017",
"04-25-2017", "04-26-2017", "04-27-2017", "04-28-2017", "05-01-2017", "05-02-2017", "05-03-2017",
"05-04-2017", "05-05-2017", "05-08-2017", "05-09-2017", "05-10-2017", "05-11-2017", "05-12-2017",
"05-15-2017", "05-16-2017", "05-17-2017", "05-18-2017", "05-19-2017", "05-22-2017", "05-23-2017",
"05-24-2017", "05-25-2017", "05-26-2017", "05-30-2017", "05-31-2017", "06-01-2017", "06-02-2017",
"06-05-2017", "06-06-2017", "06-07-2017", "06-08-2017", "06-09-2017", "06-12-2017", "06-13-2017",
"06-14-2017", "06-15-2017", "06-16-2017", "06-19-2017", "06-20-2017", "06-21-2017", "06-22-2017",
"06-23-2017", "06-26-2017", "06-27-2017", "06-28-2017", "06-29-2017", "06-30-2017", "07-03-2017",
"07-05-2017"
],
"scale": true,
"boundaryGap": true,
"axisLine": {
"onZero": false,
"lineStyle": {
"color": "#dddddd"
}
},
"axisTick": {
"show": false,
"interval": 1
},
"splitLine": {
"show": false,
"lineStyle": {
"color": ["#f5f5f5"]
}
},
"splitNumber": 20,
"axisLabel": {
"show": false,
"textStyle": {
"color": "#999",
"fontSize": 10
}
},
"min": "dataMin",
"max": "dataMax",
"axisPointer": {
"label": {}
}
}],
"yAxis": [{
"scale": true,
"gridIndex": 0,
"splitArea": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#999",
"fontSize": 10
}
},
"axisLine": {
"lineStyle": {
"color": "#dddddd"
}
},
"min": "dataMin",
"max": "dataMax",
"boundaryGap": ["1%", "1%"],
"position": "right"
}, {
"scale": true,
"gridIndex": 1,
"axisLabel": {
"show": false,
"textStyle": {
"color": "#999",
"fontSize": 10
}
},
"axisLine": {
"show": false,
"lineStyle": {
"color": "#dddddd"
}
},
"axisTick": {
"show": false,
"lineStyle": {}
},
"splitLine": {
"show": false
},
"axisPointer": {
"label": {}
},
"min": "dataMin",
"max": "dataMax",
"position": "right",
"interval": 1848091
}],
"dataZoom": [{
"type": "inside",
"xAxisIndex": [0, 1],
"startValue": 55,
"endValue": 84,
"zoomLock": true
}],
"series": [{
"name": "日K",
"type": "candlestick",
"data": [
[226.58, 227.92, 225, 228.34],
[226.95, 228.01, 225.94, 228.01],
[227.17, 223.82, 223.56, 227.17],
[
224, 222.34, 221.66, 225.4
],
[222.34, 220.07, 218.6, 224.77],
[218.53, 217.26, 215.635, 219.41],
[
217, 219.35, 215.93, 219.85
],
[219.28, 223.13, 218.71, 223.69],
[222.86, 220.54, 219.74, 223.44],
[
221.37, 222.49, 221.045, 225.625
],
[222.71, 223.64, 220.65, 224.06],
[223.77, 224.28, 222.76,
225.5
],
[224.38, 225.77, 222.38, 226.31],
[224.82, 225.92, 224.44, 227.74],
[226.1, 222.91, 222.82, 227.18
],
[221.69, 220.91, 220.5, 224.9],
[220.88, 222.16, 218.86, 222.33],
[221.55, 219.95,
217.71, 221.86
],
[219.08, 219.4, 217.19, 220.795],
[219.49, 218.91, 218.071, 221.385],
[219,
219.31, 216.063, 220.19
],
[219.26, 220.31, 217.95, 221.8],
[220.01, 222.29, 219.84, 223.47],
[
221.83, 222.64, 221.37, 223.61
],
[223.06, 223.6, 222.61, 224.17],
[223.61, 225.84, 223.15, 226.01],
[
225.99, 226.37, 225.64, 227.21
],
[225.46, 224.3, 223.41, 226.81],
[223.51, 225.97, 223.48, 226.3],
[
226.96, 231.19, 225.77, 231.22
],
[230.08, 231.18, 228.31, 232.21],
[231.68, 229.99, 229.37, 231.68
],
[230.24, 229.4, 228.18, 230.4],
[229.28, 228.37, 228.33, 230.23],
[228.93, 226.47, 222.57,
229.03
],
[226.47, 225.54, 224.7, 226.75],
[225.62, 223.93, 223.3, 225.62],
[223.93, 213, 211.022,
223.84
],
[211.91, 209.38, 208.46, 212.97],
[210.33, 207.23, 205.01, 211.53],
[207.01, 207.27,
206.18, 210.41
],
[208.08, 205.53, 203.6, 208.54],
[205.15, 207.63, 201.97, 208.08],
[207.79,
208.25, 206.3, 210
],
[208.55, 208.45, 206.96, 208.77],
[207.95, 208.07, 206.77, 208.3],
[207.88,
208.92, 207.75, 211.68
],
[208.07, 208.47, 207.19, 209.3],
[208.17, 208.64, 207.38, 209.36],
[
208.37, 209.73, 208.31, 210.06
],
[209.68, 208.14, 207.15, 210.03],
[207.37, 212.95, 207.37, 214.18
],
[213.37, 216.12, 212.38, 216.16],
[215.64, 214.48, 213.8, 216.1899],
[214.72, 215.6, 213.96,
216.73
],
[215.82, 217.2, 215.11, 217.84],
[217, 217.57, 216.6, 218.99],
[217.76, 217.09, 216.2962,
218.33
],
[217.83, 216.39, 215.915, 217.98],
[216.44, 214.35, 214, 216.82],
[214.56, 215.35, 214.18, 215.79
],
[215.21, 212.27, 210.3, 215.3],
[213, 213.92, 212.44, 214.32],
[213.71, 211.35,
210.85, 213.82
],
[211.35, 207.9, 207.65, 211.35],
[207.85, 209.87, 207.69, 209.87],
[209.87,
210.91, 206.74, 211.72
],
[209.6, 207.56, 206.95, 210.89],
[205.56, 207.04, 204.84, 208.35],
[
206.86, 208.4, 206.23, 208.43
],
[208.05, 209.88, 207.55, 210.94],
[209.42, 212.68, 209, 212.75],
[
213, 213.66, 211.33, 214.11
],
[214.21, 211.78, 210.76, 214.21],
[211.54, 211.75, 207.11, 212],
[
212.12, 212.3, 211.49, 213.405
],
[211.81, 211.18, 209.87, 212.145],
[211.23, 213.11, 211.23,
214.96
],
[214.21, 212.49, 211.98, 215.62],
[211.99, 210.27, 209.6, 212.924],
[210.78, 209.44,
209.355, 211.46
],
[208.63, 207.57, 206.9, 209.37],
[208.71, 208.53, 207.53, 210],
[209.93, 212.73,
208.43, 213.54
],
[212.23, 208.06, 208.01, 212.26]
],
"itemStyle": {
"normal": {
"color": "#00ab00",
"color0": "#e93030",
"borderColor": "#00ab00",
"borderColor0": "#e93030"
}
},
"markArea": {
"silent": true,
"itemStyle": {
"normal": {
"color": "#f2dbdb",
"borderWidth": 1,
"borderType": "dashed",
"borderColor": "#f2dbdb"
}
},
"data": []
},
"markLine": {
"symbol": ["none", "none"],
"lineStyle": {
"normal": {
"color": "#da9be8",
"width": 2
},
"emphasis": {
"color": "#da9be8",
"width": 2
}
},
"data": []
}
}, {
"name": "Volumn",
"type": "bar",
"xAxisIndex": 1,
"yAxisIndex": 1,
"data": [424320, 667610, 861329, 676020, 767397, 894005, 667869, 742691, 798037, 1477814, 721969, 955064,
759030, 843017, 635639, 576107, 760143, 703500, 923930, 1004687, 856764, 745131, 667120, 550537,
435228, 518888, 505439, 638251, 441147, 694614, 604326, 453781, 752881, 819809, 976356, 526442,
731934, 2272411, 1423353, 1152457, 1035021, 997540, 1232436, 858177, 1009129, 803976, 683844,
912863, 766099, 832362, 999674, 1665329, 1652290, 2114691, 938054, 839852, 773581, 1018483, 976297,
711444, 2060934, 1251077, 1064611, 919015, 1354989, 1303180, 1856075, 1275954, 1481467, 1431831,
1104447, 855424, 943787, 726564, 937318, 585908, 632189, 703832, 573893, 777597, 627353, 669687,
620901, 562898, 756519
],
"itemStyle": {
"normal": {}
}
}, {
"type": "custom",
"xAxisIndex": 0,
"yAxisIndex": 0,
"label": {
"normal": {
"show": false,
"position": "top"
}
},
renderItem: function(params, api) {
let start = api.coord([api.value(0), api.value(2)]);
let end = api.coord([api.value(1), api.value(3)]);
let style = api.style();
let fix = api.size([1, 0])[0] / 2;
// 针对一根bar进行定制
let addition = yMax - yMin;
let offset = api.value(1) === api.value(0) ? addition * constantConfig.LARGE_OFFSET : addition * constantConfig.SMALL_OFFSET;
let padding = api.coord([0, offset])[1] - api.coord([0, 0])[1];
return {
type: 'rect',
shape: {
x: start[0] - fix,
y: start[1] - padding,
width: end[0] - start[0] + fix * 2,
height: end[1] - start[1] + 2 * padding
},
style
};
},
"dimensions": [],
"encode": {
"x": [0, 1],
"y": [2, 3],
"tooltip": [0, 1, 2, 3],
"itemName": [2]
},
"data": [{
"name": "CandleStick",
"value": [68, 70, 204.84, 210.94],
"itemStyle": {
"normal": {
"color": "rgba(0, 136, 0, .2)",
"borderWidth": 0,
"borderType": "dotted",
"borderColor": "rgba(0, 136, 0, .2)"
}
}
}]
}],
"backgroundColor": "rgba(255,255,255,1)"
}
截图如下
