React 项目中使用Echarts

朴灿烈づ我的快乐病毒、 2022-09-12 06:55 295阅读 0赞

直接上代码吧：

react 项目中添加Echarts 相关模块

  1. npm install echarts --save

代码：

  1. import React from 'react'
  2. import * as echarts from 'echarts';
  3. import '../css/EchartsTest.css'
  5. export default class EchartsTest extends React.Component {
  7.     constructor() {
  8.         super()
  9.         this.state={
  10.             myChart:""
  11.         }
  12.     }
  13.     componentDidMount() {
  14.         this.myChart=echarts.init(document.getElementById('main'));
  15.         this.myChart.setOption({
  16.             title: {
  17.                 text: '三月份销量统计',
  18.                 x:'center',
  19.                 y:'top'
  20.             },
  21.             tooltip: {},
  22.             xAxis: {
  23.                 data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  24.             },
  25.             yAxis: {},
  26.             series: [{
  27.                 name: '销量',
  28.                 type: 'bar',
  29.                 data: [5, 20, 36, 10, 10, 20]
  30.             }]
  31.         });
  32.     }
  33.     render() {
  34.         return (
  35.          <div id="main" className="mainArea"></div>
  36.         );
  37.     }
  38. }

查看页面效果：

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16

希望对你有所帮助

发表评论

表情：
评论列表 （有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读