代码语言：javascript复制
<template>
<div>
{{pointerValue}}
<highcharts :options="chartOptions" :callback="myCallback"></highcharts>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
pointerValue: "",
chartOptions: {
title: {
text: "2010 ~ 2016 年太阳能行业就业人员发展情况",
},
subtitle: {
text: "数据来源：thesolarfoundation.com",
},
yAxis: {
title: {
text: "就业人数",
},
},
plotOptions: {
series: {
cursor: "pointer",
events: {
click: (event) => {
// console.log(event);
// console.log(event.point.category)
console.log(event.point.options.y);
this.pointerValue = event.point.options.y;
},
},
},
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
series: [
{
data: [
29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
194.1, 95.6, 54.4,
],
},
],
},
};
},
mounted() {
},
methods: {
},
};
</script>
<style>
.highcharts-container {
width: 600px;
height: 400px;
border: 1px solid #ddd;
margin: auto;
}
</style>
