markPoint 位置echarts candlestick配置项内容和展示

      var params = {
    highValue: 17.8347,
    lowValue: 12.530701,
    lowValueIndex: 89,
    highValueIndex: 100
}

var upColor = '#ec0000'
var upBorderColor = '#8A0000'
var downColor = '#00da3c'
var downBorderColor = '#008F28'
var data0 = splitData([
    ['20120605', 14.873301, 14.873301, 14.7186, 14.939601],
    ['20120606', 15.0059, 14.8954, 14.7628, 15.028001],
    ['20120607', 14.8954, 15.0943, 14.784901, 15.2932],
    ['20120608', 15.912, 15.7573, 15.7131, 16.597101],
    ['20120611', 15.47, 15.912, 14.409201, 16.0888],
    ['20120612', 15.4258, 16.000401, 15.4258, 16.398201],
    ['20120613', 16.000401, 15.8899, 15.624701, 16.133001],
    ['20120614', 15.7573, 15.3595, 15.3153, 15.9341],
    ['20120615', 15.5142, 15.1827, 14.807, 15.5142],
    ['20120618', 15.2269, 15.6026, 15.2269, 15.691],
    ['20120619', 15.624701, 15.1385, 14.983801, 15.624701],
    ['20120620', 15.0501, 14.9175, 14.873301, 15.3153],
    ['20120621', 14.873301, 14.7186, 14.497601, 15.0501],
    ['20120625', 14.696501, 14.431301, 14.409201, 14.9175],
    ['20120626', 14.586, 14.829101, 14.254499, 14.873301],
    ['20120627', 14.608101, 14.652301, 14.475501, 14.873301],
    ['20120628', 14.652301, 14.475501, 14.254499, 14.740701],
    ['20120629', 14.3208, 14.475501, 14.298699, 14.6302],
    ['20120702', 14.873301, 14.586, 14.1661, 14.873301],
    ['20120703', 14.563901, 14.6302, 14.387101, 14.807],
    ['20120704', 14.453401, 14.497601, 14.453401, 14.6302],
    ['20120705', 14.387101, 14.431301, 14.3208, 14.519701],
    ['20120706', 14.696501, 14.983801, 14.563901, 15.028001],
    ['20120709', 14.7186, 14.409201, 14.365, 14.9175],
    ['20120710', 14.254499, 13.8788, 13.7683, 14.431301],
    ['20120711', 13.8567, 14.0114, 13.8567, 14.1882],
    ['20120712', 13.7683, 14.0998, 13.481, 14.1882],
    ['20120713', 14.0114, 13.9451, 13.7241, 14.1661],
    ['20120716', 13.9451, 12.9285, 12.8843, 13.9451],
    ['20120717', 13.1053, 13.2379, 12.729601, 13.481],
    ['20120718', 13.2379, 13.3042, 12.9285, 13.4589],
    ['20120719', 13.414701, 13.5252, 13.3042, 13.702],
    ['20120720', 13.4368, 13.481, 13.3926, 13.6578],
    ['20120723', 13.3042, 13.3042, 13.0611, 13.3042],
    ['20120724', 13.1274, 13.370501, 13.1053, 13.4368],
    ['20120725', 13.3484, 13.326301, 13.26, 13.4368],
    ['20120726', 13.1495, 13.1274, 13.1274, 13.370501],
    ['20120727', 13.3042, 13.0169, 11.8456, 13.3042],
    ['20120730', 12.729601, 12.155001, 12.0666, 12.906401],
    ['20120731', 12.199201, 12.044499, 11.8677, 12.199201],
    ['20120801', 11.934, 12.1108, 11.934, 12.199201],
    ['20120802', 12.088699, 11.8235, 11.6025, 12.155001],
    ['20120803', 11.8235, 12.0666, 11.8235, 12.088699],
    ['20120806', 11.934, 12.442301, 11.934, 12.5086],
    ['20120807', 12.5528, 12.574901, 12.309701, 12.7075],
    ['20120808', 12.442301, 12.7075, 12.155001, 12.818001],
    ['20120809', 12.7075, 12.8401, 12.597, 12.8843],
    ['20120810', 12.862201, 12.773801, 12.663301, 12.994801],
    ['20120813', 12.773801, 12.442301, 12.376, 12.773801],
    ['20120814', 12.442301, 12.729601, 12.3318, 12.729601],
    ['20120815', 12.7959, 12.729601, 12.530701, 12.7959],
    ['20120816', 12.906401, 12.7075, 12.574901, 12.906401],
    ['20120817', 12.7075, 12.729601, 12.597, 12.7517],
    ['20120820', 12.8401, 12.773801, 12.442301, 12.8401],
    ['20120821', 12.8401, 12.862201, 12.729601, 12.9285],
    ['20120822', 12.8401, 12.7959, 12.7075, 12.9727],
    ['20120823', 12.818001, 12.9285, 12.773801, 13.0169],
    ['20120824', 12.818001, 12.773801, 12.597, 12.950601],
    ['20120827', 12.773801, 12.486501, 12.376, 12.773801],
    ['20120828', 12.574901, 12.442301, 12.177101, 12.6412],
    ['20120829', 12.309701, 12.398101, 12.243401, 12.4644],
    ['20120830', 12.5086, 12.376, 12.199201, 12.5086],
    ['20120831', 12.376, 12.353901, 12.177101, 12.398101],
    ['20120903', 12.353901, 12.597, 12.3318, 12.597],
    ['20120904', 12.7517, 12.574901, 12.442301, 12.7517],
    ['20120905', 12.619101, 12.6854, 12.486501, 12.7075],
    ['20120906', 12.773801, 12.7959, 12.597, 12.8401],
    ['20120907', 12.729601, 13.1495, 12.597, 13.370501],
    ['20120910', 13.0832, 13.1274, 12.906401, 13.2158],
    ['20120911', 13.1053, 12.9285, 12.7959, 13.1274],
    ['20120912', 12.9285, 13.0169, 12.8843, 13.1274],
    ['20120913', 12.9285, 13.326301, 12.9285, 13.5252],
    ['20120914', 13.3926, 13.326301, 13.1274, 13.481],
    ['20120917', 13.282101, 12.9727, 12.950601, 13.3484],
    ['20120918', 13.1274, 12.994801, 12.818001, 13.1274],
    ['20120919', 12.994801, 12.994801, 12.862201, 13.0169],
    ['20120920', 12.906401, 12.729601, 12.574901, 12.994801],
    ['20120921', 12.663301, 12.6412, 12.530701, 12.862201],
    ['20120924', 12.6412, 12.574901, 12.309701, 12.7517],
    ['20120925', 12.906401, 12.442301, 12.4202, 13.26],
    ['20120926', 12.442301, 12.287601, 12.088699, 12.5086],
    ['20120927', 12.177101, 12.4644, 12.155001, 12.6412],
    ['20120928', 12.486501, 12.5086, 12.287601, 12.530701],
    ['20121008', 12.5086, 12.309701, 12.199201, 12.6412],
    ['20121009', 12.376, 12.729601, 12.309701, 12.818001],
    ['20121010', 12.663301, 12.8843, 12.663301, 12.9285],
    ['20121011', 12.8843, 12.7959, 12.6854, 12.906401],
    ['20121012', 12.8843, 12.7959, 12.597, 13.039001],
    ['20121015', 12.9285, 12.7075, 12.597, 12.9285],
    ['20121016', 12.597, 12.7959, 12.530701, 12.8843],
    ['20121017', 12.8843, 12.818001, 12.597, 12.8843],
    ['20121018', 12.8843, 12.994801, 12.619101, 13.2158],
    ['20121019', 12.9727, 13.1495, 12.9727, 13.3042],
    ['20121022', 12.9727, 14.475501, 12.9727, 14.475501],
    ['20121023', 14.475501, 15.9341, 14.475501, 15.9341],
    ['20121031', 16.884399, 15.691, 15.028001, 16.884399],
    ['20121101', 15.5142, 15.8236, 15.2269, 17.017],
    ['20121102', 15.624701, 16.044601, 15.1827, 16.309801],
    ['20121105', 15.7352, 16.2435, 15.2932, 16.9065],
    ['20121106', 16.022501, 16.221401, 15.4258, 16.796],
    ['20121107', 15.8899, 16.862301, 15.7573, 17.8347],
    ['20121108', 16.508699, 15.691, 15.6468, 17.414801],
    ['20121109', 15.3595, 15.1385, 14.829101, 15.47],
    ['20121112', 14.939601, 15.1385, 14.873301, 15.1827],
    ['20121113', 15.028001, 13.8125, 13.7683, 15.0501],
    ['20121114', 13.7904, 13.702, 13.414701, 13.923],
    ['20121115', 13.6357, 13.6136, 13.326301, 14.0556],
    ['20121116', 13.7462, 13.8125, 13.4589, 14.144],
    ['20121119', 13.8567, 13.7462, 13.282101, 13.8567],
    ['20121120', 13.702, 13.5915, 13.481, 14.0114],
    ['20121121', 13.5031, 14.1661, 13.3926, 14.2766],
    ['20121122', 13.9009, 13.7683, 13.702, 14.1219],
    ['20121123', 13.7683, 13.481, 13.481, 13.923],
    ['20121126', 13.481, 13.3484, 13.1495, 13.8567],
    ['20121127', 13.2379, 12.574901, 12.5528, 13.326301],
    ['20121128', 12.376, 12.6854, 12.243401, 12.8843],
    ['20121129', 12.597, 12.7075, 12.597, 13.1274],
    ['20121130', 13.9893, 13.9893, 13.9893, 13.9893],
    ['20121203', 15.3816, 15.3816, 15.3816, 15.3816],
    ['20121204', 16.309801, 15.912, 14.939601, 16.796],
    ['20121205', 16.133001, 15.8899, 15.4479, 16.751801],
    ['20121206', 15.6026, 17.4811, 15.492101, 17.4811],
    ['20121207', 17.436899, 17.0833, 16.4203, 17.436899],
    ['20121210', 16.597101, 17.149601, 16.4203, 17.901001],
    ['20121211', 16.6413, 16.199301, 16.199301, 17.348499],
    ['20121212', 15.912, 15.9341, 15.5142, 16.2656],
    ['20121213', 15.7573, 15.7352, 15.7352, 16.5529],
    ['20121214', 15.8899, 16.4645, 15.7573, 16.597101],
    ['20121217', 16.4203, 16.2435, 15.9341, 16.751801],
    ['20121218', 16.287701, 16.287701, 16.022501, 16.685501],
    ['20121219', 15.8678, 15.9783, 15.8015, 16.287701],
    ['20121220', 15.9562, 15.912, 15.6026, 16.022501],
    ['20121221', 15.912, 15.691, 15.5584, 16.022501],
    ['20121224', 15.6468, 15.9783, 15.6468, 16.022501],
    ['20121225', 16.2656, 17.348499, 15.9562, 17.5695],
    ['20121226', 17.503201, 17.1717, 16.751801, 17.5916],
    ['20121227', 17.2159, 16.133001, 16.0888, 17.238001],
    ['20121228', 16.0888, 16.376101, 15.8236, 16.508699],
    ['20121231', 16.4424, 16.4203, 16.199301, 17.149601],
    ['20130104', 16.4203, 16.4645, 15.9341, 16.5529],
    ['20130107', 16.2656, 16.2435, 16.044601, 16.376101],
    ['20130108', 16.2435, 16.398201, 16.221401, 16.6413],
    ['20130109', 16.221401, 16.376101, 16.110901, 16.575001],
    ['20130110', 16.2435, 16.4424, 16.2435, 16.751801],
    ['20130111', 16.4424, 15.6689, 15.624701, 16.5308],
    ['20130117', 16.354, 16.1772, 16.044601, 17.1938],
    ['20130118', 16.044601, 16.221401, 15.7573, 16.376101],
    ['20130121', 16.221401, 16.486601, 16.221401, 16.9286],
    ['20130122', 16.354, 16.022501, 16.022501, 16.398201],
    ['20130123', 16.022501, 16.0667, 15.8899, 16.3319],
    ['20130124', 16.0888, 15.8457, 15.7352, 16.508699],
    ['20130125', 15.7352, 15.072201, 14.983801, 15.912],
    ['20130128', 14.9175, 15.4037, 14.829101, 15.4258],
    ['20130129', 15.47, 15.580501, 15.3374, 15.8899],
    ['20130130', 15.6026, 15.5584, 15.249001, 15.8015],
    ['20130131', 15.6689, 15.1385, 15.116401, 15.6689],
    ['20130201', 15.160601, 15.2932, 15.1385, 15.4479],
    ['20130204', 15.4258, 15.47, 15.204801, 15.580501],
    ['20130205', 15.4258, 15.7794, 15.249001, 15.8457],
    ['20130206', 15.47, 15.7573, 15.47, 15.8015],
    ['20130207', 15.6026, 15.9783, 15.6026, 16.000401],
    ['20130208', 15.9783, 16.0888, 15.8457, 16.221401],
    ['20130218', 16.133001, 16.2435, 16.133001, 16.398201],
    ['20130219', 16.044601, 15.8899, 15.8015, 16.287701],
    ['20130220', 15.8678, 16.022501, 15.7352, 16.133001],
    ['20130221', 15.912, 15.7131, 15.5584, 16.022501],
    ['20130222', 15.580501, 16.133001, 15.580501, 16.2435],
    ['20130225', 16.287701, 16.7076, 16.1772, 17.017],
    ['20130226', 16.884399, 16.773901, 16.398201, 17.1717],
    ['20130227', 16.773901, 17.459, 16.773901, 17.68],
    ['20130228', 17.525299, 19.204899, 17.525299, 19.204899],
    ['20130301', 19.1828, 18.785, 18.5198, 19.492199],
    ['20130304', 17.8568, 16.972799, 16.9065, 18.0336],
    ['20130516', 18.652399, 18.652399, 18.652399, 18.652399],
    ['20130517', 20.508801, 20.508801, 20.508801, 20.508801],
    ['20130520', 22.542, 22.542, 22.542, 22.542],
    ['20130521', 24.796202, 24.796202, 24.796202, 24.796202],
    ['20130522', 26.431601, 27.2714, 25.724401, 27.2714],
    ['20130523', 26.962, 26.343201, 26.343201, 27.625],
    ['20130524', 25.989601, 25.989601, 24.840401, 26.343201],
    ['20130527', 25.591801, 25.901201, 25.415001, 26.2106],
    ['20130528', 25.901201, 26.2106, 25.194, 26.431601],
    ['20130529', 26.0338, 27.757601, 25.857, 28.818401],
    ['20130530', 26.962, 26.741001, 26.299, 27.403999],
    ['20130531', 26.741001, 25.503401, 25.503401, 26.8736],
    ['20130603', 25.194, 25.901201, 25.1056, 26.564201],
    ['20130604', 25.901201, 24.2216, 24.000599, 25.901201],
    ['20130605', 24.177399, 24.265799, 23.6912, 24.575201],
    ['20130606', 23.4702, 24.000599, 23.4702, 24.398401],
    ['20130607', 23.912199, 22.8514, 22.8514, 24.265799],
    ['20130613', 22.6304, 21.9674, 21.658001, 22.763],
    ['20130614', 22.232601, 22.674601, 21.9674, 22.895599],
    ['20130617', 22.763, 22.586201, 22.1884, 22.8514],
    ['20130618', 22.763, 23.072399, 22.3652, 23.072399],
    ['20130619', 22.7188, 22.895599, 21.923201, 22.895599],
    ['20130620', 22.807199, 22.321001, 22.2768, 23.6912],
    ['20130621', 21.437, 21.083401, 20.111002, 21.481201],
    ['20130624', 20.9508, 19.138599, 19.0502, 21.216002],
    ['20130625', 18.8734, 19.403799, 17.5916, 19.448],
    ['20130626', 19.138599, 19.668999, 18.6082, 19.7132],
]);
var sigIndex = 100;
var sigDate = '20121107';

function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}
option = {
    title: {
        text: 'SZ000638',
        left: '3%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
    },

    axisPointer: {
        link: {
            xAxisIndex: 'all'
        },
        label: {
            backgroundColor: '#777'
        }
    },
    grid: [{
        left: '10%',
        right: '10%',
        top: 80,
        height: 250
    }, ],
    xAxis: [{
        type: 'category',
        gridIndex: 0,
        data: data0.categoryData,
        scale: true,
        boundaryGap: false,
        axisLine: {
            onZero: false
        },
        splitLine: {
            show: false
        },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    }, ],
    yAxis: [{
        // /* 这个地方去掉注释后，可以看到差别
        max: function(value) {
            var h = (value.max - value.min) * 0.18
            return value.max + h;
        },
        min: function(value) {
            var h = (value.max - value.min) * 0.18
            return value.min - h;
        },
        scale: true,
        gridIndex: 0,
        splitNumber: 3,
        splitArea: {
            show: true
        }
    }, ],
    dataZoom: [{
        type: 'inside',
        startValue: '20120926',
        endValue: '20130107',
        xAxisIndex: [0],
        top: 10,
    }, {
        show: true,
        xAxisIndex: [0],
        type: 'slider',
        y: '90%',
        top: '5%',
        startValue: '20120926',
        endValue: '20130107',
    }],
    series: [{
        name: 'K线',
        type: 'candlestick',
        dimensions: ['date', 'open', 'close', 'low', 'high'],
        data: data0.values,
        itemStyle: {
            normal: {
                color: upColor,
                color0: downColor,
                borderColor: upBorderColor,
                borderColor0: downBorderColor
            }
        },
        markPoint: {
            label: {
                normal: {
                    formatter: function(param) {
                        return 'Sig';
                    }
                }
            },
            symbolSize: 38,
            data: [{
                coord: ['20121107', 18.191394000000003],
                itemStyle: {
                    normal: {
                        color: '#FF8000'
                    }
                }
            }, ]
        }
    }, ],
};

var highValue = Math.round(params.highValue * 100) / 100
var lowValue = Math.round(params.lowValue * 100) / 100
var last = data0.values.length
var data100 = []
for (j = 0; j < last; j++) {
    data100.push(highValue)
}

var data0 = []
for (j = 0; j < last; j++) {
    data0.push(lowValue)
}

var item = {
    name: 'G100%',
    type: 'line',
    data: data100,
    smooth: false,
    lineStyle: {
        normal: {
            opacity: 0.5,
            color: '#FF0000',
            type: 'dashed'
        }
    },
    markArea: {
        label: {
            normal: {
                position: 'right',
                color: '#FF0000'
            }
        },
        data: [
            [{
                name: '100% ' + data100[0],
                yAxis: data100[0]
            }, {
                yAxis: data100[0]
            }]
        ]
    },
    itemStyle: {
        normal: {
            opacity: 0,
            borderWidth: 0,
            color: '#FF0000',
            borderColor: '#FF0000',
        }
    }
}
if (typeof(params.highValueIndex) != "undefined") {
    item.markPoint = {
        label: {
            normal: {
                formatter: function(param) {
                    return 'G100%';
                }
            }
        },
        symbolSize: 40,
        data: [{
            coord: [params.highValueIndex, highValue],
            itemStyle: {
                normal: {
                    color: '	#DAA520'
                }
            }
        }, ]
    }
}
option.series.push(item)

item = {
    name: 'G0%',
    type: 'line',
    data: data0,
    smooth: false,
    lineStyle: {
        normal: {
            opacity: 0.5,
            color: '#FF0000',
            type: 'dashed'
        }
    },
    markArea: {
        label: {
            normal: {
                position: 'right',
                color: '#FF0000',
            }
        },
        data: [
            [{
                name: '0% ' + data0[0],
                yAxis: data0[0]
            }, {
                yAxis: data0[0]
            }]
        ]
    },
    itemStyle: {
        normal: {
            opacity: 0,
            borderWidth: 0,
            color: '#FF0000',
            borderColor: '#FF0000',
        }
    }
}

if (typeof(params.lowValueIndex) != "undefined") {
    item.markPoint = {
        label: {
            normal: {
                formatter: function(param) {
                    return 'G0%';
                }
            }
        },
        symbolRotate: 180,
        symbolSize: 40,
        data: [{
            coord: [params.lowValueIndex, lowValue],
            itemStyle: {
                normal: {
                    color: '	#DAA520'
                }
            }
        }, ]
    }
}