示例圖
?
1.安裝Highcharts?
npm install highcharts --save
npm install highcharts-vue
2.demo代碼
<template><view class="charts-main"><view id="charts" style="width: 90%;height: 460rpx;"></view></view></template><script>import Highcharts from '@/node_modules/highcharts'import HighchartsMore from 'highcharts/highcharts-more'import Highcharts3D from 'highcharts/highcharts-3d'import highchartsolidgauge from 'highcharts/modules/solid-gauge'import hightchartVariablepie from 'highcharts/modules/variable-pie'HighchartsMore(Highcharts)highchartsolidgauge(Highcharts)Highcharts3D(Highcharts) // 3d模塊hightchartVariablepie(Highcharts) // 扇形餅圖Highcharts.setOptions({lang: {noData: '暫無數據'}});export default {components: {Highcharts,HighchartsMore,Highcharts3D,highchartsolidgauge,hightchartVariablepie},data() {return {chart: null}},// onLoad() {// this.spiderCharts()// },mounted() {this.spiderCharts()},methods: {// 初始化蜘蛛圖表spiderCharts() {// 初始化圖表let chart = Highcharts.chart('charts', {chart: {type: 'spline'},title: {text: ' '},subtitle: {text: ' '},//解決accessibility.js報錯accessibility:{enabled:false},xAxis: {categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: {title: {text: ''},labels: {formatter: function() {return (this.value)+"%";}},min: 0,max: 100,minorGridLineWidth: 0,gridLineWidth: 0,alternateGridColor: null,/*** 間隔0.1*/plotBands: [{ // Moderate breezefrom: 1,to: 20,color: 'rgba(68, 170, 213, 0.1)',label: {style: {color: '#606060'}}}, { // Fresh breezefrom: 21,to: 40,color: 'rgba(68, 170, 213, 0.1)',label: {style: {color: '#606060'}}}, { // Strong breezefrom: 41,to: 60,color: 'rgba(68, 170, 213, 0.1)',label: {style: {color: '#606060'}}}, { // High windfrom: 61,to: 80,color: 'rgba(68, 170, 213, 0.1)',label: {style: {color: '#606060'}}}, { // High windfrom: 81,to: 100,color: 'rgba(68, 170, 213, 0.1)',label: {style: {color: '#606060'}}}]},tooltip: {valueSuffix: ' m/s'},plotOptions: {// series: {// shadow: {// color: 'red',// width: 5,// offsetX: 5,// offsetY: 5,// opacity: 0.1// }// },spline: {lineWidth: 4,states: {hover: {lineWidth: 5}},marker: {enabled: false}// pointInterval: 3600000, // one hour// pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)}},series: [{//陰影設置shadow: {color: '#5dacd0',width: 6,offsetX: 0,offsetY: 4,opacity: 0.3},name: 'Hestavollane',data: [83.6, 78.8, 98.5, 93.4, 90, 84.5, 95.0, 94.3, 91.2, 83.5, 96.6, 92.3]}, {color: "#ffaa00",//陰影設置shadow: {color: '#ffaa00',width: 6,offsetX: 0,offsetY: 4,opacity: 0.2},name: 'Voll',data: [49.9, 71.5, 96.4, 90.2, 94.0, 56.0, 45.6, 68.5, 76.4, 54.1, 95.6, 54.4]}],navigation: {menuItemStyle: {fontSize: '10px'}}});}}}
</script><style lang="scss" scoped>.highcharts-container {// width: 600px;height: 300px;}.highcharts-pie-series .highcharts-point {stroke: #EDE;stroke-width: 2px;}
</style>
)
