echarts.md

使用Echarts图表组件

Echarts是常用的开源图表库之一。FlareJ库将Echarts与NornJ模板结合，可以以分模块引用的方式在NornJ模板中使用Echarts图表。

使用方法

1. 在js中按flarej/lib/components/ECharts/图表组件名引入组件：

import { Component } from 'react';
import { registerTmpl } from 'nornj-react';
import BarChart from 'flarej/lib/components/ECharts/barChart';  //引入Echarts组件
import styles from './demo.m.scss';
import templates from './demo.t.html';

2. 配置echarts参数：

export default class Demo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      option: {  //配置项，具体参考echarts图表的option如何配置
        grid: {
          y: 20,
          x: 40,
          y2: 25,
          x2: 30
        }
      },
      data: [  //数据，相当于series参数，具体参考echarts图表的series如何配置
        ...
      ]
    };
  }

  render() {
    return templates.demoTable(this.state, this.props, this, {
      styles
    });
  }
}

3. 在NornJ模板中用ec-*作为组件名使用即可。各图表的用法请参考Echarts官网。

<template name="demoTable">
  <ec-BarChart width={500} height={300} {option} {data} />
</template>

• 也可以直接在js文件中使用NornJ模板，效果和写在*.t.html中相同：

export default class Demo extends Component {
  ...

  render() {
    return nj`
      <ec-BarChart width=${500} height=${300} {option} {data} />
    `(this.state, this.props, this, {
      styles
    });
  }
}

• 和Echarts官方用法的不同之处：

在官方用法中，图表的option参数中须要包含series参数；而使用ec-*组件时需要将series参数单独作为data属性传入图表组件中。

可能会遇到的问题

1. 项目中需要插件类图表(比如liquidFill、wordCloud)时，需要在自己的项目中手动安装相关的依赖包。

package.json：

"echarts-liquidfill": "^1.0.3",
"echarts-wordcloud": "^1.0.3",

2. 如果发现某些功能不生效，可能需要从echarts库引入相关js，比如markArea：

import 'echarts/lib/component/markArea';

更多echarts的js模块可点这里查看。

3. 如果需要在一个图表上既有折线又有柱状图，该用什么组件？

用<ec-LineChart />或<ec-BarChart>都是可以的，只要data属性数据配置相应的type值即可。

4. Mobx的变量传给Echarts组件后没按照预期展示数据

此种情况通常需要使用Mobx的toJS方法转换数据后再传给Echarts组件，NornJ模板中已默认集成了toJS方法：

<ec-BarChart data={toJS(page1.chartData)} ... />

← 返回总览

Webpack配置文件 →