vue3 使用 highcharts 并修改主题

导入 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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容