监控领域中的Echarts 定制化封装之可联动ConnectCharts和可拖拽缩放GridCharts

最新推荐文章于 2024-07-24 16:49:00 发布

weixin_34205826

最新推荐文章于 2024-07-24 16:49:00 发布

阅读量1.7k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/u/3298482/blog/2249096

版权

2019独角兽企业重金招聘Python工程师标准>>>

监控领域中的Echarts 定制化封装之ConnectCharts和GridCharts

接上一篇Echarts 定制化封装之dataset，这次来聊一聊监控领域中的echarts封装。主要服务于dashboard这个模块。在监控、分析领域，是有查看同一时间各项指标的数据需求的，比如某台主机CPU的使用率、内存展示情况等有关联关系的“黄金指标”。如果把这些指标放在同一个图中问题很简单，如果放在不同图（组件）中，想查看同一时间怎么处理呢。对，你猜到了，就是不同图表之间的联动。及个性化定制dashboard需求可拖拽、缩放等，本文就从这两个方面进行。

代码地址：https://github.com/wlc534/react-r3-saga

可联动的ConnectCharts

看到业绩标杆产品，各种酷炫的dashboard可拖拽、可缩放、可联动的图表。好奇心驱使去研究源码，很快发现老外的产品大部分是基于highcharts或者D3。但我们WiseAPM图表还是Echarts。接下来就自己动手。

对于一个库，最好资料就是官方文档。很快就在echarts官网API中查到echarts.connect，文档的完整性方面还是要给ec点赞。

echarts.connect Function

(group:string|Array)

多个图表实例实现联动。

参数：

group group 的 id，或者图表实例的数组。

示例：

// 分别设置每个实例的 group id

chart1.group = 'group1';

chart2.group = 'group1';

echarts.connect('group1');

// 或者可以直接传入需要联动的实例数组

echarts.connect([chart1, chart2]);

有了官方的支持，接下来的事情就好办了，先上代码。为了便于理解，代码中就两个echarts进行联动。

import React, {Component} from 'react';

import ReactEcharts from 'echarts-for-react';

import echarts from 'echarts'

import './WiseCharts.css'

const getKeys = data => Object.keys(data);

export default class MoreWiseCharts extends Component {

static defaultProps = {

height: 400,

title: '默认名称',

type: 'line'

};

constructor(props) {

super(props);

this.getOption = this.getOption.bind(this);

}

componentDidMount(){

const echartsInstanceOne=this.echarts_react_one.getEchartsInstance()

const echartsInstancetwo=this.echarts_react_two.getEchartsInstance()

echarts.connect([echartsInstanceOne,echartsInstancetwo])

}

getOption() {

setTimeout(() => {

console.log(this.echarts_react)

}, 1000);

const [first, ...legendData] = getKeys(this.props.data);

const legendDataArr = [];

let legendTrStr = '';

legendData.forEach(item => {

legendDataArr.push({

name: item,

icon: 'circle'

});

legendTrStr += `<td>${item}</td>`;

});

return {

title: {

text: this.props.title,

tooltip: {

trigger: 'axis'

legend: {

bottom: '3%',

type: 'scroll',

data: legendDataArr

dataset: {

source: this.props.data

grid: {

left: '3%',

right: '4%',

bottom: '10%',

containLabel: true

toolbox: {

show: true,

feature: {

dataZoom: {

yAxisIndex: 'none'

dataView: {

readOnly: false,

optionToContent: function otc(opt) {

const timeArr = Object.values(opt.dataset[0].source);

let table = `<table style="width:100%;text-align:center;background-color: #f5f5f5" class='reference'><tbody><tr>

<td>时间</td>${legendTrStr}

</tr>`;

for (let i = 0, l = timeArr[0].length; i < l; i += 1) {

let tdElm = ``;

for (let j = 1; j < timeArr.length; j += 1) {

const element = timeArr[j][i];

tdElm += `<td>${element}</td>`;

}

table += `<tr><td>${timeArr[0][i]}</td>${tdElm}

</tr>`;

}

table += '</tbody></table>';

return table;

magicType: {

type: ['line', 'bar']

restore: {},

saveAsImage: {}

}

xAxis: {

type: 'category',

boundaryGap: false,

yAxis: {

type: 'value'

series: [...legendData].fill({

type: this.props.type

}),

color: [

'#FF9C6E', '#FFC069', '#95DE64', '#5CDBD3', '#69C0FF', '#85A5FF', '#B37FEB', '#FF85C0'

]

};

}

render() {

return (

<ReactEcharts option = {

this.getOption()

} style = {

{

height: '350px',

width: '60%'

}

ref={(e) => { this.echarts_react_one = e; }}

className = 'react_for_echarts' / >

<ReactEcharts option = {

this.getOption()

} style = {

{

height: '350px',

width: '60%'

}

ref={(e) => { this.echarts_react_two = e; }}

className = 'react_for_echarts' / >

</div>

)}

}

上面最核心的代码如下：

componentDidMount(){

const echartsInstanceOne=this.echarts_react_one.getEchartsInstance()

const echartsInstancetwo=this.echarts_react_two.getEchartsInstance()

echarts.connect([echartsInstanceOne,echartsInstancetwo])

}

<ReactEcharts option = {

this.getOption()

} style = {

{

height: '350px',

width: '60%'

}

ref={(e) => { this.echarts_react_one = e; }}

className = 'react_for_echarts' / >

<ReactEcharts option = {

this.getOption()

} style = {

{

height: '350px',

width: '60%'

}

ref={(e) => { this.echarts_react_two = e; }}

className = 'react_for_echarts' / >

在组件渲染的生命周期函数componentDidMount（）拿到想联动echarts 实例。之后传入echarts.connect（）中，就能实现联动。此处用到React中ref获取到真实DOM元素。不理解的请自行官网。

问题：

联动效果不够优雅，tooltip不是完全的同步。和基于D3封装联动有差距。

可拖拽、可缩放的GridCharts

拖拽、缩放的原理一般都是监听鼠标事件利用clientX和 clientY 进坐标的计算，结合CSS3的transform 变换。这块已经有大牛写好，我们就拿过来用。它就是react-grid-layout。https://github.com/STRML/react-grid-layout 用到该技术的项目还是挺多。