HighCharts踩坑日记

最新推荐文章于 2024-03-13 17:06:39 发布

原创最新推荐文章于 2024-03-13 17:06:39 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

highcharts

1 篇文章

订阅专栏

在项目中需要实现3D漏斗图，从Echarts转向HighCharts，过程中遇到了模块引用错误。在Main.js全局注册HighCharts并尝试使用官网3D漏斗图配置时，发现缺少funnel3d模块。解决方法是按照官网示例导入所需模块，但后续运行仍报错。经过仔细排查，发现是funnel3d.js的依赖问题。通过查看编辑示例，引入了3D漏斗图所需的其他资源，注意Highcharts3d模块路径与其他模块不同。最终成功实现3D漏斗图效果。

因业务需求，需要用到3d漏斗图，之前项目中一直用的echarts，没有找到3d的，于是开始踩坑HighCharts。

npm install highcharts --save
npm install highcharts-vue

Main.js中全局注册（也可采用局部注册的形式），见官方文档，传送门：

import Vue from 'vue'
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'

Vue.use(Highcharts)
Vue.use(HighchartsVue)

<div class="chart_content" id="funnelChart"></div>
<script>
 export default {
    data() {
      return {
      	options:{}
	  }
	}
...
	mounted(){
	   Highcharts.chart('funnelChart', this.options);
	},
}
</script>

此处因为我需要用到其中的3d漏斗图，于是我直接复制的官网实例中的配置options，然后直接报错，
在这里插入图片描述
原因：经百度和查找官网，提示说是缺少模块funnel3d，这里的options中用到了该模块，但是没有引用，所以报错。

解决：像官网中的方式导入需要用到的模块，并将Highcharts作为参数传递给该模块

  import Highcharts from 'highcharts'
  import funnel3d from 'highcharts/modules/funnel3d';
  funnel3d(Highcharts);

然后运行代码，出现新的错误提示：
在这里插入图片描述
这下就很懵逼了，调试了很久，都不知的是哪里的错。后来仔细阅读报错提示，发现错误源于funnel3d.js，但funnel3d.js已经引用，引用了还报错，可能就是该模块还需要依赖什么东西，而我没有引入，所以报错。再次查看示例中，发项这里有个编辑示例按钮，打开后发现了该3d漏斗图所需要的其他资源。
在这里插入图片描述

然后依葫芦画瓢将剩下的几种资源都按上述方式引入进来

  import Highcharts from 'highcharts'
  import Highcharts3d from 'highcharts/highcharts-3d';
  import funnel3d from 'highcharts/modules/funnel3d';
  import exporting from 'highcharts/modules/exporting';
  import oldie from 'highcharts/modules/oldie';
  import cylinder from 'highcharts/modules/cylinder';

  Highcharts3d(Highcharts);
  funnel3d(Highcharts);
  exporting(Highcharts);
  oldie(Highcharts);
  cylinder(Highcharts);