示例说明

vue-echarts-linkage 联动组件的拓展示例。

注意：拓展示例包含的功能，包括：

1. 基础基线

• 关键：markLineArray 属性，内部数据格式与echarts官方属性 markLine 中 data 格式一致。
• 示例：

{
  "markLineArray": [
    { "label": { "show": true, "position": "insideMiddleTop", "formatter": "100" }, "xAxis": "100" },
    { "label": { "show": true, "position": "insideMiddleTop", "formatter": "200" }, "xAxis": "200" },
    { "label": { "show": true, "position": "insideMiddleTop", "formatter": "300" }, "yAxis": "300" }
    { "label": { "show": true, "position": "insideMiddleTop", "formatter": "400" }, "yAxis": "400" }
  ]
}

1. 基础基线

• 通过设置基础基线，可以实现基线数据与实际数据对齐比较。

点我查看代码

<template>
  <div class="btn-container">
    <div class="drag-rect drag-rect-line base-mode" draggable="true"><span>可拖拽折线（基础基线）</span></div>
  </div>
  <!-- 可自定义配置显示列数(cols) | 最大图表数(echarts-max-count) | 空白图表数(empty-echart-count) -->
  <VueEchartsLinkage ref="echartsLinkageRef" :cols="1" :echarts-max-count="10" language="zh-cn" grid-align
    :theme="theme" :use-graphic-location="false" :is-echarts-height-change="false" :echarts-height-fixed-count="2"
    group-default-name="demo1_1-group" @drop-echart="dropEchart" />
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from "vue";
import { RandomUtil } from "@/components/utils/index";
import { VueEchartsLinkage } from 'vue-echarts-linkage';
import type { OneDataType, DropEchartType } from 'vue-echarts-linkage';
import "vue-echarts-linkage/dist/style.css";
import { MyTheme } from "@/composables/MyTheme";

const { theme } = new MyTheme();
const echartsLinkageRef = useTemplateRef<InstanceType<typeof VueEchartsLinkage>>('echartsLinkageRef');
let seriesType = 'line' as 'line' | 'bar';

// 组装数据
const packageBaseLineModeData = (type: 'line' | 'bar' = 'line') => {
  const seriesData = RandomUtil.getSeriesData(1000);
  const maxEchartsIdSeq = echartsLinkageRef.value!.getMaxEchartsIdSeq();
  const random = Math.floor(Math.random() * 100);
  const name = `新增图表${maxEchartsIdSeq}-${random}`;
  const oneDataType: OneDataType = {
    name: name,
    yAxisName: `[${Math.floor(Math.random() * 10) > 5 ? 'mm' : '℃'}]`,
    type: type,
    seriesData: seriesData,
  };
  return oneDataType;
}

// 新增series按钮
const addLinkageSeriesCommon = (type: 'line' | 'bar' = 'line', id?: string) => {
  const maxEchartsIdSeq = echartsLinkageRef.value!.getMaxEchartsIdSeq();
  id = id || 'echart' + maxEchartsIdSeq;
  let oneDataType: OneDataType = {} as OneDataType;
  oneDataType = packageBaseLineModeData(type);
  echartsLinkageRef.value!.addEchartSeries(id, oneDataType);
}

// 新增按钮 -- 设置X轴基线
const addLinkageBtnClick_X = () => {
  const oneDataType: OneDataType = packageBaseLineModeData();
  const aaa = RandomUtil.getRandomDataFromInterval(100, 500) + '';
  const bbb = RandomUtil.getRandomDataFromInterval(600, 800) + '';
  oneDataType.markLineArray = [
    { label: { show: true, position: 'insideMiddleTop', formatter: aaa }, xAxis: aaa },
    { label: { show: true, position: 'insideMiddleTop', formatter: bbb }, xAxis: bbb }
  ];
  echartsLinkageRef.value!.addEchart(oneDataType);
}

// 新增按钮 -- 设置Y轴基线
const addLinkageBtnClick_Y = () => {
  const oneDataType: OneDataType = packageBaseLineModeData();
  // 求最大值和最小值
  const maxValue = Math.max(...oneDataType.seriesData.map(item => Number(item[1])));
  const minValue = Math.min(...oneDataType.seriesData.map(item => Number(item[1])));
  const aaa = (minValue + (maxValue - minValue) / 3).toFixed(0);
  const bbb = (minValue + (maxValue - minValue) / 3 * 2).toFixed(0);
  oneDataType.markLineArray = [
    { label: { show: true, position: 'insideMiddleTop', formatter: aaa }, yAxis: aaa },
    { label: { show: true, position: 'insideMiddleTop', formatter: bbb }, yAxis: bbb }
  ];
  echartsLinkageRef.value!.addEchart(oneDataType);
}

// 拖拽回调事件
const dropEchart = (data: DropEchartType) => {
  addLinkageSeriesCommon(seriesType, data.id);
}

// 监听拖拽事件
const initLisener = () => {
  const dragRectLine: HTMLElement = document.querySelector('.base-mode') as HTMLElement;
  dragRectLine.addEventListener('dragstart', (e: DragEvent) => {
    seriesType = 'line';
    e.dataTransfer!.setData('text', "123");
    e.dataTransfer!.dropEffect = 'move';
  });
}

const init = () => {
  initLisener();
  addLinkageBtnClick_X();
  addLinkageSeriesCommon();
  addLinkageBtnClick_Y();
}

onMounted(() => {
  init();
});
</script>

<style scoped lang="less">
.btn-container {
  height: 5vh;
  padding: 10px;
  display: flex;
  align-items: center;
  column-gap: 10px;

  .drag-rect {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    border-radius: 4px;
    padding: 5px 11px;
    background-image: linear-gradient(to right, #4286f4, #00b4d8);
    border: 1px solid #00b4d8;

    span {
      color: #fff;
      font-size: 12px;
      line-height: 12px;
    }
  }
}

.echarts-linkage-container {
  width: 100%;
  height: 60vh;
}
</style>
<style>
.echarts-linkage-container .main-container {
  padding-bottom: 0 !important;
}
</style>

More docs

...