专栏首页前端之攻略highcharts 极地图的应用

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

]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 引入highcharts主题

    tianyawhl
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • RxJS 在 Angular响应式表单中的使用

    FormControl 的 valueChanges 属性和 statusChanges 属性包含了会发出变更事件的可观察对象。 例子

    mafeifan
  • Swift2.1-继承继承

    一个类可以从另一个类继承方法,属性和其他的特性。当一个类从另一个类继承的时候,继承类被称为子类,这个类继承的类被称为父类。在Swift中,继承是基本的,从Swi...

    hrscy
  • java 读写二进制数据与java序列化

    zip文档以压缩格式存储一个和多个文件,每个ZIP文件都有一个头,包含每个文件的名字和压缩方法等信息

    用户2436820
  • Python __init__.py 作用详解

    __init__.py 文件的作用是将文件夹变为一个Python模块,Python 中的每个模块的包中,都有__init__.py 文件。

    风之随想
  • 【技术篇】如何搞定react组件化

    在主流前端框架里,因为React的入门难度高而果断投入Vue怀抱的人绝不在少数。但我要告诉大家,如果你有一定的js基础,其实React没你想象中那么困难

    前端迷
  • python基础教程:包,对,没错,绝对不是双肩包!

    包,Package,是一种Python模块的集合,从文件组织形式上看,包就是一个文件夹,里面放着各种模块(.py文件),也可以有子文件夹(子包)。包名构建了一个...

    一墨编程学习
  • React 开发必须知道的 34 个技巧【近1W字】

    React 是前端三大框架之一,在面试和开发中也是一项技能; 本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的...

    火狼1

扫码关注云+社区

领取腾讯云代金券