# hichart x Vue

Vue 2.x 版本
先npm兩種highchart版本

npm i highcharts
npm i highcharts-vue

到main.js 新增一行新的

import HighchartsVue from 'highcharts-vue';

以及

Vue.use(HighchartsVue);

到views的page的<script>tag內

import Highcharts from "highcharts";

使用時在HTML的地方

  <highcharts :options="chartOptions"></highcharts>

data return內新增

  chartOptions: {
        chart: { type: "column" },
        title: { text: "重量表" },
        xAxis: {
          categories: [一月,二月,三月],
        },
        yAxis: {
          min: 0,
          title: {
            text: "重量(kg)",
          },
          labels: {
            format: "{value:.3f}",
          },
        },
        tooltip: {
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} kg</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "A",
            data: [10,20,50],
          },
          {
            name: "B",
            data: [10,20,50],
          },
          {
            name: "C",
            data: [10,20,50],
          },
        ],
        
      },

乾淨的JSON格式吃

  chartOptions: {
        chart: { type: "" },
        title: {  },
        xAxis: {
          categories: [],
        },
        yAxis: {
          min: 0,
          labels: { },
        },
        tooltip: { },
        plotOptions: { },
        series: [
          {
            name: "",
            data: [],
          }
        
        ],
        
      },

官方API文件
https://api.highcharts.com/highcharts/

可以透過關鍵字 chart, xAxis, yAxis等查詢需要的參數

### 用computed寫一個highchart吃的json

#### 記得data內要新增一個chartOptions

computedArray(){

    let optionArray= Object.assign({}, this.chartOptions);

    optionArray.chart.type = "column"
    optionArray.series[index].data = [10,20,20,40];
    .
    .
    .


    return optionArray
}

之後

<highchart :options="computedArray">

done

## main.js最後整段長相

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "normalize.css";
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import exportData from "highcharts/modules/export-data";
exportingInit(Highcharts);
exportData(Highcharts);

Vue.use(HighchartsVue);
Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

### ↑用這樣的話就可以全局注入，不用每一頁import

import exportingInit from "highcharts/modules/exporting";
import exportData from "highcharts/modules/export-data";

exportData(Highcharts);
是為了解決無法匯出CSV / XLS檔案，加入這兩行執行可以解決這問題

KEY&相對的API網址

  chartOptions: {
        chart: { type: "column" },
~~https://api.highcharts.com/highcharts/chart.type~~
column,line,pie,bar
        title: { text: "重量表" },
        xAxis: {
          categories: [一月,二月,三月],
橫軸，
        },
        yAxis: {
          min: 0,
          title: {
            text: "重量(kg)",
          },
          labels: {
            format: "{value:.3f}",
          },
        },
        tooltip: {
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} kg</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "A",
            data: [10,20,50],
          },
          {
            name: "B",
            data: [10,20,50],
          },
          {
            name: "C",
            data: [10,20,50],
          },
        ],
        
      },