美文网首页
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