前端图表工具highChart的使用

最新推荐文章于 2024-07-30 11:48:07 发布

大山上的猫

最新推荐文章于 2024-07-30 11:48:07 发布

阅读量676

点赞数

分类专栏：前端工具

本文链接：https://blog.csdn.net/Night_X/article/details/86519079

版权

前端工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>销售趋势报表</title>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="ui/highcharts.js"></script>
<script type="text/javascript" src="js/report_trend.js"></script>
</head>
<body class="easyui-layout">
<div class="easyui-panel" data-options="region:'west',title:'销售趋势',split:true" style="width:600px;">   
<form id="searchForm">
	年份：<input type="text" id="year" name="year" class="easyui-combobox" data-options="
		url: 'json/year.json', valueField: 'year', textField: 'year'
	">
	<button type="button" id="btnSearch">查询</button>
</form>
<table id="grid"></table>
</div>
<div id="trendChart" data-options="region:'center',title:'销售趋势图'" ></div>
</body>
</html>

report_trend.js

$(function() {
	//表格数据初始化
	$('#grid').datagrid({
		queryParams: {},
		columns:[[
		  		    {field:'name',title:'年份',width:100},
		  		    {field:'y',title:'销售额',width:100}
			   	]],
		singleSelect:true,
		onLoadSuccess: function(data) {
//			showChart(data.rows);
			showChart();
		}
	});
	//条件查询
	$('#btnSearch').bind('click',function(){
		var formdata= $('#searchForm').serializeJSON();
		$('#grid').datagrid('load',formdata);		
		$('#grid').datagrid({
			url: 'report_trendReport.action',
			queryParams: formdata
		});
	});
});

/**
 * 折线图
 * @param _data
 * @returns
 */
function showChart() {
	var months = new Array();
	for(var i = 1; i <= 12; i++) {
		months.push(i + "月");
	}
	$('#trendChart').highcharts({
		 title: {
	            text: $("#year").combobox('getValue')+'年统计趋势分析',
	            x: -20 //center
	        },
	        subtitle: {
	            text: 'Source: WorldClimate.com',
	            x: -20
	        },
	        xAxis: {
	            categories: months
	        },
	        yAxis: {
	            title: {
	                text: '销售额'
	            },
	            plotLines: [{
	                value: 0,
	                width: 1,
	                color: '#808080'
	            }]
	        },
	        tooltip: {
	            valueSuffix: '元'
	        },
	        legend: {
	            layout: 'vertical',
	            align: 'center',
	            verticalAlign: 'bottom',
	            borderWidth: 0
	        },
	        series: [{
	            name: '销售趋势',
	            data: $("#grid").datagrid('getRows')
	        }]
    });
}

饼图

/**
 * 饼图
 * @param _data
 * @returns
 */
function showChart(_data) {
	$('#pieChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '销售统计'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "所占比例",
            colorByPoint: true,
            data: _data
        }]
    });
}