- 技术博客
- 初识echarts（3）：柱状图示例
一、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 {Card
} from 'antd';
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';
export default class Bar extends Component {
getOption =()=> {
let option
= {
color
: ['#006699', '#4cabce', '#e5323e'],
tooltip
:{
trigger
:'axis',
},
legend
: {
data
:['A','B','C'],
right
: 10
},
xAxis
:{
data
:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis
:{
type
:'value'
},
series
:[
{
name
:'A',
type
:'bar',
barWidth
: '15%',
data
:[800, 1300, 2000, 2300, 1800, 1100, 500]
},
{
name
:'B',
type
:'bar',
barWidth
: '15%',
data
:[1000, 1800, 2200, 3100, 2200, 1500, 1000]
},
{
name
:'C',
type
:'bar',
barWidth
: '15%',
data
:[300, 800, 1200, 1800, 1300, 600, 200]
}
]
};
return option
};
render(){
return(
<Card title
="我是标题">
<ReactEcharts option
={this.getOption()}/>
</Card
>
)
}
}
运行结果：
