TCharts 图表的 Vue 封装

使用

安装依赖

npm install @tencent/tcharts-vue

使用

import Vue from 'vue';
import App from './App.vue';
import TvisionCharts from '@tencent/tcharts-vue';

Vue.use(TvisionCharts);

代码中使用

<template>
  <div>
    <p>Hello Vite Vue2</p>
    <tvision-charts class="demo" chartType="line" :options="option" :onChartUpdated="update"></tvision-charts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        xAxis: {
          boundaryGap: false,
          data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', ],
          axisLabel: {
            formatter: (value) => `${value}年`,
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '深圳房价',
            type: 'line',
            data: [159, 201, 209, 302, 600, 620, 710, 898],
          },
        ],
      }
    }
  },
  methods: {
    update(...args) {
      console.log('updated', ...args);
    },
  },
  mounted() {
    console.log('mounted');
    setTimeout(() => {
      this.option.series[0].type = 'bar';
      this.option.xAxis.boundaryGap = true;
    }, 3000);
  }
}
</script>

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