关灯
开启左侧

腾讯 Omi-chart 正式发布

[复制链接]
老蚊子 发表于 2018-12-14 08:23:51 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 老蚊子 于 2018-12-14 08:25 编辑

[size=2.5]【开源】腾讯 Omi-chart 正式发布
v1.0.1
omi-chart
一个 chart-x 标签搞定数据可视化, omichart.js强力加持



支持的图表
  • <chart-bar /> 柱状图
  • <chart-line /> 线图
  • <chart-scatter /> 散点图
  • <chart-pie /> 饼图
  • <chart-doughnut /> 环状图
  • <chart-radar /> 雷达图
  • <chart-polar-area /> 极区图
  • <chart-bubble /> 气泡图
在线互动例子安装
  1. npm i omi-chart
复制代码


快速上手
  1. import 'omi-chart'

  2. define('my-app', class extends WeElement {
  3.   install(){
  4.     this.chartData = {
  5.       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  6.       datasets: [{
  7.         label: '# of Votes',
  8.         data: [12, 19, 3, 5, 2, 3],
  9.         backgroundColor: '#f391a9',
  10.         borderColor: '#ef5b9c',
  11.         borderWidth: 1
  12.       }]
  13.     }
  14.    
  15.     this.chartOptions = {
  16.       scales: {
  17.         yAxes: [{
  18.           ticks: {
  19.             beginAtZero: true
  20.           }
  21.         }]
  22.       }
  23.     }
  24.   }

  25.   render(props, data) {
  26.     return (
  27.       <div>
  28.         <chart-bar width={600} data={this.chartData} options={this.chartOptions} />
  29.       </div>
  30.     )
  31.   }
  32. })

  33. render(<my-app />, 'body')

复制代码

具体的传入 options 和 data 格式可以查看 chart.js 文档

原理

代码量不多,直接看源码:
  1. import { WeElement, define } from 'omi'
  2. import Chart from 'chart.js'

  3. class ChartBase extends WeElement {
  4.   receiveProps(props) {
  5.     this.chart.data = props.data
  6.     this.chart.options = props.options
  7.     this.chart.update()
  8.   }

  9.   render(props) {
  10.     return (
  11.       <div style={{ width: props.width + 'px', height: props.height + 'px' }}>
  12.         <canvas ref={(e) => { this.canvas = e }}>
  13.         </canvas>
  14.       </div>
  15.     )
  16.   }
  17. }

  18. define('chart-bar', class extends ChartBase {
  19.   installed() {
  20.     this.chart = new Chart(this.canvas.getContext('2d'), {
  21.       type: this.props.horizontal ? 'horizontalBar' : 'bar',
  22.       data: this.props.data,
  23.       options: this.props.options
  24.     })
  25.   }
  26. })

  27. define('chart-line', class extends ChartBase {
  28.   installed() {
  29.     this.chart = new Chart(this.canvas.getContext('2d'), {
  30.       type: 'line',
  31.       data: this.props.data,
  32.       options: this.props.options
  33.     })
  34.   }
  35. })

  36. define('chart-scatter', class extends ChartBase {
  37.   installed() {
  38.     this.chart = new Chart.Scatter(this.canvas.getContext('2d'), {
  39.       data: this.props.data,
  40.       options: this.props.options
  41.     })
  42.   }
  43. })
复制代码

所有的图表继承自 ChartBase,ChartBase 继承自 WeElement。omi-chart 会根据传入的 props 创建不同类型的 Chart。
其中利用了勾子函数 receiveProps。
receiveProps - 当父组件重新刷新的时候会触发改勾子函数。

预告一下:Omi 马上要支持 IE9 和所有的移动端浏览器,敬请期待。



 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

13粉丝

75帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )