1.1.2 • Published 7 years ago
creams-echarts v1.1.2
creams-echarts
标签(空格分隔): creams-echarts
文件
├── es6 # 源码
│ ├── echartsClass # 图表基础合成类
│ └── ecchartsDefault # 图表类型的基础参数
│ ├── echartsModules # 图表的依赖包导出
│ └── selectionECcharts # 选择图表导出的函数
│ ├── utils # 基础工具验证函数
│ └── index.js # 导出的createECharts函数
├── lib
│ └── index.js # 导出的createECharts函数
简介
基于echarts 4.0.4版本封装,功能简单,只是写法封装了一遍简易的
Todo
后期有时间可能优化图表的加载顺序,避免一个页面同时加载多图表产生的尴尬问题
update
1.将创建图表的 create 函数改名为 createECharts 避免与其他库的create函数重复
example for:
import React, { Component } from 'react';
import createECharts from 'creams-echarts';
class Echarts extends Component {
constructor(props) {
super(props);
this.creamsECharts = null;
}
componentDidMount() {
this.creamsECharts = createECharts({
type: {
// 必填图表类型
mainType: 'bar',
// 可选其他图表功能
subType: ['title', 'line'],
},
// dom元素
model: this.bar,
// 绑定的事件
events: {
// gegtOption会获取返回每一次都更新后的数据
getOption: this.getOption,
click: this.handleClickCanvas,
},
});
// 模仿异步请求数据
setTimeout(this.changeData, 2000);
}
changeData = () => {
this.creamsECharts.config({
series: [
{
type: 'bar',
barMaxWidth: '10',
name: '间',
data:[10, 52, 200, 334, 390, 330, 220],
},
],
xAxis: {
data:
['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
},
});
}
getOption = (option) => {
console.log('获取到option', option);
}
handleClickCanvas = (params) => {
console.log('点击', params);
}
render() {
<div
style={{ width: "600px", height: '600px' }}
ref={(bar) => { this.bar = bar; }}
/>
}
}
封装的图表类型
(如需要其他请告知添加)
type: line/pie/bar
subType: legendScroll/tooltip/title/tree