deep-viz/lib/Echarts/LineChart.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 _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o,r=arguments[t];for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_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);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 LineChart=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=this,o=e.color,i=e.config,r=e.onTooltipFormat,a={color:o||this.color,tooltip:{show:!1!==i.showTooltip,trigger:"axis",enterable:!0},grid:{show:!1,left:i.grid&&i.grid.left||10,right:i.grid&&i.grid.right||0,top:i.grid&&i.grid.top||30,bottom:i.grid&&i.grid.bottom||10,borderColor:this.gridColor,containLabel:!0},legend:{show:!1!==i.isLegendShow,data:[],textStyle:{color:this.fontColor,fontSize:this.fontSize}},toolbox:{show:!!i.toolbox,itemSize:this.fontSize,iconStyle:{normal:{borderColor:this.fontColor},emphasis:{borderColor:this.emphasisColor}},feature:{dataZoom:{},dataView:{readOnly:!1},restore:{},saveAsImage:{}},right:15,top:0},xAxis:_extends({show:!1!==i.x.isXAxisShow,type:"category",boundaryGap:!1,data:i.x.data,name:i.x.name,nameTextStyle:{color:this.fontColor,fontSize:this.fontSize},axisLabel:{textStyle:{color:this.fontColor,fontSize:this.fontSize},rotate:i.x.rotate||0,interval:i.x.showAll?0:"auto"}},i.x.custom),yAxis:[],series:[]};return i.title&&(a.title={text:i.title,subtext:i.subtitle,textStyle:{color:this.titleColor,fontSize:this.titleSize}},a.legend.right=10),i.y.forEach(function(o,r){o.data.forEach(function(e,t){!1!==i.isLegendShow&&a.legend.data.push(o.legend[t]),a.series.push({name:!1!==i.isLegendShow?o.legend[t]:void 0,type:"line",smooth:!!o.smooth,yAxisIndex:r<1?0:1,data:e,stack:o.stack||null,areaStyle:o.areaStyle?o.areaStyle[t]:null,lineStyle:o.lineStyle?o.lineStyle[t]:null,showSymbol:!1!==o.showSymbol})}),a.yAxis.push(_extends({show:!1!==o.isYAxisShow,type:"value",min:o.min,max:o.max,name:o.name||null,nameTextStyle:{color:t.fontColor,fontSize:t.fontSize},splitLine:{show:!!o.splitLine,lineStyle:{type:"dotted"}},nameGap:12,axisLabel:{formatter:"{value}",textStyle:{color:t.fontColor,fontSize:t.fontSize}}},o.custom))}),r&&(a.tooltip.formatter=function(e){return r(e)}),i.dataZoom&&(o=i.dataZoom.start,a.dataZoom=[{show:!0,realtime:!0,start:null==o?30:o,end:i.dataZoom.end||100}]),a}},{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:250,width:"100%"},notMerge:!0,lazyUpdate:!1,onEvents:this.props.onEvents})}}]),e}();(exports.default=LineChart).propTypes={color:_propTypes2.default.array,config:_propTypes2.default.shape({x:_propTypes2.default.object.isRequired,y:_propTypes2.default.array.isRequired,title:_propTypes2.default.string,subtitle:_propTypes2.default.string,dataZoom:_propTypes2.default.object,grid:_propTypes2.default.object,toolbox:_propTypes2.default.bool}).isRequired,style:_propTypes2.default.object,onTooltipFormat:_propTypes2.default.func,onEvents:_propTypes2.default.object};