美文网首页
vue3 使用 highcharts 并修改主题

vue3 使用 highcharts 并修改主题

作者: 醉青风 | 来源:发表于2024-03-19 22:08 被阅读0次

    导入 highcharts
    npm install highcharts

    一、引入
    1、全局注入(在main.js写入)
    // 全局注入Highcharts
    import HighchartsVue from 'highcharts-vue'
    app.use(HighchartsVue, { tagName: 'charts' })
    2、局部使用
    若仅用于特定组件,请使用局部注册方法。首先,您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象:
    import {Chart} from 'highcharts-vue'
    然后,您需要在 Vue 实例配置中注册它,即在 components 部分中
    {
    components: {
    charts: Chart
    }
    }

    二、主题修改
    import highcharts from 'highcharts';
    import darkUnica from 'highcharts/themes/dark-unica.js';
    darkUnica(highcharts); // 修改主题色

    三、使用
    <charts :options="chartOptions"></charts>

    相关文章

      网友评论

          本文标题:vue3 使用 highcharts 并修改主题

          本文链接:https://www.haomeiwen.com/subject/lewttjtx.html