highcharts 極地圖的應用

highcharts極地圖類似echarts裏面的極座標圖，用法也相似

官網例子

var chart = Highcharts.chart('container', {
	chart: {
		polar: true
	},
	title: {
		text: '極地圖'
	},
	pane: {
		startAngle: 0,
		endAngle: 360
	},
	xAxis: {
		tickInterval: 45,
		min: 0,
		max: 360,
		labels: {
			formatter: function () {
				return this.value + '°';
			}
		}
	},
	yAxis: {
		min: 0
	},
	plotOptions: {
		series: {
			pointStart: 0,
			pointInterval: 45
		},
		column: {
			pointPadding: 0,
			groupPadding: 0
		}
	},
	series: [{
		type: 'column',
		name: '柱形',
		data: [8, 7, 6, 5, 4, 3, 2, 1],
		pointPlacement: 'between'
	}, {
		type: 'line',
		name: '線',
		data: [1, 2, 3, 4, 5, 6, 7, 8]
	}, {
		type: 'area',
		name: '面積',
		data: [1, 8, 2, 7, 3, 6, 4, 5]
	}]
});

注意：實現極地圖要引入 highcharts-more.js

在vue項目中實現極地圖的方法

一、在main.js中引入 highcharts/highcharts-more

import Highchart from "highcharts/highcharts"
import HighchartsVue from "highcharts-vue"
import stockInit from "highcharts/modules/stock"
import seriesLabel from "highcharts/modules/series-label"
import HighchartsMore from "highcharts/highcharts-more"
import highchartsBoost from "highcharts/modules/boost"
import '@/assets/js/highchartsTheme/shine.js'
Highchart.setOptions({
    global: {
        useUTC: false
    }
});

highchartsBoost(Highchart)
stockInit(Highchart)
seriesLabel(Highchart)
HighchartsMore(Highchart);

二、在.vue頁面中 

<highcharts :options="chartOptions1" ref="polarChart"  style="height:600px;margin-bottom:10px;"></highcharts>

引入 highcharts   import HighCharts from "highcharts";

      chartOptions1: {
        chart: {
          polar: true,
        },
        title: {
          // text: null
          text: "極座標圖標題",
          // style: {
          //   fontSize: "14px"
          // }
        },
        subtitle: {
          text: "副標題",
        },
        xAxis: {
          tickInterval: 3600000,
          min: 1600732800000, // starttime
          max: 1600819200000, // endtime
          labels: {
            formatter: function () {
              return HighCharts.dateFormat("%H" + "時", this.value);
            },
          },

          //gridLineWidth:1
        },

        yAxis: {
          //設置Y軸
          min: 0, // 定義最小值
          tickInterval: 50,
          max: 300,
          labels: {
            formatter: function () {
              return this.value;
            },
          },
          // plotLines 表示爲定義曲線報表中的 （刻度線）或者叫做（定義的區間範圍）
          // 一下爲2條表示線
          plotLines: [
            {
              value: 50,
              color: "red",
              dashStyle: "shortdash",
              width: 2,
            },
            {
              value: 280,
              color: "red",
              dashStyle: "shortdash",
              width: 2,
            },
          ],
        },
        plotOptions: {
          series: {
            marker: {
              enabled: false,
            },
          },
        },
        tooltip: {
          //當鼠標懸置數據點時的提示框
          formatter: function () {
            //格式化提示信息
            return (
              "時間：" +
              HighCharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
              "數值：" +
              HighCharts.numberFormat(this.y, 2)
            );
          },
        },
        series: [
          {
            type: "line",
            name: "壓力",
            data: lineData,
          },
          {
            type: "area",
            name: "上限",
            color: "red",
          },
          {
            type: "area",
            name: "下限",
            color: "red",
          },
        ],
      },

 lineData的數據格式

let   lineData   =  [

  {  x:   1600733352000 ,  y:   249.2  },

  {  x:   1600732842000 ,  y:   248.8  },

  {  x:   1600733922000 ,  y:   251.2  },

  {  x:   1600733382000 ,  y:   249.3  },

  {  x:   1600734522000 ,  y:   251.4  },

  {  x:   1600734042000 ,  y:   251  },

]