Vue+Highcharts完全使用
Posted wangpeili
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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)
}
以上是关于Vue+Highcharts完全使用的主要内容，如果未能解决你的问题，请参考以下文章