highcharts 极地图的应用

highcharts极地图类似echarts里面的极坐标图，用法也相似

官网例子

代码语言：javascript复制

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

代码语言：javascript复制

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页面中

代码语言：javascript复制

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

引入 highcharts import HighCharts from "highcharts";

代码语言：javascript复制

      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 },

]

javascript highcharts 编程算法 vue.js

0 人点赞