1.添加依赖
npm install --save echarts-for-react
// 或
yarn add echarts-for-react
2.在图表页面引入Echarts
image.png
import React, { Component } from 'react'
import ReactEcharts from "echarts-for-react"
export class index extends Component {
onClickChart = (e) => {
console.log('打印', e);
}
render() {
const option = {
title: {
text: '设置标题',
left: 'center',
align: 'right'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 套接口数据 data: this.state.week
// data: this.state.week
},
yAxis: {
type: 'value'
},
dataZoom: [{
show: true,
type: 'slider',
start: 70,
end: 100,
bottom: '-2%',
}], // dataZoom 设置滚动条
color: ['#4ecb73', '#28a6ff', '#cccccc', '#FF3333'], // color 设置颜色
series: [{
data: [120, 200, 150, 80, 70, 110, 130], // 套接口数据 data: this.state.date
// data: this.state.date,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
}
const onEvents = {
'click': this.onClickChart,
}
return (
<div>
<ReactEcharts
option={option}
onEvents={onEvents}
style={{ height: '220px', width: '88%', margin: '0 auto', paddingBottom: '100' }}
/>
</div>
)
}
}
export default index
