- 技术博客
- 初识echarts（4）：折线图示例
一、npm安装 echarts 、echarts-for-react：
npm install echarts
--save
npm install
--save echarts
-for-react
二、引入模块（这里最好按需引入）：
import echarts
from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts
from 'echarts-for-react';
三、完整代码：
import React
,{Component
}from 'react'
import echarts
from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts
from 'echarts-for-react';
import {Card
} from "antd";
export default class Line extends Component {
getOption = ()=>{
let option
= {
tooltip
: {
trigger
: 'axis',
axisPointer
: {
type
: 'cross',
label
: {
backgroundColor
: '#6a7985'
}
}
},
legend
: {
data
: ['邮件营销', '联盟广告', '视频广告']
},
grid
: {
left
: '3%',
right
: '4%',
bottom
: '3%',
containLabel
: true
},
toolbox
: {
show
: true,
x
: 'right',
y
: '30',
feature
: {
dataZoom
: {
yAxisIndex
: 'none'
},
dataView
: {readOnly
: false},
magicType
: {type
: ['line', 'bar']},
restore
: {},
saveAsImage
: {}
},
},
xAxis
: {
type
: 'category',
boundaryGap
: false,
data
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis
: {
type
: 'value'
},
series
: [
{
name
: '邮件营销',
type
: 'line',
stack
: '总量',
data
: [120, 132, 101, 134, 90, 230, 210]
},
{
name
: '联盟广告',
type
: 'line',
stack
: '总量',
data
: [220, 182, 191, 234, 290, 330, 310]
},
{
name
: '视频广告',
type
: 'line',
stack
: '总量',
data
: [150, 232, 201, 154, 190, 330, 410]
}
]
};
return option
;
};
render() {
return (
<Card title
="我是标题">
<ReactEcharts option
={this.getOption()}/>
</Card
>
)
}
}
运行结果：
