关于vue项目中使用highcharts时,无法显示菜单按钮的问题

vue项目中highcharts使用时,无法显示菜单按钮

最近在写vue项目时,因为项目需求使用了highcharts,发现了一个问题,不知道是不是只有我出现了,highcharts图表右上角应该默认有一个菜单按钮,但我的没有,无论怎么配置都没有,下面是我一开始的demo代码:

<template>
    <div class="chart-wrap">
        <div :id="id"></div>
    </div>
</template>

<script>
import Highcharts from 'highcharts'
    export default {
        props: {
            id: {
                type: String,
                default:'test'
            },
            option:{
                type:Object
            }
        },
        mounted(){
            Highcharts.chart(this.id, {
                

    exporting:{
                filename:"订单统计", //下载显示的文件名称
                sourceWidth: 1000,     //下载图片的宽度
                sourceHeight: 550,  //下载图片的高度
 //指定下载图片的url,这里使用的本地的java代码,没有使用官网的代码(那//样会受到highchart官网的网络限制,这里的java代码是结合的struts1来//实现的,在java代码解决了导出图片中中文乱码的问题以及下载文件名乱码//的问题,详见java代码中说明)               url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//这里是一个重点哦,也可以修改exporting.js中对应的url 
            },
    title: {
        text: 'Exporting is loaded but <em>enabled</em> is false'
    },
    credits: {
        enabled: true
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        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]
    }]

});
        }
    }
</script>

<style scoped lang="scss">
.chart-wrap{
    border: 1px solid gainsboro;
    border-radius: 10px;
    width: 100%;
    height: 550px;
    padding-top: 20px;
}
</style>

这只是个简单的demo,但无论我怎么配置,就是不出来菜单按钮,好气啊。
最后鼓捣了一个多小时,ok,莫名其妙的搞定,看代码~

import Highcharts from 'highcharts'
require('highcharts/modules/exporting')(Highcharts);

额,就是在import下面加个这,具体原因解释不清,但效果终于出来了,呼~~

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值