UI/VbdsmUI_V2.1.1/src/pc/powerservice/assess/pline/js/chart.util.js

$(function () {
	var energyPieChart //饼图对象
	var pieCharts
	var energyLineChart //线图对象
	var lineCharts

	Highcharts.setOptions({
		lang: {
			printChart: "打印图表",
			downloadPNG: "导出PNG格式图片",
			downloadJPEG: "导出 JPEG格式图片",
			downloadPDF: "导出 PDF文档",
			downloadSVG: "导出 SVG矢量图片",
			contextButtonTitle: "打印和导出",
		},
		global: { useUTC: false },
	})

	pieCharts = {
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			renderTo: "pieContainer",
		},
		title: {
			text: "产品耗电占比",
		},
		tooltip: { pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>" },
		plotOptions: { pie: { allowPointSelect: true, cursor: "pointer", dataLabels: { enabled: false }, showInLegend: true } },
		series: [],
	}

	lineCharts = {
		chart: {
			type: "spline",
			renderTo: "lineContainer",
		},
		title: {
			text: "产品耗电明细",
		},
		xAxis: {
			type: "datetime",
			tickInterval: 3600 * 1000 * 24 * 3,
			gridLineWidth: 1, //默认是0，即在图上没有纵轴间隔线
			//自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
			dateTimeLabelFormats: {
				day: "%d",
			},
		},
		yAxis: {
			min: 0,
			title: {
				text: "电量(kW.h)",
			},
		},
		tooltip: {
			crosshairs: true,
			crosshairs: [
				{
					// 设置准星线样式
					width: 1,
					color: "green",
				},
				{
					width: 1,
					color: "#006cee",
					dashStyle: "longdashdot",
					zIndex: 100,
				},
			],
			shared: true, // 是否共享提示，也就是X一样的所有点都显示出来
			useHTML: true, // 是否使用HTML编辑提示信息
			headerFormat: "<small>{point.key}</small><table>",
			pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right"><b>{point.y}</b></td></tr>',
			footerFormat: "</table>",
			valueDecimals: 2, // 数据值保留小数位数
			xDateFormat: "%Y-%m-%d",
		},
		plotOptions: {
			series: {
				connectNulls: true,
			},
		},
		series: [],
	}

	var monthLineCharts = {
		chart: {
			type: "spline",
			renderTo: "lineContainer",
		},
		title: {
			text: "产品耗电明细",
		},
		xAxis: {
			categories: [],
		},
		yAxis: {
			min: 0,
			title: {
				text: "电量(kW.h)",
			},
		},
		tooltip: {
			crosshairs: true,
			crosshairs: [
				{
					// 设置准星线样式
					width: 1,
					color: "green",
				},
				{
					width: 1,
					color: "#006cee",
					dashStyle: "longdashdot",
					zIndex: 100,
				},
			],
			shared: true, // 是否共享提示，也就是X一样的所有点都显示出来
			useHTML: true, // 是否使用HTML编辑提示信息
			headerFormat: "<small>{point.key}月</small><table>",
			pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right"><b>{point.y}</b></td></tr>',
			footerFormat: "</table>",
			valueDecimals: 2, // 数据值保留小数位数
			xDateFormat: "%Y-%m-%d",
		},
		plotOptions: {
			series: {
				connectNulls: true,
			},
		},
		series: [],
	}

	fillPieChart = function (data) {
		var series = []
		series.push(data)
		pieCharts.series = series
		energyPieChart = new Highcharts.Chart(pieCharts)
	}

	fillLineChart = function (data) {
		var series = []
		$.each(data.series, function () {
			var tpe = null
			for (var i = 0; i < this.data.length; i++) {
				tpe = this.data[i][1]
				if (tpe != null) {
					break
				}
			}
			if (tpe == null) {
				var map = {}
				map["name"] = this.name
				map["data"] = []
				series.push(map)
			} else {
				series.push(this)
			}
		})
		lineCharts.series = series
		energyLineChart = new Highcharts.Chart(lineCharts)
	}

	fillMonthLineChart = function (data) {
		monthLineCharts.xAxis.categories = data.categories
		monthLineCharts.series = data.series
		console.log(data.series)
		energyLineChart = new Highcharts.Chart(monthLineCharts)
	}
})