使用react+echarts实现大数据量K线图的效果

1.安装echarts和react-echarts npm install echarts --save npm install react-echarts-v3 --save 2.引入echarts和react-echarts import ReactEcharts from 'react-echarts-v3'; //引入ReactEcharts组件 import echarts from 'echarts'; // 引入 EChats 依赖包 3.渲染图表 render() { const option = { // 折线图的配置项和数据 xAxis: { // x轴的配置项 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun'] // x轴的数据列表，如果是时间就传时间戳进来即可。 }, yAxis: {}, series: [{ type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320] }] }; return ( <ReactEcharts option={option} style={{height:'400px'}} /> ); } 4.实现大数据量K线图 render() { const option = { title:{ text:'大数据量K线图' }, tooltip:{ trigger:'axis' }, legend:{ data:[{name:'最低价格'},{name:'最高价格'}] }, grid:{ left:"10%", right:"10%", bottom:"15%" }, xAxis:{ type:"category", boundaryGap : false , splitLine:{ show : true , lineStyle :{ color : "#999" } }, axisLabel:{ fontSize : 10 }, data:[ "2013/1/24","2013/1/25","2013/1/28","2013/1/29","2013/1/30", "2013/1/31","2013/2