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>
		);
	}
}

 效果如下:

 希望对你有所帮助

原文地址：https://blog.csdn.net/datouniao1/article/details/120438644