插件名称 | vue3-highcharts |
---|---|
发布时间 | 2020年12月30日 |
插件作者 | smithalan92 |
一个Vue.js 3组件,用于使用合成API渲染Highcharts.js图表。
# 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.事件。