react 使用Eceharts (2)

import React from 'react'
import axios from 'axios'

import * as echarts from 'echarts';
import '../css/EchartsTest.css'

export default class EchartsTest extends React.Component {
  
  constructor() {
      super()
    this.state={
      myChart:"",
      curveChart:""
    }
  }
  componentDidMount() {
    this.myChart=echarts.init(document.getElementById('mycharts'));
    this.myChart.setOption({
      title: {
        text: '三月份销量统计',
        x:'center',
        y:'top'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
    
    
    this.curveChart=echarts.init(document.getElementById('curveChart'));
    this.curveChart.setOption({
       title: {
          text: 'Stacked Line',
        x:'left',
        y:'top'
       },
       tooltip: {
          trigger: 'axis'
       },
       legend: {
          data: ['Email','Direct']
       },
       grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
       },
       toolbox: {
          feature: {
            saveAsImage: {}
          }
       },
       xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: {
          type: 'value'
       },
       series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
         {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320]
         }
       ]
    });
    
  }
  render() {
    return (
     <div>
       <div id="mycharts" className="mainArea"></div>
       <div id="curveChart" className="mainArea"></div>
     </div>
    );
  }
}

 效果如下:

 希望对你有所帮助