echarts 时间轴处理_echarts 带时间轴可缩放的折线图

第一步，先局部安装echarts，默认安装最新版

在根目录下执行命令

npm install echarts --save

安装成功之后

在node_modules中可以看到echarts文件夹

image.png

第二步，在react的js文件中引入echarts组件

// 引入主模块

import echarts from 'echarts/dist/echarts.common';

// 引入折线图

import 'echarts/lib/chart/line';

// 引入提示框和标题组件

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

第三步，创建一个div盒子装echarts图表，盒子必须设置宽高

render() {

return (

图表

);

}

第四步，配置数据

componentDidMount() {

var base = +new Date(1968, 9, 3);

var oneDay = 24 * 3600 * 1000;