@tslsmart/charts

特斯联统一图表组件库

同时支持vue2和vue3项目;支持typescript

如果你的 vue 版本低于2.7，则还需要单独安装@vue/composition-api插件:

pnpm i @vue/composition-api

安装

需要配合echarts使用

使用 npm/pnpm:

npm/pnpm i @tslsmart/charts echarts

使用 yarn:

yarn add @tslsmart/charts echarts

水波图

如果要使用水波图，还需要单独安装水波图插件echarts-liquidfill:

pnpm i echarts-liquidfill

使用

图表组件库分为图表组件和图表配置两个部分

点击查看详细文档

图表组件

组件接受一个config图表配置对象，对外暴露一个refresh方法，在数据更新了后，可以调用该方法刷新图表

<template>
  <tsl-chart :config="barConfig" ref="chartRef" />
</template>

<script setup>
import { TslChart, defineBaseBar } from '@tslsmart/charts'

const chartRef = ref()

const barConfig = ref({})

// 模拟异步请求数据
setTimeout(() => {
  barConfig.value = defineBaseBar({
    data: [4, 6, 10],
    xAxisData: ['1月', '2月', '3月']
  })

  // 将新的配置应用到图表上面
  chartRef.value.refresh()
}, 1500)
</script>

图表配置

所有的配置函数都是以defineXXX开头的,例如上面的defineBaseBar。

配置函数接受一个对象为参数，这个参数中除了特定的属性外，还可以传入echarts本身的配置，函数内部会将开发者的配置与默认配置合并，例如：

import { defineBaseBar } from '@tslsmart/charts'

const config = defineBaseBar({
  data: [4, 6, 10],
  xAxisData: ['1月', '2月', '3月'],
  title: {
    // echarts的配置
    text: '这是一个标题'
  }
})

则最终渲染的时候，标题会是这是一个标题

后面的文档只会讲解特有的参数属性，echarts 的其他配置请移步

基础柱状图

import { defineBaseBar } from '@tslsmart/charts'

const config = defineBaseBar({
  data: [4, 6, 10], // 数据,必填,类型见下文
  xAxisData: ['1月', '2月', '3月'], // x轴数据,必填,字符串数组
  isGroup: true, // 是否合并为一组,非必填，布尔值
  isArea: true, // 是否区域渐变,非必填，布尔值
  direction: 'vertical' // 方向,横版还是竖版,非必填,只能是'horizontal' 或者 'vertical'，默认'vertical'
})

其中，当isGroup为 false 时，data 的类型需要是[4, 6, 10]这样的数字数组； 为true时，则需要是有name和data属性的对象数组:

const data = [
  {
    name: '张三',
    data: [4, 10, 2]
  },
  {
    name: '李四',
    data: [6, 4, 6]
  },
  {
    name: '王麻子',
    data: [10, 30, 8]
  }
]

斑马纹柱状图

import { defineZebraBar } from '@tslsmart/charts'

const config = defineZebraBar({
  data: [4, 6, 10], // 数据,必填,类型见下文
  xAxisData: ['1月', '2月', '3月'], // x轴数据,必填,字符串数组
  isGroup: true, // 是否合并为一组,非必填，布尔值
  direction: 'vertical' // 方向,横版还是竖版,非必填,只能是'horizontal' 或者 'vertical'，默认'vertical'
})

其中，当isGroup为 false 时，data 的类型需要是[4, 6, 10]这样的数字数组； 为true时，则需要是有name和data属性的对象数组:

const data = [
  {
    name: '张三',
    data: [4, 10, 2]
  },
  {
    name: '李四',
    data: [6, 4, 6]
  },
  {
    name: '王麻子',
    data: [10, 30, 8]
  }
]

堆叠柱状图

import { defineStackBar } from '@tslsmart/charts'

const config = defineStackBar({
  data: [
    {
      name: '张三',
      data: [4, 10, 2, 4, 10, 2, 4, 10, 2]
    },
    {
      name: '李四',
      data: [6, 4, 6, 6, 4, 6, 6, 4, 6]
    },
    {
      name: '王麻子',
      data: [10, 30, 8, 10, 30, 8, 10, 30, 8]
    }
  ], // 必填,必须要有`name`和`data`属性
  xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'], // x轴数据,必填,字符串数组
  direction: 'vertical' // 方向,横版还是竖版,非必填,只能是'horizontal' 或者 'vertical'，默认'vertical'
})

基础线图

import { defineBaseLine } from '@tslsmart/charts'
const config = defineBaseLine({
  data: {
      name: '华为',
      data: [4, 6, 10]
    },
    {
      name: '苹果',
      data: [6, 18, 5]
    }, // 数据,需要是对象数组,其中`name`非必填，`data`是必填的，需要是数字数组
  xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'], // x轴数据,必填,字符串数组
  smooth: false, // 是否平滑曲线,非必填,true为平滑曲线,false为折线图
  isArea: true, // 是否区域图,非必填,布尔值
})

玉玦图（环形柱状图）

import { defineCircleBar } from '@tslsmart/charts'

const config = defineCircleBar({
  data: [
    {
      name: '张三', // 必填
      value: 4 // 必填
    },
    {
      name: '李四',
      value: 6
    },
    {
      name: '王麻子',
      value: 10
    }
  ]
})

饼图

import { definePie } from '@tslsmart/charts'

const config = definePie({
  data: [
    { value: 335, name: '直接访问' },
    { value: 310, name: '邮件营销' },
    { value: 234, name: '联盟广告' },
    { value: 135, name: '视频广告' },
    { value: 1548, name: '搜索引擎' }
  ]
})

环形图

import { defineBaseRing } from '@tslsmart/charts'

const config = defineBaseRing({
  data: [
    { value: 335, name: '直接访问' },
    { value: 310, name: '邮件营销' },
    { value: 234, name: '联盟广告' },
    { value: 135, name: '视频广告' },
    { value: 1548, name: '搜索引擎' }
  ],
  borderColor: '#333' // 边框颜色，非必填
})

玫瑰图

import { defineRose } from '@tslsmart/charts'

const config = defineRose({
  data: [
    { value: 3351, name: '直接访问' },
    { value: 3101, name: '邮件营销' },
    { value: 2341, name: '联盟广告' },
    { value: 1351, name: '视频广告' },
    { value: 1541, name: '搜索引擎' }
  ]
})

水波图（水球图）

水波图需要单独安装插件echarts-liquidfill，且配置函数的导入方式也有所变化

安装插件

pnpm i echarts-liquidfill

导入使用

import { defineBaseLiquid } from '@tslsmart/charts/dist/liquid'

const config = defineBaseLiquid({
  data: 0.35 // 必须是小数
})