deep-viz/lib/Echarts/KLineChart.js

A React component library, provide concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function r(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,o){return t&&r(e.prototype,t),o&&r(e,o),e}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_echartsForReact=require("echarts-for-react"),_echartsForReact2=_interopRequireDefault(_echartsForReact),_Basic2=require("./Basic"),_Basic3=_interopRequireDefault(_Basic2),_utils=require("../utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var KLineChart=function(){function e(){return _classCallCheck(this,e),_possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return _inherits(e,_Basic3.default),_createClass(e,[{key:"componentWillReceiveProps",value:function(e){var t;this.chart&&((t=this.chart.getEchartsInstance()).clear(),e&&t.setOption(this.getOption(e)))}},{key:"getOption",value:function(e){var t,r=this,a=e.color,o=e.config,i=e.onTooltipFormat,n={color:a||this.color,legend:{data:o.y.legend&&0<o.y.legend.length?[o.y.legend[0]]:[],textStyle:{color:this.fontColor,fontSize:this.fontSize},top:15,itemHeight:10,itemWidth:15,itemGap:5},tooltip:{show:!!o.tooltipShow||!0,enterable:!0,trigger:"axis",backgroundColor:"transparent",padding:0,textStyle:{fontSize:12,color:o.tooltipColor||"black"},axisPointer:{type:"cross"},position:[0,0],formatter:function(e){var o="<div><p>";return o+="时间："+e[0].axisValue+" 开："+(0,_utils.comdify)(e[0].data[1])+" 高："+(0,_utils.comdify)(e[0].data[4])+"\n           低："+(0,_utils.comdify)(e[0].data[3])+" 收："+(0,_utils.comdify)(e[0].data[2]),e.forEach(function(e,t){0<t&&(o+=' <span style="color: '+(a||r.color)[t-1]+'">'+e.seriesName+"："+(0,_utils.comdify)(e.data)+"</span>")}),o+="</p></div>"}},axisPointer:{link:{xAxisIndex:"all"},label:{backgroundColor:o.crossLabelBackcolor||"#108EE9"}},xAxis:[],yAxis:[],series:[{name:o.y.legend&&0<o.y.legend.length&&o.y.legend[0],type:"candlestick",hoverAnimation:!1,legendHoverLink:!1,data:o.y.kData,itemStyle:{normal:{color:o.upColor||"#F04B5B",color0:o.downColor||"#2BBE65",borderColor:null,borderColor0:null}}}]};return o.y.lineData.forEach(function(e,t){n.legend.data.push(o.y.legend[t+1]),n.series.push({name:o.y.legend[t+1],type:"line",data:e,hoverAnimation:!1,symbolSize:0})}),o.volume&&o.volume.show?(n.series.push({type:"bar",xAxisIndex:1,yAxisIndex:1,data:o.volume.data,axisPointer:{show:!1}}),n.visualMap={show:!1,seriesIndex:1+o.y.lineData.length,dimension:2,pieces:[{value:1,color:o.upColor||"#F04B5B"},{value:-1,color:o.downColor||"#2BBE65"}]},n.grid=[{show:!1,left:o.grid&&o.grid.left||80,right:o.grid&&o.grid.right||10,top:o.grid&&o.grid.top||30,bottom:o.grid&&o.grid.bottom||10,height:o.grid&&o.grid.height||230,borderColor:this.gridColor},{show:!1,left:o.grid&&o.grid.barLeft||80,right:o.grid&&o.grid.barRight||10,top:o.grid&&o.grid.barTop||290,bottom:o.grid&&o.grid.barBottom||10,height:o.grid&&o.grid.barHeight||80,borderColor:this.gridColor}],n.xAxis=[{type:"category",data:o.x.data,name:o.x.name,min:"dataMin",max:"dataMax",boundaryGap:!1,axisLine:{onZero:!1,lineStyle:{color:this.fontColor}},axisLabel:{showMaxLabel:null}},{type:"category",data:o.x.data,name:o.x.name,gridIndex:1,min:"dataMin",max:"dataMax",scale:!0,boundaryGap:!1,axisLine:{onZero:!1},axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1}}],n.yAxis=[{name:o.y.name||null,position:o.y.position||"left",scale:!0,axisLine:{lineStyle:{color:this.fontColor}},splitLine:{show:!1}},{name:o.y.name||null,gridIndex:1,scale:!0,axisLabel:{show:!1},axisLine:{show:!1},axisTick:{show:!1},splitLine:{show:!1}}],o.dataZoom&&(e=(t=o.dataZoom).start,t=t.end,n.dataZoom=[{xAxisIndex:[0,1],start:null==e?30:e,end:t||100,type:"inside"},{type:"slider",xAxisIndex:[0,1],show:!0,start:null==e?30:e,end:t||100}])):(n.grid={left:o.grid&&o.grid.left||30,right:o.grid&&o.grid.right||10,top:o.grid&&o.grid.top||30,bottom:o.grid&&o.grid.bottom||10,height:o.grid&&o.grid.height||330,borderColor:this.gridColor,containLabel:!0},n.xAxis={type:"category",data:o.x.data,name:o.x.name,min:"dataMin",max:"dataMax",axisLine:{lineStyle:{color:this.fontColor}},axisLabel:{showMaxLabel:null}},n.yAxis={name:o.y.name||null,position:o.y.position||"left",scale:!0,axisLine:{lineStyle:{color:this.fontColor}},splitLine:{show:!1}},o.dataZoom&&(n.dataZoom=[{start:o.dataZoom.start||50,end:o.dataZoom.end||100,type:"inside"}])),i&&(n.tooltip.formatter=function(e){return i(e)}),o.x.xLabelCallback&&"function"==typeof o.x.xLabelCallback&&(Array.isArray(n.xAxis)?n.xAxis[0].axisLabel.formatter=function(e,t){return o.x.xLabelCallback(e,t)}:n.xAxis.axisLabel.formatter=function(e,t){return o.x.xLabelCallback(e,t)}),n}},{key:"render",value:function(){var t=this;return _react2.default.createElement(_echartsForReact2.default,{ref:function(e){t.chart=e},option:this.getOption(this.props),style:this.props.style||{height:450,width:"100%"},notMerge:!0,lazyUpdate:!1,onEvents:this.props.onEvents})}}]),e}();(exports.default=KLineChart).propTypes={color:_propTypes2.default.array,config:_propTypes2.default.shape({x:_propTypes2.default.object.isRequired,y:_propTypes2.default.shape({kData:_propTypes2.default.array.isRequired,lineData:_propTypes2.default.array,legend:_propTypes2.default.array,position:_propTypes2.default.string,name:_propTypes2.default.string}).isRequired,upColor:_propTypes2.default.string,downColor:_propTypes2.default.string,bar:_propTypes2.default.object,dataZoom:_propTypes2.default.object,grid:_propTypes2.default.object,tooltipColor:_propTypes2.default.string,tooltipShow:_propTypes2.default.bool,crossLabelBackcolor:_propTypes2.default.string}).isRequired,style:_propTypes2.default.object,onTooltipFormat:_propTypes2.default.func,onEvents:_propTypes2.default.object};