highcharts使用韦恩图报错解决Error in mounted hook: “Error: Highcharts error #17:missingModuleFor: venn（详细步骤）

我由于在vue项目中刚好要使用韦恩图想用highcharts然后按照步骤

1、npm install highcharts --save 

2、创建组件

<template>
    <div class="x-bar">
        <div :id="id"
             :option="option"></div>
    </div>
</template>

<script>
    // 引入highCharts模块
    import HighCharts from 'highcharts'
    export default {
        name: "vennCharts",
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            HighCharts.chart(this.id, this.option)
        }
    }
</script>

3、然后在需要的页面，引入组件

<template>
    <div id="app">
        <x-chart :id="id" :option="option"/>
    </div>
</template>

<script>
    import XChart from './../components/vennCharts'

    export default {
        name: 'HelloWorld',
        data() {
            return {
                id: 'test',
                option: {
                    series: [{
                        type: 'venn',
                        name: 'The Unattainable Triangle',
                        data: [{
                            sets: ['Good'],
                            value: 2
                        }, {
                            sets: ['Fast'],
                            value: 2
                        }, {
                            sets: ['Cheap'],
                            value: 2
                        }, {
                            sets: ['Good', 'Fast'],
                            value: 1,
                            name: 'More expensive'
                        }, {
                            sets: ['Good', 'Cheap'],
                            value: 1,
                            name: 'Will take time to deliver'
                        }, {
                            sets: ['Fast', 'Cheap'],
                            value: 1,
                            name: 'Not the best quality'
                        }, {
                            sets: ['Fast', 'Cheap', 'Good'],
                            value: 1,
                            name: 'They\'re dreaming'
                        }]
                    }],
                    title: {
                        text: 'The Unattainable Triangle'
                    }
                }
            }
        },
        components: {
            XChart
        }
    }
</script>
<style scoped>
</style>

4、启动项目后你会发现报错了

 

5、网上找了半天都没有说这个怎么解决，然后自己琢磨，没有这个venn肯定是缺少了这个venn相关的js，但你不知道该怎么引入，然后你可以去highchartsd 文档中找发现好像也没有https://www.highcharts.com.cn/docs/highcharts-vue 这文档里面你会发现他是怎么导入其他包的，我们就可以想我们韦恩图的js是不是也可以像这样导入，只是不知道有没有这样的js

6、然后我就去找highcharts的API文档 然后找到他的series发现并没有文档案例中的venn类型，我想难道没有这玩意吗？

7、于是我找到最新文档 然后继续找series属性你会发现里面有这个类型。

8、你找到韦恩图的实例选择编辑源代码，然后你会发现他有一个js是venn.js,那么我是不是就可以当如这个venn.js就可以使用了

9、最后在组件中引入 venn.js后就可以使用了

import venn from 'highcharts/modules/venn'
venn(HighCharts);

补充：如果想要修改韦恩图的背景颜色，则可以在App.vue中添加

rect[fill='#ffffff']{
  fill: none;
}