[email protected]

基础柱状图，支持多条柱形，同时也开放echarts原生options。

示例

基础用法-浅色主题

<template>
  <div class="light" style="background: var(--t-background-color)">
    <t-chart-bar-base
      theme-style="light"
      height="250px"
      bar-width="14"
      bar-gap="80%"
      unit="件"
      title="基础用法-浅色主题"
      :data="chartData"
      legendIcon="rect"
      :data-x="chartDataX"
      :names="chartNames"
      :range="[0, 25]"
      :legendStyle="legendStyle"
    >
    </t-chart-bar-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
} from 'vue';
import { ClickValue } from '../../packages/chart-bar-base/src/index.vue';
import SetThemeColor from '../../../site/hooks/set-theme-variables';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    // 柱形数据
    const chartData = [
      [15, 25, 13],
    ];
    // 横坐标数据
    const chartDataX = ['已完成', '办理中', '已逾期'];
    // 系列名称
    const chartNames = ['办理情况'];
    // 图例样式
    const legendStyle = {
      position: 'top',
      align: 'right',
      fontSize: 16,
      iconSize: 16,
    };

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

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

基础用法-深色主题

<template>
  <div class="dark" style="background: #000050">
    <t-chart-bar-base
      theme-style="dark"
      height="250px"
      bar-width="14"
      bar-gap="80%"
      unit="件"
      :data="chartData"
      :data-x="chartDataX"
      :names="chartNames"
      title="基础用法-深色主题"
      :range="[0, 25]"
      :legendStyle="legendStyle"
      :c-style="{
        wrapper: {
          default: {
            background: '#000050'
          }
        }
      }"
    >
    </t-chart-bar-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
} from 'vue';
import { ClickValue } from '../../packages/chart-bar-base/src/index.vue';
import SetThemeColor from '../../../site/hooks/set-theme-variables';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    // 柱形数据
    const chartData = [
      [15, 16, 13],
    ];
    // 横坐标数据
    const chartDataX = ['已完成', '办理中', '已逾期'];
    // 系列名称
    const chartNames = ['办理情况'];
    // 图例样式
    const legendStyle = {
      position: 'top',
      align: 'right',
      margin: '0 20',
      fontSize: 16,
      iconSize: 16,
    };

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

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

基础用法-使用内置图例

使用内置图例时，legendStyle中col和margin不生效

<template>
  <div class="light" style="background: var(--t-background-color)">
    <t-chart-bar-base
      theme-style="light"
      height="250px"
      bar-width="14"
      bar-gap="80%"
      unit="件"
      title="基础用法-浅色主题"
      :data="chartData"
      :data-x="chartDataX"
      :names="chartNames"
      :range="[0, 25]"
      legendIcon="circle"
      :legendStyle="legendStyle"
    >
    </t-chart-bar-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
} from 'vue';
import { ClickValue } from '../../packages/chart-bar-base/src/index.vue';
import SetThemeColor from '../../../site/hooks/set-theme-variables';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    // 柱形数据
    const chartData = [
      [15, 25, 13],
    ];
    // 横坐标数据
    const chartDataX = ['已完成', '办理中', '已逾期'];
    // 系列名称
    const chartNames = ['办理情况'];
    // 图例样式
    const legendStyle = {
      position: 'top',
      align: 'right',
      margin: '0 20',
      fontSize: 12,
      iconSize: 14,
    };

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

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

基础用法-使用默认图例（legendIcon=default）

<template>
  <div class="dark" style="background: var(--t-background-color)">
    <t-chart-bar-base
      theme-style="dark"
      height="250px"
      bar-width="14"
      bar-gap="80%"
      unit="件"
      :data="chartData"
      :data-x="chartDataX"
      :names="chartNames"
      title="基础用法-深色主题"
      :range="[0, 25]"
      legendIcon="default"
      :legendStyle="legendStyle"
      :c-style="{
        wrapper: {
          default: {
            background: '#000050'
          }
        }
      }"
    >
    </t-chart-bar-base>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
} from 'vue';
import { ClickValue } from '../../packages/chart-bar-base/src/index.vue';
import SetThemeColor from '../../../site/hooks/set-theme-variables';

export default defineComponent({
  extends: SetThemeColor,
  setup() {
    // 柱形数据
    const chartData = [
      [15, 16, 13],
    ];
    // 横坐标数据
    const chartDataX = ['已完成', '办理中', '已逾期'];
    // 系列名称
    const chartNames = ['办理情况'];
    // 图例样式
    const legendStyle = {
      position: 'top',
      align: 'right',
      margin: '0 20',
      fontSize: 16,
      iconSize: 16,
    };

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

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

多条柱形用法

<template>
  <t-chart-bar-base
    height="250px"
    bar-width="14"
    bar-gap="80%"
    unit="件"
    :data="chartData"
    :data-x="chartDataX"
    :names="chartNames"
    :range="[0, 25]"
    :legendStyle="legendStyle"
    :options="chartOptions"
    @col-click="colClick"
  >
  </t-chart-bar-base>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ClickValue } from '../../packages/chart-bar-base/src/index.vue';

export default defineComponent({
  setup() {
    // 柱形数据
    const chartData = [
      [15, 16, 13, 13],
      [24, 22, 20, 23],
      [12, 14, 8, 9],
    ];
    // 横坐标数据
    const chartDataX = ['已完成', '正常推进', '滞后', '严重滞后'];
    // 系列名称
    const chartNames = ['大气污染排放', '臭氧行动', '大鹏蓝'];
    // 图例样式
    const legendStyle = {
      position: 'top',
      align: 'right',
      margin: '0 20',
      fontSize: 16,
      iconSize: 16,
    };
    // 原生配置
    const chartOptions = {
      xAxis: {
        axisLabel: {
          fontSize: 12,
        },
      },
    };

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

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

双纵轴+差位图

<template>
  <div class="dark" style="background: #000050">
    <t-chart-bar-base
      height="250px"
      bar-width="8"
      bar-gap="60%"
      :y-indexs="[0, 1]"
      :data="barData"
      :data-x="barDataX"
      :names="barNames"
      :legendStyle="legendStyle"
      :c-style="barStyle"
      :options="barOptions"
    />
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
} from 'vue';
import {
  BarDataItemOption,
  ClickValue,
} from '../../packages/chart-bar-base/src/index.vue';

export default defineComponent({
  setup() {
    // 柱形图数据
    const barData = [
      [0.06, 0.08, 0.07, 0.11, 0.06, 0.08],
      [0.03, -0.10, 0.05, 0.02, -0.05, 0.06],
    ];
    const barDataX = ['核电近海', '白沙湾', '下沙近海', '污泥湾口', '东西涌进', '水体水体'];
    const barNames = ['平均综合污染指数', '较去年变化幅度'];
    // 柱形图自定义样式
    const barStyle = {
      legendItem: {
        height: '20px',
      },
      legendName: {
        color: '#fff',
      },
      legendRoot: {
        marginBottom: '8px',
      },
    };
    // 柱形图图例样式
    const legendStyle = {
      position: 'top',
      align: 'right',
      margin: '0 20',
      fontSize: 12,
      iconSize: 12,
    };
    // 原生配置
    const barOptions = {
      grid: {
        top: 8,
      },
      xAxis: {
        axisLabel: {
          color: '#fff',
          fontSize: 12,
          interval: 0,
          align: 'center',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#666',
          },
        },
      },
      yAxis: [
        // 第一系列数据的纵轴
        {
          min: undefined,
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
            },
          },
          splitLine: { show: false },
        }, 
        // 第二系列数据的纵轴
        {
          min: undefined,
          position: 'right', // 右侧
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
            },
          },
          splitLine: { 
            show: false,
            lineStyle: {
              color: '#666',
            }
          },
        },
      ],
      tooltip: {
        show: true,
      },
    };

    // 格式化数据
    function formateValue(data: number[]): BarDataItemOption[] {
      const colors = ['#FFEA00', '#F00']; // [0]正，[1]负
      return data.map((item: number) => ({
        value: item,
        itemStyle: {
          color: colors[item < 0 ? 1 : 0], // 负数使用第二个颜色
        }
      }))
    }

    return {
      barData: [barData[0], formateValue(barData[1])], // 对第二列数据的负数，更换颜色
      barDataX,
      barNames,
      barStyle,
      legendStyle,
      barOptions,
    };
  },
});
</script>

安装

npm 安装

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

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

使用

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

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(TChartBarBase);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填 | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ---- | | data | 柱形图数据 Echarts.series.bar.data[] | (string | number | object)[][] | -- | | 是 | | data-x | 横坐标数据 | (string | number) [] | -- | | 是 | | names | 每组柱形命名 | string [] | -- | | 是 | | width | 图形宽度 | string | -- | 100% | 否 | | height | 图形高度 | string | -- | 300px | 否 | | title | 图形命名 | string [] | -- | '' | 否 | | colors | 图像颜色，会分别赋予每组柱形。 用16进制表示，例如 #00FF00 | string [] | -- | 内置颜色组(目前UI暂时提供了3个颜色) | 否 | | bar-width | 柱形宽度 | number | -- | 自适应 | 否 | | bar-gap | 不同系列柱形在同一列的间距 只能使用n%形式，百分数基于柱子宽度。 | string | -- | 30% | 否 | | unit | 数据单位 | string | -- | '' | 否 | | mark-line | 标线 | { data: number, lineStyle: {}}[] | -- | [] | 否 | | show-legend | 显示默认图例 | boolean | -- | true | 否 | | legend-style | 默认图例样式margin: 可以是单个数字，也可以是组合，比如margin: '0 5'，会被解析为cssmargin: 0px 5px | { position: string, align: string, fontSize: number, iconSize: number,margin: number|string col: number} | position: 'top'/'bottom'align: 'center'/'left'/'right' | { position: 'bottom', align: 'center', fontSize: 14, iconSize: 14,col: 1}; | 否 | | legend-icon | 图例项的 icon | string | 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', 'default'; 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI; 可以通过 'path://' 将图标设置为任意的矢量路径。| default | 否 | | show-tooltip | 显示默认tooltip | boolean | -- | true | 否 | | show-value | 柱形上是否显示值，可对每一组数据进行设置 | boolean [] | | [] | 否 | | zoom-lock | 区域锁定，锁定后不能放大缩小，只能平移 | boolean | -- | true | 否 | | scope | 横向显示区域，支持百分比或具体数值，使用百分比需要带% | (string | number) [] | -- | ['0%', '100%'] | 否 | | range | 数据极值区间 | number [] | -- | [0, undefined] | 否 | | y-indexs | 给每个系列指定坐标轴Index注：如果指定，每个系列必须指定 | number [] | -- | [] | 否 | | options | echarts配置，本属性为开放式配置，可通过该配置覆盖组件内部配置（不要试图修改含数据配置，这可能会导致组件无法正常运行）不支持：series需要修改series可以使用：options.barSeries如果options.yAxis如果是数组，默认yAxis将被完全覆盖。 | object | -- | -- | 否 | | theme-style | 主题风格 | string | light | dark | light | 否 |

cStyle属性

| 参数 | 说明 | | ---------- | ----------------- | | root | 根节点style | | chart | 图像节点style | | legendRoot | 图例根节点style | | legendItem | 图例每项style | | legendIcon | 图例图标容器style | | legendName | 图例名称容器style |

事件

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

作者：喻双