TCharts 图表的 Vue3 封装

使用

安装依赖

npm install @tencent/tcharts-vue-next

注册组件

import { createApp } from 'vue';
import TvisionCharts from '@tencent/tcharts-vue-next';
import App from './app.vue';

const app = createApp(App);
app.use(TvisionCharts);

代码中使用

<script setup lang="ts">
import { ref } from 'vue';

const options = ref({
  title: {
    text: '即时通讯社会族群分布',
    show: true,
  },
  xAxis: {
    boundaryGap: true,
    data: ['学生', '体制内', '白领', '蓝领', '农民', '个体户', '无业者', '其他'],
    title: {
      text: '职业',
      show: true,
    }
  },
  yAxis: {
    type: 'value',
    title: {
      text: '分布',
      show: true,
    }
  },
  series: [
    {
      name: '产品A',
      type: 'bar',
      data: [320, 332, 301, 334, 390, 320, 332, 301],
      stack: 'a',
    },
    {
      name: '产品B',
      type: 'bar',
      data: [220, 182, 191, 234, 290, 220, 182, 191],
      stack: 'a',
    },
    {
      name: '产品C',
      type: 'bar',
      data: [150, 232, 201, 154, 190, 150, 232, 201],
      stack: 'a',
    },
  ],
})
const theme = ref();
const chartType = ref('line');
const updated = (...args: any[]) => {
  console.log('updated', ...args);
}
</script>

<template>
  <div>
    <p>TVision T1 Vue 示例</p>
    <tvision-charts class="chart" :chartType="chartType" :options="options" :theme="theme" :onChartUpdated="updated" />
  </div>
</template>

<style scoped>
.chart {
  width: 800px;
  height: 500px;
}
</style>