Igroot-charts NPM

igroot-charts 图表库

详情

使用方法:

npm install igroot-charts --save

然后在想要引入的界面里 import { Line } from 'igroot-charts' 可选的图表:

Line：折线图
Pie：饼图
Scatter：散点图
Bar：柱状图
MixChart 混合图

折线图

<Line
  id={"line"}
  title={"lineTitle"} /* 非必填 */
  legend={true} /* 非必填 */
  xAxis={['周一', '周二', '周三', '周四', '周五', '周六', '周日']}
  click={this.fun}
  data={[
    {
      name: 'line1',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'line2',
      data: [134, 90, 230, 210, 120, 132, 101]
    }
  ]}
  settings={lineOption}
/>

柱状图

<Bar
  id={"bar"}
  title={"title1"}
  legend={true}
  xAxis={['周一', '周二', '周三', '周四', '周五', '周六', '周日']}
  data={[
    {
      name: 'mmm',
      data: [110, 112, 101, 134, 90, 230, 210],
    }
  ]}
  settings={barOption}
/>

散点图

<Scatter
  id={"scatter"}
  title={"Scatter"}
  legend={true}
  xAxis={['周一', '周二', '周三', '周四', '周五', '周六', '周日']}
  data={[
    {
      // id:'bar1',
      name: 'cnm',
      data: [['周二', 20, 30], ['周一', 10, 30], ['周三', 30, 30]],
    }
  ]}
  settings={scatterOption}
/>

饼图

<Pie
  id={"pie"}
  title={"title1"}
  legend={true}
  radius = {['40%', '55%']}
  data={[
    {
      name: 'aaa',
      data: '120'
    },
    {
      name: 'bbb',
      data: '132'
    },
    {
      name: 'ccc',
      data: '150'
    },
  ]}
  settings={pieOption}
/>

以上图表都只适合单图的简单场景，如需混合显示，请使用混合组件，使用方法copy echarts配置项，自己更改数据部分即可

混合组件

<MixChart 
  id = "aaasss"
  legendselectchanged= {this.getMixChart.bind(this,"SSS")} <!-- 图例变更事件 -->
  notMerge={false}
  style={{
    width: '800px',
    height: '500px'
  }}
  settings={
    <!-- echarts 配置项 -->
  }
/>

这个是完全遵守echarts规则的配置方案，直接拷贝echarts配置项在option属性即可。

事件与交互:

支持的事件有

```
'click': true,    <!-- 常用 -->
'legendselectchanged': true,    <!-- 常用 -->
'legendselected': true,
'legendunselected': true,
'datarangeselected': true,
'timelinechanged': true,
'timelinechanged': true,
'restore': true,
'geoselectchanged': true,
'geoselected': true,
'geounselected': true,
'pieselectchanged': true,
'pieselected': true,
'mapselectchanged': true,
'mapselected': true,
'mapunselected': true,
'axisareaselected': true,
'focusnodeadjacency': true,
'unfocusnodeadjacency': true,
'brush': true,
'brushselected': true
```

鼠标事件的参数如下

{
  // 当前点击的图形元素所属的组件名称，
  // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
  componentType: string,
  // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
  seriesType: string,
  // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
  seriesIndex: number,
  // 系列名称。当 componentType 为 'series' 时有意义。
  seriesName: string,
  // 数据名，类目名
  name: string,
  // 数据在传入的 data 数组中的 index
  dataIndex: number,
  // 传入的原始数据项
  data: Object,
  // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
  // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
  // 其他大部分图表中只有一种 data，dataType 无意义。
  dataType: string,
  // 传入的数据值
  value: number|Array
  // 数据图形的颜色。当 componentType 为 'series' 时有意义。
  color: string
}