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: "韋恩圖",
        },
      },