Vue 3的基于SVG的图表库 - vue3-charts

Vue 3的基于SVG的图表库 - vue3-charts
插件名称 vue3-charts
版本号 v1.1.13
发布时间 2021年5月13日
插件作者 ghalex

一个简单,可扩展,直观的数据可视化库,用于在Vue 3应用程序中生成基于SVG的图表。

当前支持3种图表类型:折线图,条形图和面积图。更多类型即将推出。

序号插件名称序号插件名称
1Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css12Vue.js创建漂亮的图表– Vue Chartkick
2Vue 3的基于SVG的图表库 - vue3-charts13交互式图表和抓图组件– vue-declarative-plots
3使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts14Vue.js的拖放调度图表程序– scheduler-lite
4Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts15Vue.js的简单反应式图表–vue-chartless
5适用于Vue.js的简单SVG图表库 - vue-simple-chart16Vue的可定制和可组合图表– vue-wcharts
6适用于Google图表的Reactive Vue.js包装器-GChart17简单的纯Vue.js图表​​组件 -pure-vue-chart
7Vue.js的现代图表库– Laue18Chart.Js创建简单和漂亮的图表 - vue-chartjs
8Vue.js 图表 Chart.js组件19使用Vue.js和Chart.js构建HTML5画布图表 - vue-chart
9Vue.js的带有SVG和Smith图表组件20Vue FusionCharts轻量级组件 - vue-fusioncharts
10Vue.js的图表库组件 - V-Charts21Vue.js中的动画条形图种族生成器
11Vue.js基于D3.js可自定义的图表​​插件22Vue和D3.js的朝阳组件 - vue-d3-sunburst

安装和下载:

# Yarn
$ yarn add vue3-charts

# NPM
$ npm i vue3-charts

基本用法:

1.导入所需的组件。

import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'

2.导入要在图表中显示的数据。

export const plByMonth = [
  { name: 'Jan', pl: 1000, avg: 500, inc: 300 },
  { name: 'Feb', pl: 2000, avg: 900, inc: 400 },
  { name: 'Apr', pl: 400, avg: 400, inc: 500 },
  { name: 'Mar', pl: 3100, avg: 1300, inc: 700 },
  { name: 'May', pl: 200, avg: 100, inc: 200 },
  { name: 'Jun', pl: 600, avg: 400, inc: 300 },
  { name: 'Jul', pl: 500, avg: 90, inc: 100 }
]
import { plByMonth } from '@/data'

3.创建一个条形图。

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">
    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
      <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
      <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#48cae4' }" />
      <Marker :value="1000" label="Avg." color="#e76f51" strokeWidth="2" strokeDasharray="6 6" />
    </template>
    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          pl: { color: '#90e0ef' },
          avg: { color: '#0096c7' },
          inc: { color: '#48cae4' }
        }"
      />
    </template>
  </Chart>
</template>
export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })
    const axis = ref({
      primary: {
        type: 'band'
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })
    return { data, direction, margin, axis }
  }
})

4.创建一个折线图。

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">
    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Line :dataKeys="['name', 'pl']" />
      <Line :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
    </template>
    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          name: { hide: true },
          pl: { color: '#0077b6' },
          avg: { label: 'averange', color: 'red' },
          inc: { hide: true }
        }"
      />
    </template>
  </Chart>
</template>
export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })
    const axis = ref({
      primary: {
        type: 'band',
        format: (val: string) => {
          if (val === 'Feb') {
            return '😜'
          }
          return val
        }
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })
    return { data, direction, margin, axis }
  }
})

5.创建一个面积图。

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">
    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Area :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
      <Line
        :dataKeys="['name', 'pl']"
        type="monotone"
        :lineStyle="{
          stroke: '#9f7aea'
        }"
      />
      <Marker v-if="marker" :value="1000" label="Mean." color="green" strokeWidth="2" strokeDasharray="6 6" />
      <defs>
        <linearGradient id="grad" gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
          <stop offset="100%" stop-color="white" stop-opacity="0.4" />
        </linearGradient>
      </defs>
    </template>
    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          pl: { color: '#9f7aea' },
          avg: { hide: true },
          inc: { hide: true }
        }"
      />
    </template>
  </Chart>
</template>
export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })
    const axis = ref({
      primary: {
        type: 'band'
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })
    return { data, direction, margin, axis }
  }
})

6.还支持堆叠图表。

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">
    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Area :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
      <Line
        :dataKeys="['name', 'pl']"
        type="monotone"
        :lineStyle="{
          stroke: '#9f7aea'
        }"
      />
      <Marker v-if="marker" :value="1000" label="Mean." color="green" strokeWidth="2" strokeDasharray="6 6" />
      <defs>
        <linearGradient id="grad" gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
          <stop offset="100%" stop-color="white" stop-opacity="0.4" />
        </linearGradient>
      </defs>
    </template>
    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          pl: { color: '#9f7aea' },
          avg: { hide: true },
          inc: { hide: true }
        }"
      />
    </template>
  </Chart>
</template>
export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })
    const axis = ref({
      primary: {
        type: 'band'
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })
    return { data, direction, margin, axis }
  }
})

变更日志:

v1.1.13(05/11/2021)

  • 更新网格布局