1,基础篇
我们在使用echart,基本使用,可以使用script标签引入的方式进行使用,也可以使用npm的方式,进行加载echarts。
script的方式,非常简单,就像我们的jquery一样,引入这样的一个js文件就可以使用echarts了。然后echarts的核心就是实例化一个echarts对象,然后给这个对象设置options,options的设置,参考echarts官方文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
npm的方式,使用echarts,这是我们在项目中常用的方式。
npm install --save echarts
使用的时候,我们一般这么写。
import Echarts from 'echarts';
Echarts.init(dom);
主要看在react中,我们该如何使用?
2,react中使用echarts
首先先引入echarts,在这之前你需要使用npm下载echarts的依赖。
import React, { Component } from 'react';
import echarts from 'echarts';
然后在react的componentDidMount中,进行echats的实例化。
echarts.init(this.chart)
其中,this.chart是使用react中的ref标记的当前dom。
<div ref={dom => this.chart = dom} className={styles.chartsComponent}></div>
当然,这样的方式,我们仅仅只能展示一个基本的echarts图表,但是我们还没法做到echarts在页面上的伸缩。这个时候,我们可能需要用到的echarts对象的一些方法。
- resize()方法,当调用此方法,echarts实例会触发一次重绘功能。
- dispose()方法,当调用此方法,echarts实例会被销毁。
所以这个随着页面的伸缩,或者dom元素的变化的时候,触发resize方法,就能实现echarts的伸缩特效。
在实现上,我们可以使用onresize事件。
这是可伸缩的echats组件的实现原理。
下面代码就是一个echarts可伸缩组件的实现。
3,实现一个echarts的插件
一个完整的可伸缩的echarts组件应该像下面这样。
/**
* Created by mapbar_front on 2018/9/18
*/
import React, { Component } from 'react';
import styles from './index.less';
import echarts from "echarts";
import SizeSensor, { clear, bind} from 'size-sensor'
export default class Mycharts extends Component {
constructor(props) {
super(props);
this.chart = null;
this.timer = 0;
this.echartsLib = echarts;
}
componentDidMount(){
this.rerenderCharts();
}
disposeCharts() {
if (this.chart) {
try {
clear(this.chart)
} catch (e) {
console.warn(e);
}
}
this.myChart.dispose(this.chart);
}
rerenderCharts() {
this.myChart = this.getEchartsInstance();
this.myChart.setOption(this.props.options);
if (this.chart) {
bind(this.chart, () => {
this.myChart.resize();
})
}
}
getEchartsInstance() {
const echartInstance = echarts.getInstanceByDom(this.chart) || echarts.init(this.chart)
return echartInstance;
}
componentWillUnmount(){
this.myChart.dispose();
}
render(){
return (
<div ref={dom => this.chart = dom} className={styles.chartsComponent}>
</div>
);
}
}
在使用的时候,直接像这样使用:
import MyCharts from '../../../components/Echarts';
// 然后在render函数中
<MyCharts options={this.state.option}></MyCharts>
4,集成到npm中使用
像上面的方式,是我们自己写echarts的可伸缩组件,有没有更简单的方式?显然是有的,我们可以把这个集成到npm的package包中,在任何使用的地方,直接使用就行了,没有必要重复写这样的插件。
我自己实现的一个可伸缩的echarts包—“wd-echarts-react”;
使用的时候直接npm install。
npm install --save wd-echarts-react;
然后在项目中:
import WdEchartsReact from 'wd-echarts-react';
// render函数中:
render(){
return (
<div className={styles.chartItem}>
<WdEchartsReact options={this.state.option}></WdEchartsReact>
</div>
)
}
这样就实现了echats的使用。
本项目的github地址:
https://github.com/liwudi/wd-echarts-react.git