項目中遇到以下圖的需求javascript
查閱echarts配置項文檔發現彷佛沒有markLine label的樣式選項html
請問怎麼才能給label增長背景呢?java
附:segmentfault
在線echarts gallery代碼
http://gallery.echartsjs.com/…echarts
echarts配置項文檔
http://echarts.baidu.com/opti…ide
參考:https://segmentfault.com/q/1010000013784396code
var upColor = '#ec0000'; var upBorderColor = '#8A0000'; var downColor = '#00da3c'; var downBorderColor = '#008F28'; var gridBgColor = '#f3f3f3'; // 數據意義:開盤(open),收盤(close),最低(lowest),最高(highest) window.data0 = splitData([ ['2013/5/16', 2221.34,2251.81,2210.77,2252.87], ['2013/5/17', 2249.81,2282.87,2248.41,2288.09], ['2013/5/20', 2286.33,2299.99,2281.9,2309.39], ['2013/5/21', 2297.11,2305.11,2290.12,2305.3], ['2013/5/22', 2303.75,2302.4,2292.43,2314.18], ['2013/5/23', 2293.81,2275.67,2274.1,2304.95], ['2013/5/24', 2281.45,2288.53,2270.25,2292.59], ['2013/5/27', 2286.66,2293.08,2283.94,2301.7], ['2013/5/28', 2293.4,2321.32,2281.47,2322.1], ['2013/5/29', 2323.54,2324.02,2321.17,2334.33], ['2013/5/30', 2316.25,2317.75,2310.49,2325.72], ['2013/5/31', 2320.74,2300.59,2299.37,2325.53], ['2013/6/3', 2300.21,2299.25,2294.11,2313.43], ['2013/6/4', 2297.1,2272.42,2264.76,2297.1], ['2013/6/5', 2270.71,2270.93,2260.87,2276.86], ['2013/6/6', 2264.43,2242.11,2240.07,2266.69], ['2013/6/7', 2242.26,2210.9,2205.07,2250.63], ['2013/6/13', 2190.1,2148.35,2126.22,2190.1] ]); window.currentPriceData = data0.values.map(v => v[0]) 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 }; } window.calculateMA = function (dayCount) { var result = []; for (var i = 0, len = data0.values.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += data0.values[i - j][1]; } result.push(sum / dayCount); } return result; } option = { backgroundColor: gridBgColor, title: { text: '上證指數', left: 0 }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: { data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'] }, grid: { left: '5%', right: '15%', bottom: '15%' }, xAxis: { type: 'category', data: data0.categoryData, scale: true, boundaryGap : false, axisLine: {onZero: false}, splitLine: {show: false}, splitNumber: 20, min: 'dataMin', max: 'dataMax', axisTick: { // show: false, inside: true }, axisLabel: { align: "center", showMinLabel: false } }, yAxis: { position: 'left', // offset: 60, scale: true, // splitArea: { // show: true // }, splitLine: {show: false}, axisTick: { // show: false, inside: true }, axisLabel: { inside: true } }, dataZoom: [ // { // type: 'inside', // start: 50, // end: 100, // zoomLock: true // } // ,{ // show: true, // type: 'slider', // y: '90%', // start: 50, // end: 100 // } ], series: [ { name: '日K', type: 'candlestick', data: data0.values, itemStyle: { normal: { color: upColor, color0: downColor, borderColor: upBorderColor, borderColor0: downBorderColor } }, markLine: { symbol: ['none', 'none'], // symbolSize: [10, 80], // symbolOffset: [60, 50], data: [ // { // name: 'min line on close', // type: 'min', // lineStyle: { // type: "solid" // }, // valueDim: 'close' // }, // { // name: 'max line on close', // type: 'max', // lineStyle: { // type: "solid" // }, // valueDim: 'close' // } ] } }, { name: 'currentPrice', type: 'line', data: data0.values.map( v => v[0]), smooth: true, lineStyle: { normal: {opacity: 0.1} }, markLine: { silent: true, symbol: ['rect'], lineStyle: { type: "solid" }, data: [ [{ symbol: 'arrow', yAxis: 2290.1, xAxis: '2013/6/13', x: '90%', label: { normal: { position: 'start', formatter: '2290.1' } }, name: 'Y軸值爲2290.1 的水平線' }, { symbol: 'none', x: '5%', yAxis: 2290.1 }] ] } } ] };