react+antd系列之引入echart图表

要在antd中引入echart图表,首先得安装echart包,命令如下:

cnpm install echarts --save

echart安装完毕,要如何使用呢,在react中我们要引入我们刚刚安装的echart,如下:

import echarts from 'echarts/lib/echarts';

但是这里引入这个还不止,假设你要画柱状图,则你得引入:

import 'echarts/lib/chart/bar';

如果你要画折线图,你得引入:

import 'echarts/lib/chart/line';

这里你要画什么的时候,就引入什么,具体参考引入路径地址:https://www.npmjs.com/package...

底下有个echart图表例子,代码如下如下:

import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';


class Test extends React.Component {
  componentDidMount() {
    // 初始化
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: { text: '某地区蒸发量和降水量' },
        tooltip : {
          trigger: 'axis'
      },
      legend: {
          data:['蒸发量','降水量']
      },
      toolbox: {
          show : true,
          feature : {
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {
                show: true,
                type: 'jpg'
              }
          }
      },
        xAxis : [
          {
              type : 'category',
              data : this.props.data.xdata
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
        series : [
          {
              name:'蒸发量',
              type:'bar',
              data: this.props.data.ydata.ydata1,
              markPoint : {
                  data : [
                      {type : 'max', name: '最大值'},
                      {type : 'min', name: '最小值'}
                  ]
              },
              markLine : {
                  data : [
                      {type : 'average', name: '平均值'}
                  ]
              }
          },
          {
              name:'降水量',
              type:'bar',
              data: this.props.data.ydata.ydata2,
              markPoint : {
                  data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                  ]
              },
              markLine : {
                  data : [
                      {type : 'average', name : '平均值'}
                  ]
              }
          },
      ]
    });
}
render() {
    return (
        
); } } export default Test;

我们把这个图表封装成一个组件,然后我们在别的页面可以引入这个组件,代码如下:

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import Test from '../components/echart.js';

function IndexPage() {
  return (
    
); } IndexPage.propTypes = { }; export default connect()(IndexPage);

效果如下:

如果我们要让图表自适应,也就是跟随屏幕缩放而自动缩放改怎么处理呢?其实只要添加一句代码即可,这里有两种方案,第一种如下:

window.onresize = myChart.resize;

第二种如下:

  window.addEventListener("resize",function(){
        myChart.resize();
    });

具体源码地址如下:
https://gitee.com/hope93/intr...

你可能感兴趣的:(react.js,antdesign,echarts)