react中使用echarts
程序员文章站
2021-12-07 08:21:50
import React, { Component } from 'react'import * as echarts from 'echarts'export default class Statics extends Component { state = { data: [820, 563, 903, 743, 678, 873, 467] } initCharts = () => { let myChart = echarts.init(docume......
最近再学习react,今天写了react中使用echarts,现在分享给大家,希望对您能有所帮助!不好的话,勿喷!!!
代码如下:
import React, { Component } from 'react'
import * as echarts from 'echarts'
export default class Statics extends Component {
state = {
data: [820, 563, 903, 743, 678, 873, 467]
}
initCharts = () => {
let myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
title: {
text: '测试'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7]
},
yAxis: {
type: 'value'
},
series: [{
data: this.state.data,
type: 'line'
}]
});
window.addEventListener("resize", function () {
myChart.resize();
})
}
componentDidMount() {
this.initCharts();
}
render() {
return (
<div>
<div id='myChart' style={{ width: '100%', height: '500px' }}></div>
</div>
)
}
}
本文地址:https://blog.csdn.net/qq_39436399/article/details/111919858