Vue+Highcharts完全使用

创建Comp组件

<template>
  <div class="x-bar">
    <div :id="id" :option="option"></div>
  </div>
</template>

<script>
  import HighCharts from 'highcharts'
  import highchartsMore from 'highcharts/highcharts-more';
  highchartsMore(HighCharts);
  export default {
    name: "Comp",
    props: {
      id: {
        type: String
      },
      option: {
        type: Object
      }
    },
    mounted() {
      HighCharts.chart(this.id, this.option)
    }
  }
</script>

 

创建使用组件

<template>
    <div class="charts">
      <x-chart :id="id" :option="option"></x-chart>
    </div>
</template>
<script>
  import XChart from './comp.vue'
  import HighCharts from 'highcharts'
  export default {
    name: "WdataCharts",
    data() {
      return {
id: 'datacharts',
option: {
  chart: {
    polar: true,
    type: 'line'
  },
  credits: {
    enabled: true,
    text: '',
    href: ''
  },
  exporting: {
    enabled: true,
    buttons: {
      exportButton: {
        enabled: true
      }
    }
  },
  title: {
    text: 'w'
  },
  subtitle: {
    text: '数据来源: w'
  }
  ,
  xAxis: {
    categories: ['1', '2', '3', '4',
      '5', '6'],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },

  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    labels: {
      formatter: function () {
        return this.value + "%";
      }
    }

  },
  tooltip: {

    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>'
  },
  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 100,
    layout: 'vertical'
  },
  plotOptions: {},
  series: [{
    name: '2017',
    data: [0, 0, 0, 0, 0, 0],
    pointPlacement: 'on'
  }, {
    name: '2016',
    data: [0, 0, 0, 0, 0, 0],
    pointPlacement: 'on'
  }]
}，mounted() {

HighCharts.chart(this.id, this.option)

}

 

 

转载于:https://www.cnblogs.com/wangpeili/p/10424951.html