❤
npm
Sign UpSign In

@ths-base/chart-line-base
TypeScript icon, indicating that this package has built-in type declarations

2.0.7 • Public • Published

t-chart-line-base@1.0.0

示例

基础用法-浅色主题

<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 }[] }

作者：喻双

Dependents (0)

Package Sidebar

Install

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

Repository

192.168.0.134:8929/product/cp8888/component-library/front-end/ths-design/-/tree/master/packages/components/chart-line-base

Weekly Downloads

0

Version

2.0.7

License

none

Unpacked Size

23.2 kB

Total Files

9

Last publish

Collaborators

  • thssilu
  • ansevenlet
Try on RunKit
Report malware