Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts

Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts
插件名称 vue3-highcharts
发布时间 2020年12月30日
插件作者 smithalan92

一个Vue.js 3组件,用于使用合成API渲染Highcharts.js图表​​。

序号插件名称序号插件名称
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

安装和下载:

# NPM
$ npm i vue3-highcharts

基本用法:

1.导入vue3-highcharts组件。

import { createApp } from 'vue';
import VueHighcharts from 'vue3-highcharts';

2.注册组件。

// local
export default {
  name: 'MyChart',
  components: {
    VueHighcharts,
  },
};
// global
const app = createApp(..options);
app.use(VueHighcharts);

3.创建一个基本的highcharts.js图表​​。

<template>
  <vue-highcharts
    type="chart"
    :options="chartOptions"
    :redrawOnUpdate="true"
    :oneToOneUpdate="false"
    :animateOnUpdate="true"
    @rendered="onRender" />
<template>
import { ref } from 'vue';
export default {
  name: 'chart'
  setup() {
    const data = ref([1, 2, 3])
    const chartData = computed(() =>{
      return {
        series: [{
          name: 'Test Series',
          data: data.value,
        }],
      }
    });
    const onRender = () => {
      console.log('Chart rendered');
    };
    return {
      chartData,
      onRender
    };
  }
}

4.可用 props 。

type: { // chart type
  type: String,
  default: 'chart',
},
options: { // Highcharts chart options
  type: Object,
  required: true,
},
redrawOnUpdate: {
  type: Boolean,
  default: true,
},
oneToOneUpdate: {
  type: Boolean,
  default: false,
},
animateOnUpdate: {
  type: Boolean,
  default: true,
},

5.事件。

  • @rendered:呈现图表时发出
  • @updated:图表选项已更新且图表已更新时发出
  • @destroyed:销毁图表实例时发出