[email protected]

示例

基础用法-浅色主题

<template>
  <div
    class="light"
    style="background: var(--t-background-color)"
  >
    <t-chart-line-base
      theme-style="light"
      :data="chartData"
      :data-x="chartDataX"
      :names="chartNames"
      title="折线图示例-浅色主题"
      @col-click="colClick"
    >
    </t-chart-line-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
} from 'vue';
import {
  EChartsOption,
  ClickValue,
} from '../../packages/chart-line-base/src/index.vue';

export default defineComponent({
  setup() {
    // 折线数据
    const chartData = [
      [10, 13, 16, 19, 15, 12, 11, 10, 9, 12, 14, 16],
      [12, 15, 18, 21, 25, 14, 13, 12, 11, 14, 16, 18],
      [10, 13, 16, 19, 15, 12, 11, 10, 9, 18, 14, 16],
      [12, 15, 18, 21, 17, 14, 13, 12, 11, 14, 16, 18],
    ];
    // 横坐标数据
    const chartDataX = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    // 折线名称
    const chartNames = ['第一条折线', '第二条折线', '第3条折线', '第4条折线'];

    // 点击事件
    const colClick = (res: ClickValue) => {
      console.log(res);
    };

    return {
      chartData,
      chartDataX,
      chartNames,
      colClick,
    };
  },
});
</script>

基础用法-深色主题

<template>
  <div
    class="dark"
    style="background: var(--t-background-color)"
  >
    <t-chart-line-base
      theme-style="dark"
      :data="chartData"
      :data-x="chartDataX"
      :names="chartNames"
      :height="'250px'"
      :show-value="[false, true]"
      :show-areas="[true, false]"
      :mark-line="chartMarkLine"
      :scope="['0%', '50%']"
      :range="[0, 30]"
      title="折线图示例-深色主题"
      :options="chartOptions"
      @col-click="colClick"
    >
    </t-chart-line-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
} from 'vue';
import { CallbackDataParams } from 'echarts/types/src/util/types.d';
import SetThemeColor from '../../../site/hooks/set-theme-variables';
import {
  MarkLineValue,
  EChartsOption,
} from '../../../packages/chart-line-base/src/index.vue';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    // 折线数据
    const chartData = [
      [10, 13, 16, 19, 15, 12, 11, 10, 9, 12, 14, 16],
      [12, 15, 18, 21, 17, 14, 13, 12, 11, 14, 16, 18],
    ];
    // 横坐标数据
    const chartDataX = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    // 折线名称
    const chartNames = ['第一条折线', '第二条折线'];
    // 标线
    const chartMarkLine: MarkLineValue = [{
      data: 10,
      lineStyle: {
        type: 'dotted',
        color: '#FF0000',
        width: 1,
      },
    }];
    // 原生配置
    const chartOptions: EChartsOption = {};

    // 点击事件
    const colClick = (res: ClickValue) => {
      console.log(res);
    };

    return {
      chartData,
      chartDataX,
      chartNames,
      chartMarkLine,
      chartOptions,
      colClick,
    };
  },
});
</script>

双纵轴

<template>
  <div
    class="dark"
    style="background: var(--t-background-color)"
  >
    <t-chart-line-base
      theme-style="dark"
      :data="chartData"
      :data-x="chartDataX"
      :names="chartNames"
      :height="'250px'"
      :show-areas="[true, true]"
      :y-indexs="[0, 1]"
      :scope="['0%', '100%']"
      title="折线图示例-双纵轴"
      :options="chartOptions"
      @col-click="colClick"
    >
    </t-chart-line-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
} from 'vue';
import { CallbackDataParams } from 'echarts/types/src/util/types.d';
import SetThemeColor from '../../../site/hooks/set-theme-variables';
import { EChartsOption } from '../../../packages/chart-line-base/src/index.vue';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    // 折线数据
    const chartData = [
      [10, 13, 16, 19, 15, 12, 11, 10, 9, 12, 14, 16],
      [0.1, 0.2, 0.33, 0.22, 0.4, 0.62, 0.42, 0.26, 0.36, 0.58, 0.9, 0.66],
    ];
    // 横坐标数据
    const chartDataX = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    // 折线名称
    const chartNames = ['第一条折线', '第二条折线'];
    // 原生配置
    const chartOptions: EChartsOption = {
      xAxis: {
        axisLine: { show: true },
      },
      yAxis: [
        // 第一系列数据的纵轴
        {
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
            },
          },
          splitLine: { show: false },
        },
        // 第二系列数据的纵轴
        {
          position: 'right', // 右侧
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#666',
            },
          },
        },
      ],
    };

    // 点击事件
    const colClick = (res: ClickValue) => {
      console.log(res);
    };

    return {
      chartData,
      chartDataX,
      chartNames,
      chartOptions,
      colClick,
    };
  },
});
</script>

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/chart-line-base
yarn add @ths-base/chart-line-base

使用

import TChartLineBase from '@ths-base/chart-line-base';
import '@ths-base/chart-line-base/lib/index.css';
createApp(App).use(TChartLineBase);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TChartLineBase);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填 | | ----------- | :----------------------------------------------------------- | ----------------------------------- | ------------- | -------------- | ---- | | data | 折线数据 | (string | number) [][] | -- | -- | 是 | | data-x | 横坐标数据 | (string | number) [] | -- | -- | 是 | | names | 每条折线命名 | string [] | -- | -- | 是 | | width | 图形宽度 | string | -- | 100% | 否 | | height | 图形高度 | string | -- | 300px | 否 | | title | 图形命名 | string [] | -- | '' | 否 | | smooth | 是否平滑曲线显示 | boolean | -- | true | 否 | | colors | 图像颜色，会分别赋予每条折线。 用16进制表示，例如 #00FF00 | string [] | -- | 内置颜色组 | 否 | | units | 每条折线数据的单位 | string [] | -- | [] | 否 | | mark-line | 标线 | { data: number, lineStyle: {} }[] | -- | [] | 否 | | show-value | 折线上是否显示值，可对每一条折线进行设置 | boolean [] | | [] | 否 | | zoom-lock | 区域锁定，锁定后不能放大缩小，只能平移 | boolean | -- | true | 否 | | scope | 横向显示区域，支持百分比或具体数值，使用百分比需要带% | (string | number) [] | -- | ['0%', '100%'] | 否 | | range | 数据极值区间 | number [] | -- | [0, undefined] | 否 | | show-areas | 折线下方区域背景启用，颜色取当前折线颜色渐变，暂不支持自定义配置 | boolean [] | | [] | 否 | | show-yaxis | 纵坐标轴启用，最多可启用两条纵坐标。纵坐标以折线数据前两条数据为准 | boolean [] | -- | [true, false] | 否 | | y-indexs | 给每个系列指定坐标轴Index注：如果指定，每个系列必须指定 | number [] | -- | [] | 否 | | options | echarts配置，本属性为开放式配置，可通过该配置覆盖组件内部配置（不要试图修改含数据配置，这可能会导致组件无法正常运行）不支持：dataZoom，series需要修改series可以使用：options.lineSeries如果options.yAxis如果是数组，默认yAxis将被完全覆盖。 | object | -- | -- | 否 | | theme-style | 主题风格 | string | light | dark | light | 否 | | show-legend | 显示默认图例 | boolean | -- | true | 否 | | legend-icon | 图例项的 icon | string | -- | 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'; 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI; 可以通过 'path://' 将图标设置为任意的矢量路径。 | 否 | | legend-style | 默认图例样式 | { position: string, align: string, fontSize: number, iconSize: number,} | position: 'top'/'bottom'align: 'center'/'left'/'right' | { position: 'bottom', align: 'center', fontSize: 14, iconSize: 14,}; | 否 |

事件

| 事件名称 | 说明 | 回调参数 | | ---- | ---- | ---- | | col-click | 列点击事件 | { dataX, dataIndex, seriesIndex, data: {name, value }[] } |

作者：喻双