vue使用hightcharts韦恩图

一、首先安装两个依赖

npm install highcharts-vue
npm install highcharts --save

二、在main.js中引入

import HighchartsVue from "highcharts-vue";
Vue.use(HighchartsVue);

三、在组件里面调用

<template>
  <div class="hello">
    <div id="container"></div>
  </div>
</template>

四、要引入一些模块

import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import Venn from "highcharts/modules/venn";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Venn(Highcharts);

注意：
在这说明一下，因为hightcharts本身不具备韦恩图的veen模式，使用韦恩图的情况下必须要引入这两个模块，如下所示：

import Venn from "highcharts/modules/venn";
Venn(Highcharts);

如果不引入上面两个的话，使用韦恩图回报一个错误，就是以下错误：

五、获取书数据渲染韦恩图

  mounted() {
    this.moreChart();
  },
  methods: {
    moreChart() {
      Highcharts.chart("container", {
        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: "数据交集",
        },
      });
    },
  },

六、最终渲染结果