vue中用highcharts制作韦恩图

下载两个插件

下载 npm install highcharts-vue
下载 npm install highcharts --save

因为hightcharts本身是不具备韦恩图的‘venn’模式的，所以要手动引入

main.js文件↓

// 引入hightcharts
import Highchart from "highcharts/highcharts";
import HighchartsVue from 'highcharts-vue';
Vue.use(HighchartsVue);
// 引入hightcharts中的venn模块（否则韦恩图出不来）
import venn from 'highcharts/modules/venn'
venn(Highchart);

组件里面用

 <highcharts :options="chartOptions" :callback="myCallback" 
 style="background:green;margin:20px auto"></highcharts>

data数据

chartOptions: {
        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",
              },
            ],
          },
        ],
        colors: ['#3498DB','blue'] ,
        title: {
          text: "韦恩图",
        },
      },