你的位置:首页 > ASP.net教程

[ASP.net教程]asp.net MVC项目开发之统计图echarts柱状图(一)


echarts统计图doc网址:http://echarts.baidu.com/echarts2/index.html
使用echarts,需要引用在js中
  1. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

 首先设置打开加载js代码块
 $(function () {    // 路径配置    require.config({      paths: {        echarts: 'http://echarts.baidu.com/build/dist'      }    });    areaQuery();  })

View Code

我们加载的 areaQuery();这个方法,这里代码没怎么优化,其实可以通过后台传值的方式传递字段数据,本人有点懒,呵呵

 //查询操作  function areaQuery() {    var nameArrays = new Array();//获取数据中选项名称集合    var name = null;//类型名称    var arrays = new Array();//属性行对应的数据变量    var sum = 0;    var areaId = 0;    var level = 0;    var optionId = $("#ddlSocialSecurity").val();    var county = $("#ddlCountyArea option:selected").attr("value");//县    var town = $("#ddlTownArea option:selected").attr("value");//镇    var village = $("#ddlSubArea option:selected").attr("value");//村    //根据区域选项给level 和areaId赋值    if (optionId == "") {      optionId = 0;    } else {      optionId = parseInt(optionId);    }    if (village != "") {      level = 3;      areaId = village;    } else {      if (town != "") {        areaId = town;        level = 2;      } else {        if (county != "") {          areaId = county;          level = 1;        }      }    }    //异步获取统计图数据    $.ajax({      type: "post",      url: "@Url.Action("GetSocialSecurityList")",      datatype: "json",      data: { areaId: areaId, level: level, socialId: optionId },      beforesend: function ("#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]));          sum = sum + parseInt(json[item]);        }        if (optionId == 1) {          name = "职工社会保险";        }        if(optionId==2)        {          name = "城乡居民养老保险";        }        if (optionId == 3) {          name = "居民养老保险缴费补贴";        }        if (optionId == 4) {          name = "医疗保险";        }        if (optionId == 5) {          name = "医疗保险缴费补贴";        }        if (optionId == 6) {          name = "社会救助情况";        }        if (optionId == 7) {          name = "社会福利补贴情况";        }        if (optionId == 8) {          name = "托养服务";        }        if (optionId == 9) {          name = "托养服务需求";        }        setOptionBar(name, nameArrays, arrays, sum);      },      error: function () {        alert("此区域没有数据或者没有选择社会保障情况");      }    });  }

View Code

柱状图我根据自己的需要修改了下,因为是查询每次显示一种类型数据即可

 //统计图设置  function setOptionBar(name, nameData, arrays,sum) {    // 使用    require(      [        'echarts',        'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载      ],      function (ec) {        // 基于准备好的dom,初始化echarts图表        var myChart = ec.init(document.getElementById('main'));        option = {          tooltip: {            trigger: 'item',            formatter: "{a} <br/>{b} : {c} ({d}%)"          },          legend: {            orient: 'vertical',            x: 'left',            data: nameData          },          toolbox: {            show: true,            feature: {              mark: { show: true },              dataView: { show: true, readOnly: false },              magicType: {                show: true,                type: ['pie']              },              restore: { show: true },              saveAsImage: { show: true }            }          },          calculable: false,          series: [            {              //name:'访问来源',              type: 'pie',              selectedMode: 'single',              radius: [0, 70],              itemStyle: {                normal: {                  label: {                    position: 'center',                    textStyle: {                      color: '#9966CC',                      align: 'center',                      baseline: 'middle',                      fontFamily: '微软雅黑',                      fontSize: 20,                      fontWeight: 'bolder'                    }                  },                  labelLine: {                    show: false                  }                }              },              data: [                { value: sum, name: name }              ]            },            {              name: '教育情况',              type: 'pie',              radius: [100, 140],              // for funnel              x: '60%',              width: '35%',              funnelAlign: 'left',              max: 1048,              data: [                { value: arrays[0], name: nameData[0] },                { value: arrays[1], name: nameData[1] },                { value: arrays[2], name: nameData[2] },                { value: arrays[3], name: nameData[3] },                { value: arrays[4], name: nameData[4] },                { value: arrays[5], name: nameData[5] }              ]            }          ]        };        var ecConfig = require('echarts/config');        myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param) {          var selected = param.selected;          var serie;          var str = '当前选择: ';          for (var idx in selected) {            serie = option.series[idx];            for (var i = 0, l = serie.data.length; i < l; i++) {              if (selected[idx][i]) {                str += '【系列' + idx + '】' + serie.name + ' : ' +                    '【数据' + i + '】' + serie.data[i].name + ' ';              }            }          }          document.getElementById('wrong-message').innerHTML = str;        })        myChart.setOption(option);      })  }

View Code

效果图如下




 
echarts调用起来比较容易,在加上统计图不复杂,做起来也不怎么难,只是第一次接触,要根据自己的要求修改还有许多不太懂。描述的不是怎么好,希望给位不要见怪