| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/jquery.min.js"></script> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/prettify/prettify.js"></script> |
| <script src="../common/showCode.js"></script> |
| <script src="../data/stock-DJI.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| <link rel="stylesheet" href="../common/prettify/prettify.css"> |
| <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script> |
| <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"> |
| </head> |
| <body> |
| |
| <div id="main"> |
| <pre class="prettyprint"> |
| |
| // 使用 "custom series" 实现 OHLC 图 |
| |
| option = { |
| ..., |
| series: [{ |
| name: 'Dow-Jones index (OHLC)', |
| type: 'custom', |
| dimensions: [null, 'open', 'close', 'lowest', 'highest'], |
| encode: { |
| x: 0, |
| y: [1, 2, 3, 4], |
| tooltip: [1, 2, 3, 4] |
| }, |
| data: [...], |
| // 在 renderItem 表达自定义的逻辑。 |
| renderItem: renderItem |
| }] |
| } |
| |
| // 为每个数据项调用一次 |
| function renderItem(params, api) { |
| |
| // 取得数值 |
| var xValue = api.value(0); |
| |
| // 数值转换为坐标系的点 |
| var openPoint = api.coord([xValue, api.value(1)]); |
| var closePoint = api.coord([xValue, api.value(2)]); |
| var lowPoint = api.coord([xValue, api.value(3)]); |
| var highPoint = api.coord([xValue, api.value(4)]); |
| var halfWidth = api.size([1, 0])[0] * 0.35; |
| |
| var style = api.style({ |
| stroke: api.visual('color') |
| }); |
| |
| // 构造图形元素 |
| return { |
| type: 'group', |
| children: [{ |
| type: 'line', |
| shape: { |
| x1: lowPoint[0], y1: lowPoint[1], |
| x2: highPoint[0], y2: highPoint[1] |
| }, |
| style: style |
| }, { |
| type: 'line', |
| shape: { |
| x1: openPoint[0], y1: openPoint[1], |
| x2: openPoint[0] - halfWidth, y2: openPoint[1] |
| }, |
| style: style |
| }, { |
| type: 'line', |
| shape: { |
| x1: closePoint[0], y1: closePoint[1], |
| x2: closePoint[0] + halfWidth, y2: closePoint[1] |
| }, |
| style: style |
| }] |
| }; |
| } |
| |
| |
| |
| </pre> |
| <div id="chart"></div> |
| </div> |
| |
| |
| <script> |
| |
| |
| function splitData(rawData) { |
| var categoryData = []; |
| var values = []; |
| for (var i = 0; i < rawData.length; i++) { |
| categoryData.push(rawData[i][0]); |
| rawData[i][0] = i; |
| values.push(rawData[i]); |
| } |
| return { |
| categoryData: categoryData, |
| values: values |
| }; |
| } |
| |
| |
| function renderItem(params, api) { |
| var xValue = api.value(0); |
| var openPoint = api.coord([xValue, api.value(1)]); |
| var closePoint = api.coord([xValue, api.value(2)]); |
| var lowPoint = api.coord([xValue, api.value(3)]); |
| var highPoint = api.coord([xValue, api.value(4)]); |
| var halfWidth = api.size([1, 0])[0] * 0.35; |
| var style = api.style({ |
| stroke: api.visual('color') |
| }); |
| |
| return { |
| type: 'group', |
| children: [{ |
| type: 'line', |
| shape: { |
| x1: lowPoint[0], y1: lowPoint[1], |
| x2: highPoint[0], y2: highPoint[1] |
| }, |
| style: style |
| }, { |
| type: 'line', |
| shape: { |
| x1: openPoint[0], y1: openPoint[1], |
| x2: openPoint[0] - halfWidth, y2: openPoint[1] |
| }, |
| style: style |
| }, { |
| type: 'line', |
| shape: { |
| x1: closePoint[0], y1: closePoint[1], |
| x2: closePoint[0] + halfWidth, y2: closePoint[1] |
| }, |
| style: style |
| }] |
| }; |
| } |
| |
| |
| var data = splitData(rawData); |
| |
| option = { |
| backgroundColor: '#eee', |
| animation: false, |
| legend: { |
| bottom: 10, |
| left: 'center', |
| data: ['Dow-Jones index (OHLC)', 'Dow-Jones index (candlestick)'], |
| selectedMode: 'single', |
| selected: { |
| 'Dow-Jones index (OHLC)': true, |
| 'Dow-Jones index (candlestick)': false |
| } |
| }, |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| type: 'cross' |
| }, |
| backgroundColor: 'rgba(245, 245, 245, 0.8)', |
| borderWidth: 1, |
| borderColor: '#ccc', |
| padding: 10, |
| textStyle: { |
| color: '#000' |
| }, |
| position: function (pos, params, el, elRect, size) { |
| var obj = {top: 10}; |
| obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; |
| return obj; |
| }, |
| extraCssText: 'width: 170px' |
| }, |
| axisPointer: { |
| link: {xAxisIndex: 'all'}, |
| label: { |
| backgroundColor: '#777' |
| } |
| }, |
| toolbox: { |
| feature: { |
| dataZoom: { |
| yAxisIndex: false |
| }, |
| brush: { |
| type: ['lineX', 'clear'] |
| } |
| } |
| }, |
| grid: [ |
| { |
| left: '10%', |
| right: '8%', |
| bottom: 150 |
| } |
| ], |
| xAxis: [ |
| { |
| type: 'category', |
| data: data.categoryData, |
| scale: true, |
| boundaryGap : false, |
| axisLine: {onZero: false}, |
| splitLine: {show: false}, |
| splitNumber: 20, |
| min: 'dataMin', |
| max: 'dataMax', |
| axisPointer: { |
| z: 100 |
| } |
| } |
| ], |
| yAxis: [ |
| { |
| scale: true, |
| splitArea: { |
| show: true |
| } |
| } |
| ], |
| dataZoom: [ |
| { |
| type: 'inside', |
| start: 98, |
| end: 100, |
| minValueSpan: 10 |
| }, |
| { |
| show: true, |
| type: 'slider', |
| bottom: 60, |
| start: 98, |
| end: 100, |
| minValueSpan: 10 |
| } |
| ], |
| series: [ |
| { |
| name: 'Dow-Jones index (OHLC)', |
| type: 'custom', |
| renderItem: renderItem, |
| dimensions: [null, 'open', 'close', 'lowest', 'highest'], |
| encode: { |
| x: 0, |
| y: [1, 2, 3, 4], |
| tooltip: [1, 2, 3, 4] |
| }, |
| data: data.values |
| }, |
| { |
| name: 'Dow-Jones index (candlestick)', |
| type: 'candlestick', |
| dimensions: [null, 'open', 'close', 'lowest', 'highest'], |
| data: data.values.map(function (item) { |
| return item.slice(1); |
| }) |
| } |
| ] |
| }; |
| |
| initShowCode(option, {codeWidth: 600}); |
| |
| |
| </script> |
| </body> |
| </html> |
