react 使用Eceharts (2)

太过爱你忘了你带给我的痛 2022-09-12 08:58 32阅读 0赞

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

效果如下:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16][]

希望对你有所帮助

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/285a1d99eaa24b65bd718d668fd76e30.png