如何在vue中使用highcharts

如何在vue中使用highcharts

1、首先npm install -S vue-highcharts
下载过后可能会有报错此时需要吧npm 安装依赖删除掉，重新按照npm install
2、在main.js中写入全局使用

import highcharts from 'highcharts'
import VueHighcharts from 'vue-highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)
Vue.use(VueHighcharts)

3，新建charts.vue文件，写入代码

<template>
  <div class="x-bar">
    <div :id="id" :option="option" :obj="chartObj"></div>
  </div>
</template>
<script>
//import exportCSV from '@/export-csv.js';
import HighCharts from "highcharts";
export default {
  // 验证类型
  data() {
    return {
      chartObj: {}
    };
  },
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  watch: {
    option() {
      HighCharts.chart(this.id, this.option);
    }
  },
  mounted() {
    HighCharts.chart(this.id, this.option);
    // this.chartObj = HighCharts.chart(this.id, this.option);
  }
};
</script>

4、在需要的页面引入

import XChart from "./charts.vue";

5、接下来就可以使用highcharts啦

     <div class="homec-z">
        <highcharts :options="zhexiants" style="height:368px;background: rgba(255, 255, 255, 0.05);"></highcharts>
      </div>

6、在data()中写入

zhexiants: {
        chart: {
          // type: "area",
          type: "areaspline",
          backgroundColor: "rgba(255, 255, 255, 0)"
        },
        // colors: ["#0EECF8"],
        title: {
          text: "收入增长趋势",
          align: "left",
          style: {
            color: "#fff",
            fontFamily: "Microsoft YaHei",
            fontSize: "18px",
            fontWeight: "400"
          }
        },

        xAxis: {
          allowDecimals: false
        },
        yAxis: {
          title: {
            text: ""
          },
          labels: {
            formatter: function() {
              return this.value / 1000 + "k";
            }
          }
        },
        tooltip: {
          pointFormat: "{series.name} 制造 <b>{point.y:,.0f}</b>枚弹头"
        },

        plotOptions: {
          area: {
            pointStart: 1940,
            fillOpacity: 0.05,
            marker: {
              enabled: false,
              symbol: "circle",
              radius: 2,
              states: {
                hover: {
                  enabled: true
                }
              }
            }
          }
        },
        credits: {
          enabled: false // 禁用版权信息
        },
        series: [
          {
            name: "",
            lineColor: "#12DAFB",
         //颜色改为渐变色
            color: {
              fillOpacity: 0.05,
              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
              stops: [
                [0, "rgba(14,236,248,0.99)"],
                [1, "rgba(255,255,255,0.05)"]
              ]
            },
            showInLegend: false,
            data: [
              13464,
              15708,
              24099,
              16357,
              22237,
              14401,
              18344,
              23586,
              22380
            ]
          }
        ]
      },