Vue 中使用 Highcharts 饼状图

最新推荐文章于 2025-06-03 09:05:29 发布

_夜渐凉

最新推荐文章于 2025-06-03 09:05:29 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： ------【Highcharts】文章标签： Highcharts

本文链接：https://blog.youkuaiyun.com/weixin_41888813/article/details/88013445

本文介绍如何在Vue项目中使用Highcharts创建饼状图。文章指出，尽管Highcharts与Echarts类似，但Echarts免费且有望进一步发展。在商业使用中，Highcharts需要授权，而个人使用时会显示logo。教程详细讲解了从导入Highcharts到创建chart组件、模拟数据以及引用组件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Highcharts 和 Echarts 就像是 Office 和 WPS 的关系。

不过这也是暂时的，相信Echarts会做得更好，谁说国产的东西比不过外国。

重点是：Echarts免费，Highcharts用于商业用途时还需要授权，个人用时虽然免费，但会在图表上显示logo，有洁癖的话就只能绕道了。

一，highchars的导入与搭建

npm install highcharts

二，components下的commons公共目录下新建一个chart.vue文件，用于搭建chart组件的架子

<template>
    <div class="x-bar">
        <div :id="id" :option="option"></div>
    </div>
</template>
<script>
    import HighCharts from 'highcharts'
    export default {
        // 验证类型
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },