vue-echarts-linkage v1.3.8

vue-echarts-linkage

1. 介绍

vue-echarts-linkage 是基于 Vue3 + TypeScript + Element Plus 实现的联动组件，可以实现多个图表之间的联动。

2. demo演示

2.1 基础联动

多图表联动放缩，Y轴同步对齐

2.2 图例联动

图例显示隐藏同步，重置图例位置显示，移除图例等

2.3 开关量显示

2.4 图形定位

2.5 主题背景自定义

背景色自定义，白天黑夜切换

2.6 容器尺寸实时自适应

容器尺寸实时自适应，图表内容字体和位置自适应容器大小

2.7 联动模式切换

非联动模式，开关量显示，图形定位，主题背景自定义，容器尺寸实时自适应

3. 安装及使用组件

3.1 安装组件

# 安装依赖
npm install vue-echarts-linkage
or
pnpm install vue-echarts-linkage

# 全局安装组件
import VueEchartsLinkage from "vue-echarts-linkage";
import "vue-echarts-linkage/dist/style.css";
...
const app = createApp(App);
app.use(VueEchartsLinkage);

# 按需引入组件
import { VueEchartsLinkage } from "vue-echarts-linkage";
import "vue-echarts-linkage/dist/style.css";

3.2 使用组件

<template>
  ...
  <VueEchartsLinkage 
    ref="echartsLinkageRef" 
    :cols="1" 
    :echarts-max-count="10"
    :echarts-colors="['red', 'blue', 'green', 'yellow', 'goldenrod', 'skyblue']" 
    language="zh-cn"
    grid-align
    ...
    @drop-echart="dropEchart" />
</template>

import { VueEchartsLinkage, type OneDataType, type SeriesTagType, type DropEchartType  } from 'vue-echarts-linkage';
import "vue-echarts-linkage/dist/style.css";
...
const echartsLinkageRef = ref<InstanceType<typeof VueEchartsLinkage>>();
...
// 拖拽回调事件
const dropEchart = (data: dropEchartType) => {
  // 处理拖拽回调后逻辑
  ...
}

4. 组件属性

5. 组件事件

6. 组件方法