使用vue配置highCharts 3D饼状图

2020-3-28 14:35:00
学习记录
59

安装 vue-highcharts highchart

npm i vue-highcharts highcharts -S

在需要的组件中引入并使用

<template> <div class="container"> <div :id="id" :option="option"></div> </div> </template> <script> import HighCharts from 'highcharts'; import VueHighCharts from 'vue-highcharts'; //引入3d库 import highcharts3d from 'highcharts/highcharts-3d' export default { props: { id: { type: String }, //option 是图表的配置数据 option: { type: Object } }, mounted() { highcharts3d(highcharts) HighCharts.chart(this.id, this.option) } } </script>

上述代码是在组件中饮用并使用highCharts

注意如果要使用3D饼状图,必须引用highcharts3d,在this.option中必须设置chart.type="pip, chart.options3d.enabled=true"
完成后的效果如下:
使用vue配置highCharts 3D饼状图

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com