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
}

总结：

igroot-charts为你做了什么

• 组件除了混合组件外抽象出数据层，和一些数据相关的配置，配置数据到属性直接在图表中体现，

• 并且所有组件已经为您做好了动态加载，在组件内部即已经处理，无需import 各个配置项的模块，也不依赖项目中的任何其他图表库，尽可能提升了性能

• 事件系统：通过 click 等 很直观的使用方法，即可触发事件，并且可以很容易传递自定义参数，

• MixCharts 混合组件的意义在于多个混合图标混合使用时可满足所有使用场景，但使用方法需要配置echarts配置项到 settings属性。

• 定制主题 用法：下载echarts主题，找到文件里

echarts.registerTheme(*infographic*, 

把 'infographic' 字符串写到 theme 属性里

有急迫问题请加微信 13124077261