html中加入echarts,如何在react中使用echarts

如何在react中echarts

1、安装echarts包npm install echarts --save

2、react使用echartsconst echarts = require('echarts')

componentDidMount() {

this.showBarChart(this.state.myChartData)

}

showBarChart = dataSet => {

var myChart = echarts.init(document.getElementById('BarWrap'))

const option = {

legend: {},

tooltip: {},

dataset: {

dimensions: ['product', '2015', '2016', '2017'],

source: [

{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },

{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },

{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },

{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 },

],

},

xAxis: { type: 'category' },

yAxis: {},

series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],

}

myChart.setOption(option)

}

render() {

return (

)

}

注意：

1. 必须用ID，不能用className 否则会报错 无法找到该dom元素

2. 必须在componentDidMount或之后的生命周期才能初始化echarts， 因为，dom元素可能还没挂载完成， 无法找到该dom元素

dom容器必须设置宽、高，否则无法看到效果

echarts知识扩展

echarts就是一个商业级数据图表工具。

它是一个纯JavaScript的图标库，可以兼容绝大部分的浏览器，可以为前端开发提供直观、生动、可交互、可高度个性化定制的数据可视化图表。

更多React相关技术文章，请访问React答疑栏目进行学习！