3D柱状图动态数据交互（highcharts图表）

npm install highcharts --save

<template>
    <div class="box">
        <!--文档地址 https://www.hcharts.cn/demo/highcharts/3d-pie-donut   -->

        <div id="container"></div>
        <tr>
            <td>α 角（内旋转角）</td>
            <td><input @input="changea($event, 'alpha')" type="range" min="0" max="45" value="15" /></td>
        </tr>
        <tr>
            <td>β 角（外旋转角）</td>
            <td><input @input="changea($event, 'alpha')" type="range" min="-45" max="45" value="15" />
            </td>
        </tr>
        <tr>
            <td>深度</td>
            <td><input @input="changea($event, 'depth')" type="range" min="20" max="100" value="50" />
            </td>
        </tr>
    </div>

 

<script>

import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

export default {
    name: "",
    data() {
        return {
            options: {
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 15,
                        beta: 15,
                        depth: 50,
                        viewDistance: 25
                    }
                },
                title: {
                    text: '交互性3D柱状图'
                },
                subtitle: {
                    text: '可通过滑动下方滑块测试'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                series: [{
                    name: '图例1',
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]
            },
            chart: () => { },
        }
    },
    created() {

    },
    mounted() {
        // 图表初始化函数
        this.init()
    },
    methods: {
        init() {
            this.chart = Highcharts.chart('container', this.options);

        },

        changea(e, id) {
            this.chart.update({
                chart: {
                    options3d: {
                        [id]: Number(e.target.value),
                    }
                },

            })
            console.log('this.options', this.options);

        }

    }
}
</script>

<style lang="scss" scoped>
.box {
    #container {
        width: 600px;
        height: 400px;
    }
}

/* @import url(); 引入css类 */
</style>