highcharts 點選事件用法
<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>
「其他文章」
- highcharts 點選事件用法
- vue cli3 引入外部字型
- photo-sphere-viewer的使用
- openlayer 點選標記點
- vue頁面批量註冊元件
- vue 頁面拼接的html onclick事件的使用
- js模板字串中使用迴圈遍歷資料
- vue-echarts的用法
- 倒計時
- Vue.extend註冊元件的用法
- 設定html 根元素字型
- vue元件另一種傳值
- vue 拖動
- vue滑動外掛 vue-drag-verify
- vue cli3 build 區分測試環境和生產環境
- Openlayer畫線
- Openlayer 新增標記點(2)
- 一維陣列轉二維陣列
- 微信小程式下載檔案
- nginx配置代理