ECharts常用组件使用心得

       ECharts功能很强大，官网有专门的配置项说明，使用其实还是蛮方便的。只是不熟悉图表项对应的配置项名称，查找起来也是耗不少时间，后来网上找到ECharts6大公共组件详解。我常用到的是title、legend、tooltip、dataZoom、visualMap这五项，除此以外还常用到grid、xAxis、yAxis、series这四个配置项，各配置项在折线图中对应关系如下图：


 
   图一

<script src="js/lib/echarts/echarts.min.js"></script>
<div class="chartBox js-chartBox">
<div class="box-bg-default">
<div id="pressChart" style="width: 100%; height: 4.4rem;"></div>
</div>
<div class="cell-flex-start padder-trbl_diff text-xs-default">
<div class="icon-circle margin-r_md">收缩压</div>
<div class="icon-circle icon-circle_a margin-r_md">舒张压</div>
<div class="icon-circle icon-circle_b">异常</div>
</div>
</div>
<script>
$(function() {
var pressChart = echarts.init(document.getElementById('pressChart'));
option = {
tooltip : {
trigger: 'axis',
axisPointer : {  //坐标轴指示器
type : 'line',
lineStyle: {  // 直线指示器样式设置
color: '#999',  // 纵向竖虚线的颜色
type: 'dashed'
},
},
},
toolbox: {
show : false
},
grid:{
left:'2%',
right:'6%',
top:'15%',
bottom:40,
containLabel:true,
},
xAxis : [
{
type: 'category',
nameGap: 5,
name: '',
boundaryGap : false,
axisLine:{
show:true,
lineStyle:{
color:"#e8e8e8"  //坐标轴x轴颜色
}
},
axisLabel: {
textStyle: {
color: '#999'
}
},
axisTick:{
inside: true,  //坐标轴刻度线显示
lineStyle: {
color: '#e8e8e8'
}
},
splitLine:{show: false},//去除网格线
data : ['12-07','12-08','12-09','12-10','12-11','12-12','12-13']
}
],
yAxis : [
{
type : 'value',
min:20,  //y轴最小数值
max:200,  //y轴最大数值
name:'mmHg',
nameGap: 13,
offset:-4,
nameTextStyle:{
color:'#999',
},
axisLine:{
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
},
splitLine:{show: false}, //去除网格线
axisTick:{
show:false  //坐标轴刻度线显示
}
}
],
dataZoom: [
{
type: 'slider',
start:0,
end:50,
startValue: '12-07',
endValue: '12-13',
height:20,
bottom:10,
textStyle:{color:'#999'},
borderColor:'#e8e8e8',
fillerColor:'#ebf9ff',
dataBackground:{
lineStyle:{
color:'#bababa',
},
areaStyle:{
color: '
4000
rgba(186,186,186,0.8)',
},
},
},
{
type: 'inside'
}
],
visualMap: [
{
show: false,
seriesIndex: 0,
pieces: [
{gt: 0, lte: 89, color: '#F55165', symbol:'circle'},
{gt:89, lte: 139, color: '#92e2ff',symbol:'emptyCircle'}, //大于89，小于等于139
{gt: 139, lte: 1000, color: '#F55165',symbol:'circle'}
]
},
{
show: false,
seriesIndex: 1,
pieces: [
{gt: 0, lte: 59, color: '#F55165', symbol:'circle'},
{gt:59, lte: 89, color: '#ffd6b7',symbol:'emptyCircle'},
{gt: 89, lte: 1000, color: '#F55165',symbol:'circle'}
]
}
],
series : [
{
name:'收缩压',
type:'line',
symbol:'emptyCircle', //拐点样式
symbolSize: 6, //拐点大小
itemStyle : {
normal:{
color:'#ebf9ff',
lineStyle:{
color:'#92e2ff',
width: 1
}
}
},
markArea:{
silent: true,
data: [
[{
yAxis: 90,
},
{
yAxis: 139,
}]
]
},
data:[92, 87, 100, 120, 110, 144, 140]
},
{
name:'舒张压',
type:'line',
symbol:'emptyCircle', //拐点样式
symbolSize: 6, //拐点大小
itemStyle : {
normal:{
color:' #fff6ef',
lineStyle:{
color:'#ffd6b7',
width: 1
}
}
},
markArea:{
silent: true,
data: [
[{
yAxis: 60,
},
{
yAxis: 89,
}]
]
},
data:[62,57, 88, 93, 76, 88, 84]
}
]
};
pressChart.setOption(option);
window.onresize = pressChart.resize;
});
</script>

 一、 title好理解，是图标的标题，可以对照ECharts官网配置文档配置需求图标标题，位置、颜色、副标题等都是可以设置的。

 二、legend展现不同系列的标记，颜色和名字，如上图中的“收缩压”、“舒张压”两个系列的名字和标记。一般调节标记的位置，设置名字的颜色、大小以及名字前面图标。上图中的legend位置要调到图表外，用默认的legend没试过调到图表外，不知道行不行，所以我并不是用ECharts默认的系列说明，是直接自己另外写的，所以要添加默认legend点击图例控制哪些系列不显示的功能也是需要自己另外写代码控制。

 三、 xAxis、yAxis在图一中分别为折线图的x轴和Y轴， xAxis、yAxis常用到配置项如下图二。


图二

name: '',           //设置x轴和Y轴名称
nameGap: 5,         //设置x轴与名字的间距
offset:-4,          //Y 轴相对于默认位置的偏移
axisLine            //坐标轴轴线
axisTick            //坐标轴刻度
axisLabel           //刻度标签
splitLine           //分隔线
min:20,             //y轴最小数值
max:200,            //y轴最大数值

x轴、y轴最大最小值可根据数据大小设置，以y轴为例

maxNum1 = Math.max.apply(null,hosiptalArr); //获取数据y轴数据数组1最大值
maxNum2 = Math.max.apply(null,teamArr);  //获取数据y轴数据数组2最大值
if(maxNum1<10 && maxNum2<10){
option.yAxis[0].max = 10;
}else{
option.yAxis[0].max = null;
}
statisticalGraph.setOption(option, true);

四、series 配合分段型visualMap组件可以将折线/面积图通过不同颜色分区间。例如图一中不同折线可通过visualMap中seriesIndex分别设置曲线，一折线不同区间颜色通过pieces分段设置。如果只设置了pieces分区，不设置series中lineStyle的颜色，则图表曲线颜色如下图：



如不要折线渐变只需要圆圈颜色变化可以添加series中lineStyle的配置。
图中蓝色和橙色背景部分则通过设置series-markArea（常用于标记图表中某个范围的数据）和series-itemStyle-normal-color设置。

五、tooltip（提示框组件）

axisPointer : {             //坐标轴指示器
type : 'line',
lineStyle: {           // 直线指示器样式设置
color: '#999',     // 纵向竖虚线的颜色
type: 'dashed'
},
},

 项目中不需要设置tooltip里的数据显示方式，可以不设置formatter，如果需要设置，例如下面两种，需要格式化数字，超过三位数的用逗号隔开。

formatter:function (params,ticket,callback) {
var lineName = params.seriesName;
var month =  params.name;
var dataNum = toThousands(params.data);
return lineName + "<br/>" + month + "：" + dataNum;
},

formatter:function (params,ticket,callback) {
                    var month =  params[0].name;
                    var st = month+'<br/>'+ '';
                    $.each(params,function(i,n){
                        st += n.marker + n.seriesName  + "："+ ftNum(n.data) + (n.seriesName=='E率'?'%':'')+'<br/>';
                    });
                    return st;
                },

//格式化数字，超三位加逗号隔开
function toThousands(num) {
    var arr = (num||0).toString().split('.');
    var n = (arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
    if(arr.length==2){
        return n+'.'+arr[1];
    }else{
        return n;
    }
};

function ftNum(n){
    var values;
    if(n>=10000){
        values = number_format((n/10000).toFixed(0), 0, '.', ',')+'万';
    } else {
        values =  toThousands(n);
    }
    return values;
};

function number_format(number, decimals, dec_point, thousands_sep) {
    /*
    * 参数说明：
    * number：要格式化的数字
    * decimals：保留几位小数
    * dec_point：小数点符号
    * thousands_sep：千分位符号
    * */
    number = (number + '').replace(/[^0-9+-Ee.]/g, '');
    var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return '' + Math.ceil(n * k) / k;
        };

    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    var re = /(-?\d+)(\d{3})/;
    while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
    }

    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
};

六、grid一般用来设置图表距离容器上、下、左、右侧的距离。

七、dataZoom（缩放组件）。