如何在react中使用echarts

如何在react中echarts

1、安装echarts包

npm install echarts --save

2、react使用echarts

const 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 (
      <div style={{ width: '100%', height: 300 }} id="BarWrap" />
    )
  }

注意:

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

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

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

echarts知识扩展

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

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

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

以上就是如何在react中使用echarts的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏