echart-柱状图显示说明

最近在作数据分析，绘制图表时用到了echart库，官网上官方实例有很多，大部分直接套用即可，少部分需要个根据需求*定制。下面说下使用echart库的一些心得：

1、添加“进度条”：

主要是设置option下dataZoom参数，根据

    dataZoom: [
                {
 // 鼠标缩放效果 
                    type: 'inside',
                    start: 50,
end: 100
                },
                {
 // 进度条初始显示
                    show: true,
                    type: 'slider',
                    y: '90%',
                    start: 50,
end: 100
                }
            ],

2、鼠标悬停显示内容设置：

默认是显示x轴（名称）,y轴（数值）的内容，可自定义显示格式和内容

// 默认
tooltip : {
            trigger: 'axis'
            },
// 自定义formatter函数
tooltip: {
            formatter:function(a){ 
return (a['seriesName'] +'</br>'+a['name']+'：'+a['value']); 
            }
        },

注：

1. formatter中参数a包含整个图标的信息，可添加断点调试，选择想要显示的参数；

2. formatter: “{a}
   {b}: {c} ({d}%)”这种简写方式暂未了解其原理；

   tooltip对应鼠标悬停的显示效果，itemStyle对应图标中文字的显示效果，也可以设置formatter函数；例如根据‘-’分割文字，换行显示：

// series中：
data:[
        {value:'{{wins.0}}', name:'Windows-7/8/10', selected:true},
        {value:'{{wins.1}}', name:'Windows-Server'},
        {value:'{{wins.2}}', name:'Vista'},
        {value:'{{wins.3}}', name:'Windows-XP'},
        {value:'{{wins.4}}', name:'未-知'},
    ],
itemStyle: {  
normal:{  
     label:{  
         show:true,  
         formatter:function(val){ //让series 中的文字进行换行 
return val.name.split("-").join("\n");}  
         },  
         labelLine:{  
         show:true  
         }  
     },  
       emphasis: {  
           shadowBlur: 10,  
           shadowOffsetX: 0,  
           shadowColor: 'rgba(0, 0, 0, 0.5)'  
       }  
   },

3、柱状上显示数值设置：

设置normal-label，show-是否显示，formatter-显示格式，position-显示位置（’right’、‘inne…）：

itemStyle: {
normal: {
 label: { 
 show: true,//是否展示 
}  
},

4、柱状图最大、最小、平均线显示：

最大、最小值，平均线能根据当前显示界面内的柱状图动态计算。显示类型 type: ‘min’,’max’,’average’等。

    markLine : {
            data : [
                        {type : 'average', name: '平均值'}
                    ]
    },
    markPoint: {
        label: {
                normal: {
                    formatter: function (param) {
return param != null ? Math.round(param.value) : '';
                    }
                }
        },
        data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
    },

菜鸟用echart，刚开始觉得模板很强大，实际用的时候发现很多想实现的效果不知道在修改哪个参数，希望能通过这样总结对比来拓宽理解。