echarts图表的内边距_ECharts 图表插件使用整理（图表配置实现）

ECharts 图表插件使用整理

说明

ECharts 是一个 JavaScript 实现的开源可视化库，兼容当前绝大部分浏览器 IE 8 以上，是一个可高度个性化定制的数据可视化图表

ECharts 版本 –> 4.0.2

这篇文章只是对 ECharts 的 API 学习了一遍后，做的简单记录，结合 react 和 vue 的案例模板会在代码库中陆续实现。

vue + echarts 使用说明

react + echarts 使用说明

vue-echarts-template 源码

react-echarts-template 源码

基本使用

1. 初始化实例

注意初始化时，echarts 内部会获取 dom 的 clientWidth 和 clientHeight 来计算宽高，如果设置 width、height 为百分比，某些框架(react)会导致，计算出的 clientWidth 和 clientHeight 不符合预期(没有计算完就被获取使用)，解决办法一个是计算出确定的像素值后传入，另一个办法是设置定时器，等待新的值计算完直接使用

div>

const chart = echart.init(document.getElementById('main'));

react 中使用

render() {

const {width = '100%', height = '100%'} = this.props;

return (

className="default-chart"

ref={el => this.el = el}

style={ {width, height}}

>div>

);

}

initChart = (el) => {

return new Promise((resolve) => {

// 设置定时器，使得获得的 clientWidth clientHeight 符合预期

setTimeout(() => {

this.chart = echarts.init(el, null, {renderer: 'svg', width: 'auto', height: 'auto'});

resolve();

}, 0);

})

}

async componentDidMount() { // 变成异步的

console.log('did mount');

await this.initChart(this.el);

this.setOption(this.props.options);

}

或者等待容器尺寸后重新绘制

initChart = (el) => {

/*

设置定时器调用 echarts 实例的 resize() 方法，重新刷新画布

*/

this.chart = echarts.init(el, null, {renderer: 'svg', width: 'auto', height: 'auto'});

setTimeout(() => this.chart.resize(), 0);

}

componentDidMount() { // 不在需要异步

console.log('did mount');

this.initChart(this.el);

this.setOption(this.props.options);

window.addEventListener('resize', throttle(this.resize, 100));

}

2. 异步加载数据

echart 在图标初始化后的任何时候，都可以通过实例的 setOption() 方法直接填入数据，如果需要加载数据，可以在加载数据完成后调用此方法；也可以阶段性的获取数据，然后通过 setOption() 方法注入数据。

const chart = echart.init(document.getElementById('main'));

get('/xxx').then(res => chart.setOption(res));

3. 加载动画

echart 提供简单的加载动画

const chart = echart.init(document.getElementById('main'));

chart.showLoading();

get('/xxx').then(res => {

chart.hideLoading();

chart.setOption(res);

});

4. 交互组件

legend 图例组件

title 标题组件

visualMap 视觉映射组件

dataZoom 数据区域缩放组件

timeline 时间线组件

5. 移动端自适应

ECharts 实现了类似 CSS Media Query 的自适应能力

option = {

baseOption: { // 这里是基本的『原子option』。

title: {...},

legend: {...},

series: [{...}, {...}, ...],

...

},

media: [ // 这里定义了 media query 的逐条规则。

{

query: { // 这里写规则。

minWidth: 200,

maxHeight: 300,

minAspectRatio: 1.3 // 长宽比

},

option: { // 这里写此规则满足下的option。

legend: {...},

...

}

},

{

query: {...}, // 第二个规则。

option: { // 第二个规则对应的option。

legend: {...},

...

}

},

{ // 这条里没有写规则，表示『默认』，

option: { // 即所有规则都不满足时，采纳这个option。

legend: {...},

...

}

}

]

};

5. 数据的视觉映射

数据可视化是数据到视觉元素的映射过程，ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到 ‘线’，柱状图 把数据映射到 ‘长度’ 等

ECharts 提供 visualMap 组件来提供通用的视觉映射

ECharts 中的数据，一般存放于 series.data 中，根据图表类型不同，数据的具体形式也可能有些许差异

6. ECharts 中的事件和行为

在 ECharts 的图表中用户的操作将会触发相应的事件，开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框

chart.on('click', function (params) {

console.log('chart in click', params);

})

鼠标事件的监听函数会得到参数 params ，这是一个包含点击图形的数据信息对象

由组件的交互行为可以触发事件，除此之外也可以在程序里调用方法触发图表行为

// 调用此方法可以触发图表行为，type对应着动作

chart.dispatchAction({

type: ''

})

7. 切换 canvas 和 svg 渲染

ECharts 默认使用 canvas 渲染，切换到 svg 需要进行一些设置

import * as echarts from 'echarts/lib/echarts';

import 'zrender/lib/svg/svg';

const chart = echarts.init(dom, null, {renderer: 'svg' /* canvas */});

API

1. echarts 属性和方法

1. 初始化 echarts.init(dom, theme, opts) 创建实例

用于创建一个 ECharts 实例，不能在单个容器上初始化多个实例

dom: 实例容器，一般是一个具有宽高的 div 元素，需要明确指定 style.width | style.height

theme: 应用的主题配置对象，也可以是 echarts.registerTheme 注册的主题名称

opts: 附加参数

renderer: 渲染器配置项 svg|canvas

width: 用于指定实例宽度 null/undefined/'auto' 表示实例容器的宽度

height: 同上

devicePixelRatio: 设备像素比，会默认获取浏览器的 window.devicePixelRatio 值

const chart = echarts.init(document.getElementById('main'), null, {

renderer: 'svg',

width: 300,

height: 400

});

2. echarts.dispose() 销毁实例

实例销毁后无法被使用

3. echarts.getInstanceByDom() 通过容器获取容器上的实例

2. echartsInstance 实例属性与方法

1. instance.group = 'xxx' 用于设置分组信息

2. instance.setOption({}) 用于设置图标配置项

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过它完成，ECharts 会合并新的参数和数据，然后刷新图表，并通过合适的动画变化

chart.setOption(option, notMerge, lazyUpdate);

option: 图表的配置项和数据

notMerge: 是否与之前的 option 合并 默认为 false 即为合并

lazyUpdate: 在设置完option后是否不立即更新图表，默认为false，即立即更新。

3. instance.getWidth()|getHeight() 获取实例容器宽度|高度

4. instance.getDom()| () 获取实例容器的 DOM | 获取合并后的配置项

5. instance.resize(opts) 改变图表尺寸，在容器大小发生变化时手动调用

参数可以省略，opts如下

width: 显式指定实例宽度，单位为像素

height: 显式的指定实例的高度

silent: 是否禁止抛出事件 默认 false

6. instance.dispatchAction() 手动触发图表行为

7. instance.on('envent', handle) 绑定事件处理函数

ECharts 中事件有两种，一种是鼠标事件，鼠标点击在某个图形上会触发，还有一种是调用 dispatchAction 后触发的事件，每个 action 都会有对应的事件

chart.on('click', params => console.log(params));

8. instance.off('event, handle) 解绑事件处理函数

9. instance.convertToPixel(finder, value) 转换为像素值

finder 表示定位参数，用来定位，value 表示要被转换的值，返回像素坐标值

暂时理解为，将图形坐标值，转化为对应的像素坐标值

10. instance.convertFromPixel() 从像素值转换

装换像素坐标值到逻辑坐标系上的点，是 convertToP