Vue + HighCharts 画不同高度的3D饼/环图

最新推荐文章于 2024-07-09 16:02:56 发布
最新推荐文章于 2024-07-09 16:02:56 发布
阅读量3.2k 收藏 5
点赞数 3
分类专栏： 前端组件 文章标签： vue.js 3d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jonsnow595/article/details/122524118
版权

前言：由于公司可视化数字大屏项目需要用到了3D饼图和3D环图，所以在博客里记录一下！如果能帮到你，那么点个赞吧，哈哈哈。

话不多说，直接先上效果图：
3D饼图
在这里插入图片描述
3D环图
在这里插入图片描述
下面是步骤以及代码：

1.npm 安装 highcharts

npm install highcharts --save

2.在main.js中引用 highcharts, 注意：画3D图需要使用到 highcharts里面的 highcharts-3d

import Highcharts from 'highcharts'
 
import Highcharts3d from 'highcharts/highcharts-3d'
 
Highcharts3d(Highcharts)

3D饼图：
HTML:

<template>
    <div class="absolute-left-right-top-bottom charts-main">
        <div class="content">
            <highcharts :options="chartOptions1" class="content-pic"></highcharts>
        </div>
    </div>
</template>

JS：

<script>
import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'

Highcharts3d(Highcharts)

export default {
    name: 'theHospitalStatistics',
    components: {
        'highcharts': Chart
    },
    data() {
        return {
            chartOptions1: {
                credits: {
                    enabled: false
                },
                exporting: { enabled: false },
                chart: {
                    type: 'pie',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    backgroundColor: null,
                    animation: false,
                    options3d: {
                        enabled: true,
                        // 延y轴向内的倾斜角度
                        alpha: 75,
                        // 外旋转角度
                        beta: 0
                    }
                },
                title: {
                    text: null
                },
                tooltip: {
                    // 数据提示框的背景颜色
                    backgroundColor: 'rgba(50,71,179,0.4)',
                    // 边框颜色
                    // borderColor:'rgba(206,94,74,.9)',
                    style: {
                        fontSize: 24,
                        color: '#16D8E9'
                    },
                    useHTML: true, // 是否使用HTML编辑提示信息
                    formatter: function() {
                        // console.log(this) // 控制台输出可以看到有很多属性
                        if (this.point.name === '治愈') {
                            return '<span style="color:#00E5E3; font-size: 20px">' + this.series.name + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + ' : ' + '</span>' + '<span style="color:#763FF7; font-size: 24px; font-weight: bold">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                        } else if (this.point.name === '好转') {
                            return '<span style="color:#00E5E3; font-size: 20px">' + this.series.name + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + ' : ' + '</span>' + '<span style="color:#e42af8; font-size: 24px; font-weight: bold">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                        } else if (this.point.name === '死亡') {
                            return '<span style="color:#00E5E3; font-size: 20px">' + this.series.name + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + ' : ' + '</span>' + '<span style="color:#67cee8; font-size: 24px; font-weight: bold">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                        } else if (this.point.name === '其他') {
                            return '<span style="color:#00E5E3; font-size: 20px">' + this.series.name + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + ' : ' + '</span>' + '<span style="color:#4061f7; font-size: 24px; font-weight: bold">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                        }
                    },
                    valueDecimals: 2 // 数据值保留小数位数
                },
                legend: {
                    itemStyle: {
                        fontSize : 18,
                        color: '#00FCF9',
                        fontFamily: 'MicrosoftYaHei',
                        fontWeight: 400
                    }
                },
                plotOptions: {
                    pie: {
                        // 每个扇块能否选中
                        allowPointSelect: false,
                        // 鼠标指针
                        cursor: 'pointer',
                        // 饼图的厚度
                        depth: 70,
                        // 空心
                        innerSize: '0%',
                        textShadow: false,
                        shadow: false,
                        // 提示信息
                        dataLabels: {
                            // 是否显示饼图的线形tip
                            enabled: true,
                            // 设置引导线的长度
                            distance: 25,
                            style: {
                                color: '#E9F4FF',
                                fontSize: 14,
                                fontWeight: 'bold'
                            },
                            formatter: function() { // 设置字体与引导线和饼图颜色一致
                                if (this.point.name === '治愈') {
                                    return '<span style="color:#00FCF9; font-size: 20px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                                } else if (this.point.name === '好转') {
                                    return '<span style="color:#00FCF9; font-size: 20px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                                } else if (this.point.name === '死亡') {
                                    return '<span style="color:#00FCF9; font-size: 20px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                                } else if (this.point.name === '其他') {
                                    return '<span style="color:#00FCF9; font-size: 20px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                                }
                            }
                        }
                    }
                },
                // colors: ['#763FF7', '#e42af8', '#67cee8', '#4061f7'],
                series: [{
                    type: 'pie',
                    name: '挂号类别分布',
                    size: '65%',
                    startAngle: 220, // 调整饼图的角度   方向：顺时针
                    showInLegend: true, // 是否打开图例
                    colorByPoint: true,
                    data: [
                        {
                            name: '治愈',
                            y: 56.21,
                            h: 50, // 高度
                            sliced: false, // 是否突出
                            selected: false // 是否一直不透明
                        },
                        {
                            name: '好转',
                            y: 38.96,
                            h: 30, // 高度
                            sliced: false, // 是否突出
                            selected: false // 是否一直不透明
                        },
                        {
                            name: '其他',
                            y: 4.83,
                            h: 10, // 高度
                            sliced: false, // 是否突出
                            selected: false // 是否一直不透明
                        },
                        {
                            name: '死亡',
                            y: 1.83,
                            h: 10, // 高度
                            sliced: false, // 是否突出
                            selected: false // 是否一直不透明
                        }
                    ]
                }]
            }
        }
    },
    created() {
        // 设置颜色渐变
        this.setcolor();
        // 设置饼图高度
        this.setOptonHeight();
    },
    mounted() {

    },
    methods: {
        setcolor() {
            // 颜色的填充
            let color1 = ['#763FF7', '#e42af8', '#67cee8', '#4061f7'] // 16D8E9
            let color2 = ['#480ecd', '#a834ea', '#51b3ea', '#3101c6']
            Highcharts.getOptions().colors = Highcharts.map(
                Highcharts.getOptions().colors,
                function(color, index) {
                    return {
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, color1[index]],
                            [1, color2[index]] // darken
                        ]
                    }
                }
            )
        },
        setOptonHeight() {
            var each = Highcharts.each,
                round = Math.round,
                cos = Math.cos,
                sin = Math.sin,
                deg2rad = Math.deg2rad;
            Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
                proceed.apply(this, [].slice.call(arguments, 1));
                // Do not do this if the chart is not 3D
                if (!this.chart.is3d()) {
                    return;
                }
                var series = this,
                    chart = series.chart,
                    options = chart.options,
                    seriesOptions = series.options,
                    depth = seriesOptions.depth || 0,
                    options3d = options.chart.options3d,
                    alpha = options3d.alpha,
                    beta = options3d.beta,
                    z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
                z += depth / 2;
                if (seriesOptions.grouping !== false) {
                    z = 0;
                }
                each(series.data, function(point) {
                    var shapeArgs = point.shapeArgs,
                        angle;
                    point.shapeType = 'arc3d';
                    var ran = point.options.h;
                    shapeArgs.z = z;
                    shapeArgs.depth = depth * 0.75 + ran;
                    shapeArgs.alpha = alpha;
                    shapeArgs.beta = beta;
                    shapeArgs.center = series.center;
                    shapeArgs.ran = ran;
                    angle = (shapeArgs.end + shapeArgs.start) / 2;
                    point.slicedTranslation = {
                        translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
                        translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
                    };
                });
            });
            (function(H) {
                H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
                    // Run original proceed method
                    var ret = proceed.apply(this, [].slice.call(arguments, 1));
                    ret.zTop = (ret.zOut + 0.5) / 100;
                    return ret;
                });
            }(Highcharts))
        }
    }
}
</script>

3D环图
环图与饼图的代码区别只有一个 innerSize 空心率的设置，我这边设置的为 50%。

// 空心
innerSize: ‘50%’,

HTML：

<template>
    <div class="absolute-left-right-top-bottom charts-main">
        <div class="content">
            <highcharts :options="chartOptions1" class="content-pic"></highcharts>
        </div>
    </div>
</template>

JS：

<script>
import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'

Highcharts3d(Highcharts)

export default {
    name: 'deliveryWay',
    components: {
        'highcharts': Chart
    },
    data() {
        return {
            chartOptions1: {
                credits: {
                    enabled: false
                },
                exporting: { enabled: false },
                chart: {
                    type: 'pie',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    backgroundColor: null,

                    options3d: {
                        enabled: true,
                        // 延y轴向内的倾斜角度
                        alpha: 75,
                        // 外旋转角度
                        beta: 0
                    }
                },
                title: {
                    text: null
                },
                tooltip: {
                    // 数据提示框的背景颜色
                    backgroundColor: 'rgba(50,71,179,0.4)',
                    // 边框颜色
                    // borderColor:'rgba(206,94,74,.9)',
                    style: {
                        fontSize: 24,
                        color: '#16D8E9'
                    },
                    useHTML: true, // 是否使用HTML编辑提示信息
                    formatter: function() {
                        // console.log(this) // 控制台输出可以看到有很多属性
                        if (this.point.name === '顺产率') {
                            return '<span style="color:#00E5E3; font-size: 20px">' + this.series.name + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + ' : ' + '</span>' + '<span style="color:#26C4FF; font-size: 24px; font-weight: bold">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                        } else if (this.point.name === '剖宫产率') {
                            return '<span style="color:#00E5E3; font-size: 20px">' + this.series.name + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + ' : ' + '</span>' + '<span style="color:#CA78F9; font-size: 24px; font-weight: bold">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                        }
                    },
                    valueDecimals: 2 // 数据值保留小数位数
                },
                legend: {
                    itemStyle: {
                        fontSize : 18,
                        color: '#00FCF9',
                        fontFamily: 'MicrosoftYaHei',
                        fontWeight: 400
                    }
                },
                plotOptions: {
                    pie: {
                        // 每个扇块能否选中
                        allowPointSelect: false,
                        // 鼠标指针
                        cursor: 'pointer',
                        // 饼图的厚度
                        depth: 70,
                        // 空心
                        innerSize: '50%',
                        textShadow: false,
                        shadow: false,
                        // 提示信息
                        dataLabels: {
                            // 是否显示饼图的线形tip
                            enabled: true,
                            // 设置引导线的长度
                            distance: 25,
                            style: {
                                color: '#E9F4FF',
                                fontSize: 14,
                                fontWeight: 'bold'
                            },
                            formatter: function() { // 设置字体与引导线和饼图颜色一致
                                if (this.point.name === '顺产率') {
                                    return '<span style="color:#00FCF9; font-size: 20px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                                    // return '<span style="color:#26C4FF; font-size: 24px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>' + '<br>' + '<span style="color:#E9F4FF; font-size: 16px">' + this.point.name + '</span>';
                                } else if (this.point.name === '剖宫产率') {
                                    return '<span style="color:#00FCF9; font-size: 20px">' + Highcharts.numberFormat(this.percentage, 2) + '%' + '</span>';
                                }
                            }
                        },
                        states: {
                            inactive: {
                                opacity: 0.7,
                                size: '120%'
                            },
                            hover: {
                                halo: {
                                    size: '120%',
                                    attributes: {
                                        fill: Highcharts.getOptions().colors[2],
                                        'stroke-width': 2,
                                        stroke: Highcharts.getOptions().colors[1]
                                    }
                                }
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '挂号类别分布',
                    size: '65%',
                    startAngle: 220, // 调整饼图的角度   方向：顺时针
                    showInLegend: true, // 是否打开图例
                    colorByPoint: true,
                    data: [
                        {
                            name: '顺产率',
                            y: 60.48,
                            h: 50, // 高度
                            sliced: false, // 是否突出
                            selected: false // 是否一直不透明
                        },
                        {
                            name: '剖宫产率',
                            y: 39.52,
                            h: 10, // 高度
                            sliced: false, // 是否突出
                            selected: false // 是否一直不透明
                        }
                    ]
                }]
            }
        }
    },
    created() {
        // 设置颜色渐变
        this.setcolor()
        // 设置饼图高度
        this.setOptonHeight()
    },
    mounted() {

    },
    methods: {
        setcolor() {
            // 颜色的填充
            let color1 = ['rgba(0, 66, 178, 0.4)', 'rgba(203, 50, 245, 0.6)'] // 16D8E9 rgba(203, 50, 245, 0.4)
            let color2 = ['#00b3ff', '#c633f4']
            Highcharts.getOptions().colors = Highcharts.map(
                Highcharts.getOptions().colors,
                function(color, index) {
                    return {
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        // radialGradient: { cx: 1, cy: 1, r: 1 },
                        stops: [
                            [0, color1[index]],
                            [1, color2[index]] // darken
                        ]
                    }
                }
            )
        },
        setOptonHeight() {
            var each = Highcharts.each,
                round = Math.round,
                cos = Math.cos,
                sin = Math.sin,
                deg2rad = Math.deg2rad
            Highcharts.wrap(
                Highcharts.seriesTypes.pie.prototype,
                'translate',
                function(proceed) {
                    proceed.apply(this, [].slice.call(arguments, 1))
                    // Do not do this if the chart is not 3D
                    if (!this.chart.is3d()) {
                        return
                    }
                    var series = this,
                        chart = series.chart,
                        options = chart.options,
                        seriesOptions = series.options,
                        depth = seriesOptions.depth || 0,
                        options3d = options.chart.options3d,
                        alpha = options3d.alpha,
                        beta = options3d.beta,
                        z = seriesOptions.stacking
                            ? (seriesOptions.stack || 0) * depth
                            : series._i * depth
                    z += depth / 2
                    if (seriesOptions.grouping !== false) {
                        z = 0
                    }
                    each(series.data, function(point) {
                        var shapeArgs = point.shapeArgs,
                            angle
                        point.shapeType = 'arc3d'
                        var ran = point.options.h
                        shapeArgs.z = z
                        shapeArgs.depth = depth * 0.75 + ran
                        shapeArgs.alpha = alpha
                        shapeArgs.beta = beta
                        shapeArgs.center = series.center
                        shapeArgs.ran = ran
                        angle = (shapeArgs.end + shapeArgs.start) / 2
                        point.slicedTranslation = {
                            translateX: round(
                                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
                            ),
                            translateY: round(
                                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
                            )
                        }
                    })
                }
            )
            ;(function(H) {
                H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(
                    proceed
                ) {
                    // Run original proceed method
                    var ret = proceed.apply(this, [].slice.call(arguments, 1))
                    ret.zTop = (ret.zOut + 0.5) / 100
                    return ret
                })
            })(Highcharts)
        }
    }
}
</script>
分割线

当将alpha: 245时，但是将3D饼/环图倒过来时会出现颜色穿透，我个人也在网上找了很久没有找到解决办法，所以就没有倒过来。

options3d: {
                        enabled: true,
                        // 延y轴向内的倾斜角度
                        alpha: 245,
                        // 外旋转角度
                        beta: 0
                    }

颜色穿透：
在这里插入图片描述
在这里插入图片描述

爱吃香菜的胡先森
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
HighCharts实现3D不同高度圆环图、3D饼图
m0_51431448的博客
04-04 1万+
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，在写法上稍作修改即可 第一步首先安装 highcharts npm install highcharts --save 第二步 main.js 引入 3d相关 import highcharts from 'hi..
highcharts 3D环形饼图
gfei1234的博客
10-31 363
在这里插入图片描述](https://img-blog.csdnimg.cn/ae5a9c5bbd894105a1246b56ee9f。1.下载安装highcharts。3.在main.js引入。4.html部分代码。
vue highcharts 3d环形图 不同高度的环形图
localhost
05-10 154
vue highcharts 3d环形图 不同高度的环形图
highcharts 3d图表在vue中的使用
最新发布
qq_41148615的博客
07-09 408
highcharts在vue中的应用。
highcharts生成不同高度的3D饼图
lannieZ的博客
10-17 1398
highcharts生成不同高度的3D饼图
Highcharts 不同高度的3D环形图
似水流年
04-09 5086
要实现的效果： 完整代码如下： // 修改3d饼图绘制过程 var each = Highcharts.each, round = Math.round, cos = Math.cos, sin = Math.sin, deg2rad = Math.deg2rad; Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) { proceed.app...
vue+Highcharts绘制3D饼图
m0_71349739的博客
08-08 1118
vue+highcharts实现3D饼图
vue+highcharts 画出3D饼图
sunxiaobai1的博客
02-11 1129
vue+highcharts 画出3D饼图 这是最终效果 <template> <div class="big-box"> <div class="com-container" ref="container" style="width:380px;height:300px;"> </div> <div class="tulibox"> <div v-for="(item,index) in peiData" :key="
3d饼图 vue_在Vue中highCharts绘制3d饼图实例分享
weixin_39922361的博客
12-19 131
本文主要和大家介绍在Vue中highCharts绘制3d饼图实例，highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖，所以弃用。希望本文能帮助到大家。接下来，给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法。首先使用 npm在你的项目中安装vue-highchartsnpm in...
在Vue中使用highCharts绘制3d饼图的方法
08-28
"使用HighCharts绘制3D饼图在Vue中的实现方法" 在Vue中使用HighCharts绘制3D饼图是一种常见的数据可视化方式。HighCharts是一款基于JavaScript的图表库，具有强大的数据可视化功能。下面是使用HighCharts绘制3D饼图...
vue3-highcharts:Highcharts.js的Vue 3组件包装器
05-10
Vue 3-Highcharts JS 一个简单，快速的Vue 3组件，用于呈现使用composition API编写的Highcharts.js图表​​。 演示 最低要求 Vue@3.0.0 Highcharts@8.0.0（较旧的版本可能有效，但未经测试） Vue和Highcharts未...
Vue 中使用vue2-highcharts实现曲线数据展示的方法
08-27
"Vue 中使用vue2-highcharts实现曲线数据展示的方法" 在本文中，我们将介绍如何使用Vue框架和vue2-highcharts库来实现曲线数据展示的方法。通过本文，读者可以学习如何使用vue2-highcharts来创建一个简单的曲线图表...
3d饼图 vue_在Vue中使用highCharts绘制3d饼图
weixin_39598501的博客
12-19 270
highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖，所以弃用。接下来，给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法。首先使用 npm在你的项目中安装vue-highchartsnpm install vue-highcharts --save由于vue-highcharts依...
vue HighCharts 饼图 3D效果
qq_41672186的博客
09-16 237
main.js 引入依赖。
第一篇：VUE 使用 HighCharts 画 3D环 饼图_vue 3d饼图
2401_85124892的博客
05-28 303
4.书写 3D饼/环 需要的相关数据和相关配置。
[heightcharts]vue2项目中实现3d饼图
2301_77838211的博客
04-15 840
延续上一篇折柱图,echarts-gl在vue2项目中不能适配得问题,这次引入新的图表库,来实现3d效果一.
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 8万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
ehcarts示例
Go_South_的博客
03-02 206
【代码】ehcarts示例。
用echarts在vue2中实现3d饼图
蜗牛~~
10-20 8765
1、修改3d饼图大小，在大概244行的位置，grid3D的对象里面，修改distance属性，即可调整。在3d饼图中设置下面这两属性是没用的，所以这里请注意一下，记得去grid3D里面修改他的位置。4、修改饼图位置，这个常用，也是在grid3D这个属性里面设置，在大概240行的位置。3、修改3d饼图颜色，直接在data中的optionData里面修改就行了。2、修改3d饼图视角高度，在大概161行的位置，修改函数的第二个参数。二、在main.js中引入。直接复制粘贴吧，省事。
vue2+highcharts
09-02
Vue2 和 Highcharts 是两个不同的技术，可以结合使用来实现数据可视化功能。 Vue2 是一种流行的 JavaScript 框架，用于构建用户界面。它提供了一些方便的工具和组件，使开发者能够更轻松地构建交互式和响应式的应用程序。 Highcharts 是一个用于创建交互式图表的 JavaScript 库。它支持多种类型的图表，包括线性图、饼图、柱状图等，并且提供了丰富的配置选项和 API，使开发者能够自定义和控制图表的外观和行为。 要在 Vue2 中使用 Highcharts，你可以按照以下步骤进行操作： 1. 安装 Highcharts：可以使用 npm 或者 yarn 安装 Highcharts 库。 ``` npm install highcharts --save ``` 2. 在 Vue2 项目中引入 Highcharts 库： 在需要使用 Highcharts 的组件中，可以通过 `import` 或者 `require` 语句引入 Highcharts 库。 ``` import Highcharts from 'highcharts' ``` 3. 创建 Highcharts 图表： 在 Vue2 组件中，可以使用 `mounted` 或者其他适合的生命周期钩子函数，在组件渲染完成后创建 Highcharts 图表。 ``` mounted() { Highcharts.chart('chart-container', { // 配置选项和数据 }) } ``` 4. 在模板中定义图表容器： 在组件的模板中，使用一个空的元素作为图表的容器，指定一个唯一的 ID，供 Highcharts 创建图表时使用。 ``` <template> <div id="chart-container"></div> </template> ``` 以上是一个简单的使用示例，你可以根据具体需求和 Highcharts 的文档进行更高级的配置和使用。希望能帮到你！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃香菜的胡先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值