创建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)}
