echarts统计图doc网址:http://echarts.baidu.com/echarts2/index.html
使用echarts,需要引用在js中,如果你已经下载echarts的js包,可以直接引用js,这里我是引用网络的js包。
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
网页打开进行加载事件,一个是echarts统计图的路径配置加载,另外一个是区域事件加载。
//打开网页加载 $(function () { // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); areaQuery(); })
我们加载的 areaQuery();这个方法,这里代码没怎么优化,本人非前端,能力有限。欢迎大家提供优化方式。这里主要是区域查询的判断,以及异步获取数据库数据
//区域查询事件 function areaQuery() { var arrays = new Array(); //村级数据 var nameArrays = new Array(); var county = $("#ddlCountyArea option:selected").attr("value");//县 var town = $("#ddlTownArea option:selected").attr("value");//镇 var village = $("#ddlSubArea option:selected").attr("value");//村 var AreaId = 0; var level = 0; if (village != "") { level = 3; AreaId = village; name = "村级区域"; } else { if (town != "") { AreaId = town; level = 2; name = "镇级区域"; } else { if (county != "") { AreaId = county; level = 1; name = "县级区域"; } } } //异步获取统计图数据 $.ajax({ type: "post", url: "@Url.Action("GetCommunityList")", datatype: "json", data: { areaId: AreaId, level: level }, beforesend: function (xmlhttprequest) { $("#pint").text("数据正在加载中,请稍后........."); }, success: function (json) { nameArrays.splice(0, nameArrays.length); //先清空数据,然后在插入 arrays.splice(0, arrays.length); //先清空数据,然后在插入 for (var item in json) { nameArrays.push(item); arrays.push(parseInt(json[item])); setOptionBar(name,nameArrays,arrays); } }, error: function () { alert("数据加载异常,请联系管理员"); } }); }
柱状图我根据自己的需要修改了下,因为是查询每次显示一种类型数据即可
//统计图设置 function setOptionBar(name, nameArrays, arrays) { // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); option = { tooltip: { show: true, trigger: 'item' }, legend: { data: ['村级区域', '镇级区域', '县级区域'] }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [ { type: 'category', data: nameArrays, axisLabel: { interval: 0 //用来设置x轴信息是否完全显示,0表示完全显示 } } ], yAxis: [ { type: 'value' } ], series: [ { name: name, type: 'bar', barWidth: 40, // 系列级个性化,柱形宽度 itemStyle: { normal: { // 系列级个性化,横向渐变填充 borderRadius: 5, color: (function () { var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 0, 1000, 0, [[0, 'rgba(30,144,255,0.8)'], [1, 'rgba(138,43,226,0.8)']] ) })(), label: { show: true, textStyle: { fontSize: '20', fontFamily: '微软雅黑', fontWeight: 'bold' } } } }, data: arrays, markLine: {//显示线性数据,最大值,最小值,平均值 data: [ { type: 'average', name: '平均值' }, { type: 'max' }, { type: 'min' } ] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); }
效果图如下
echarts调用起来比较容易,在加上统计图不复杂,做起来也不怎么难,只是第一次接触,要根据自己的要求修改还有许多不太懂。描述的不是怎么好,希望给位不要见怪