echarts生成饼状图、柱状图、多项柱状图的参数介绍

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nb7474/article/details/79580380

1.饼图

html代码：

<div id="SexDistri" style="width: 100%;height: 50%;"></div>

下面的柱状图的html代码也与此类似。

js代码：

var SexDistribution =  ${SexDistribution};
    //console.log(SexDistribution);
    var res =[];
    var totalcount=0;
    for(var i=0;i<SexDistribution.length;i++){
        //设置饼图的时候可直接定义一个新的数组，将值分别存放到name和value中 这样可以直接使用这个新数组给饼图赋值
        var obj ={name:SexDistribution[i].sex,value:SexDistribution[i].number};
        res.push(obj);
        totalcount+=SexDistribution[i].number;  //得到饼图各个部分的总数
    }

    var myChart1 =echarts.init(document.getElementById('SexDistri'));  //加载echarts参数的另一种方式
    myChart1.setOption({
        title : {
            text: '性别分布图',
            x:'right',
            textStyle: {
                color: '#000000',
                fontSize:18
            }
        },

        //图例组件
        legend: {
            data:['男','女'], //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
            y: 'bottom',  //图例的y位置  此处为底部
            textStyle: {
                fontSize: 14,
                fontWeight: 'bolder',
                color: '#000000'          // 主标题文字颜色
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b}用户：{c0}</br>总人数："+totalcount+" </br>百分比：{d}%" //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        },
        color:['#4f81bd','#c0504d'], 
        series : [
                  {
                      type: 'pie',  //饼图

                      center: ['50%', '50%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                      data:res,
                      textStyle:{
                          fontSize:20
                      },
                      itemStyle: {  //图形样式
                          emphasis: {
                              shadowBlur: 10,  //图形阴影的模糊大小。该属性配合 shadowColor,
                                                //shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                              shadowOffsetX: 0,     //阴影水平方向上的偏移距离。
                              shadowColor: 'rgba(0, 0, 0, 0.5)'  //阴影颜色
                          }
                      }
                  }
              ]  
    });

SexDistribution 是我从后台传递过来的json数组。该数组的内容大致如下：

在处理该数据的时候，我新创建一个对象，将原先sex的值放进name 中，number放进value中，最后再push到数组，echarts会根据name和value的属性名，自动从data中取数据。

2.柱状图

js代码：

var TreatMethods =  ${TreatMethods};
    console.log(TreatMethods);

    var xdata=[];   //存放x轴 分组名的数组
    var ydata=[];   //存放y轴 数据的数组
    var jjj=TreatMethods[0];

    for(var key in jjj){
        //alert(key+':'+jjj[key]);
        xdata.push(key);    //遍历循环jjj 分别得到所有的key和所有的value存放进对应的x轴和y轴数组
        ydata.push(jjj[key]);
    }

    var chart = document.getElementById('TreatMethods');   
    var echart = echarts.init(chart);    //将生成的图标放进id为 TreatMethods的div中

    //设置参数
    var option = {

        //标题
        title : {
            text: '治疗方式统计',
            x:'center', //标题的位置 还有left right等
            textStyle: {
                color: '#000000',
                fontSize:18
            }
        },

        //tip层提示框组件
        tooltip : {  
            trigger: 'axis',  //触发类型  坐标轴触发
            axisPointer : {              
                type : 'shadow' //坐标轴指示项  即鼠标放到对应的横坐标上方时会出现的效果 有阴影 直线 十字准星多种          
            }  
        },

        //x轴配置
        xAxis : [  
            {  
                min:0,  //坐标轴刻度最小值  可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
                type : 'category', //坐标轴类型   为'category'型时必须配置data属性
                data:xdata
            }  
        ],  

        //y轴配置
        yAxis : [  
            {  
                min:0,  
                type : 'value',
                name:'(人)' //坐标轴名称  可通过nameLocation配置坐标轴名称位置
            }  
        ],  

        //参数配置
        series : [
                  {
                      name:'人数',  //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
                      type:'bar',  //柱状图
                      barWidth: 30, //宽度
                      data:ydata,
                      itemStyle: {
                          normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#03adff'},   
                                    {offset: 1, color: '#7052f5'}  //与emphasis一起实现柱状图渐变效果
                                ]
                            ),

                            label: { show: true, position: 'top', formatter: '{c}'} //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等

                            },
                            emphasis: {  //图形样式
                              color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                   [
                                    {offset: 0, color: '#7052f5'},
                                    {offset: 1, color: '#03adff'}
                                   ]
                              )
                             }
                        }
                  }
                  ]
    };  

    echart.setOption(option);

在实现这个效果的时候，麻烦的地方就是获取所有的x轴数据及其对应的y轴数据。比较简单的办法就是事先我们知道x轴有哪些列，将这些列写死到一个数组中：

var xdata=[肾移植,肾透,腹透+肾移植,药物治疗,血透,血透+肾移植,血透+腹透,血透+腹透+肾移植];

然后再通过名字取其对应的参数：

TreatMethods[0].肾透

这种方法看起来就比较low，如何在不知道后台所传递的参数的情况下，直接生成柱状图呢？后来在网上查了一些资料，发现js中通过for循环就直接可以遍历js对象中的key和value。

var jjj=TreatMethods[0];

    for(var key in jjj){
        //alert(key+':'+jjj[key]);
        xdata.push(key);    //遍历循环jjj 分别得到所有的key和所有的value存放进对应的x轴和y轴数组
        ydata.push(jjj[key]);
    }

3.多项柱状图

js代码：

var SexAgeDistribution =  ${SexAgeDistribution};
    //console.log(SexAgeDistribution);

    /* for(var key in ((SexAgeDistribution[0].sex)[0])){
        alert(key+':'+((SexAgeDistribution[0].sex)[0])[key]);
    } */

    var columLabel = ['男','女'];  
    var columName = []; 
    var malecount=[];
    var femalecount=[]; 

    for(var k=0;k<SexAgeDistribution.length;k++){
        columName.push(SexAgeDistribution[k].name);
        malecount.push((SexAgeDistribution[k].sex)[0].男);
        femalecount.push((SexAgeDistribution[k].sex)[0].女);
    }

    var chart = document.getElementById('SexAgeDistri');    
    var echart = echarts.init(chart);    
    var option = {
        title : {
            text: '性别-年龄分布图',
            x:'right',
            textStyle: {
                color: '#000000',
                fontSize:18
            }
        },
        tooltip : {  
            trigger: 'axis',  
            axisPointer : {              
                type : 'shadow'          
            }  
        }, 
        color:['#4f81bd','#c0504d'], 
        legend: {  
            data:columLabel, //此处将图例放进数组中
            y: 'bottom'
        },  
        xAxis : [  
            {  
                min:0,  
                type : 'category',  
                data : columName 
            }  
        ],  
        yAxis : [  
            {  
                min:0,  
                type : 'value',
                name:'用户数'
            }  
        ],  
        series : [
                  //此处设置了两项 每项中又分别对应一个名字和data 构成了多项柱状图
                  {
                      name:'男',
                      type:'bar',
                      data:malecount
                  },
                  {
                      name:'女',
                      type:'bar',
                      data:femalecount
                  }
                  ]
    };  

    echart.setOption(option); 

在echarts中常遇到一个让我困惑的地方就是formatter属性了，这个属性常常是在tooltip属性中出现，即提示框的格式设置的问题。

formatter: "{b}用户：{c0}</br>总人数："+totalcount+" </br>百分比：{d}%"

刚开始会很疑惑abcd这些字母到底是如何使用的。官网的api上有很好的的解释：

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

1、折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
2、散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
3、地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
4、饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

最后再附上一份地图的echarts参数设置：

js代码:

    var myChart5 = echarts.init(document.getElementById('map'));
    myChart5.setOption({
        title: {
            textStyle: {
                fontSize: 14,
                fontWeight: 'bolder',
                color: '#ffffff'          // 主标题文字颜色
            }
        },
        series: [{
            type: 'map',
            map: 'china',
            zoom:1.2,
            label: {
                normal: {
                    show: true,//显示省份标签
                    textStyle:{color:"#ffffff",fontSize:12,fontFamily: 'UnidreamLED'}  //省份标签字体颜色
                },    
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle:{color:"#051421"}
                }
            },
            layoutCenter: ['50%', '50%'],
         // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
           //layoutSize:430,
        }]
    });
    window.onresize = myChart5.resize;
    $.get('web?module=stwmgr&action=Data&method=showMapData&tokenId=<%=request.getParameter("tokenId")%>').done(function(data) {       
        var obj = eval('(' + data + ')');
        console.log(obj);
                    myChart5.setOption({
                        tooltip : {
                            trigger : 'item'
                        },
                        series : [ {
                            name : '使用用户数',
                            type : 'map',
                            mapType : 'china',
                            roam : false,
                            data : obj,
                            itemStyle : {
                                normal : {
                                    label: { show: true, position: 'top', 
                                        formatter: function(a)
                                        {
                                            //console.log(a);
                                            if(a.value==0){return " ";}
                                            return a.value;
                                        }
                                        },
                                    borderWidth : 1,//区域边框宽度
                                    borderColor : '#1fa7eb',//区域边框颜色
                                    areaColor : "#051421",//区域颜色
                                },
                                emphasis : {
                                    borderWidth : .5,
                                    borderColor : '#4b0082',
                                    areaColor : "   #6495ED",
                                }
                            },
                        } ],

                    });
                });

地图中的formatter就是一种通过回调函数设置格式的方法，这样就可以在地图上将为0的数据不显示，样式看起来比较美观。