echarts简单使用

grid 控制边距

grid:{
            left:'3%',right:'7%',bottom:'30'
        }

toolTip 悬浮提示

tooltip : {
     trigger: 'axis',//axis所有点显示悬浮信息，item只有在折线上标出的点显示悬浮信息（markPoint悬浮信息item时会显示，而axis不显示）
     axisPointer: { type: 'none' },
     formatter:function (params) {
             var str = "";
             str = str + "&nbsp" + params[0].dataIndex + " 点 至 " + (params[0].dataIndex+1) + " 点</br>";
             for(var i = 0; i < params.length; i++){
                    str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "</br>";
             }
             return str;
       }
}

legned 图例 data中的值是series中各数据的name，xy图例位置

legend: {
     data:[
           '订单总数','线上订单数量', '营业厅订单数量'
     ],
     x:"center",
     y:"bottom"
}

boundaryGap 控制刻度对其（从0开始）

xAxis : [
            {
                type : 'category',
                name : '日期',
                splitLine:{show: false},
                boundaryGap: false,
                data : [${xAxisData!noescape}],
                axisLabel :{
                    formatter:function (value, index) {
                        return value.substr(5).replace("-","/");
                    }
                }
            }
        ]

minInterval 最小间隔，minInterval:1可避免小数
max 坐标极限 max:null自适应，使用function返回null时无效
splitArea 间隔底色，areaStyle:color值为数组类型，按数组中的颜色依次显示

var arr = [${seriesData!noescape}];
var max = parseInt(arr[0]);
for(var i = 0; i < arr.length; i++){
    if(max < parseInt(arr[i])) max = parseInt(arr[i]);
}
var maxValue = max<10?10:null;

yAxis : [
            {
                type : 'value',
                name : '订单数量',
                minInterval:1,
                max:maxValue,
                splitArea:{
                    show:true,
                    areaStyle:{color:['rgba(250,250,250,0.3)','rgba(248,251,255,1)']}
                }
            }
        ]

两个柱状图由同一stack时，可以堆叠
折线图和柱状图有同一name时，可以混合显示
markPoint , markLine silent:true时不响应事件

series : [
      {
           name:'订单总数',
           type:'line',
           smooth:true,
           itemStyle:{normal:{color:"rgba(255,127,80,1)"}},
            markPoint : {
                 silent:true,
                 symbol:'pin',
                 symbolSize:'50',
                 data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                  ]
              },
              markLine : {
                    silent:true,
                    data : [
                        {type : 'average', name : '平均值'}
                      ],
                     label:{
                          position:'end',
                           formatter:function (params) {
                                  return params.name + ":" + params.value;
                             }
                         }
                },
                data:data.seriesData.split(',')
          },
          {
               name:'线上订单数量',
                type:'bar',
                stack:'订单数量',
                 itemStyle:{normal:{color:"rgba(9,133,210,1)"}},
                     data:data.seriesDataOnline.split(',')
           },
           {
                name:'营业厅订单数量',
                type:'bar',
                stack:'订单数量',
                itemStyle:{normal:{color:"rgba(135,206,250,1)"}},
                data:data.seriesDataOffline.split(',')
           }
]

setOption设置样式

var daysChart = echarts.init(document.getElementById('daysChart'));
daysChart.setOption(daysOption);