师父终于给派了个任务。echarts相关

今天师父终于给派了任务。如下图：

这是用echart插件做的，可以在官网看到这个demo，五条折线，分别代表五组数据。当鼠标移动到其中一条折线的一个拐点时，会显示出五组数据的详细值。

师父要求只有一条折线图，然后，显示出自定义内容。

本菜鸟一听到要求很懵逼，第一次接触echarts，完全不知道从哪里入手。没办法，师父给的任务，慢慢看代码吧。然后，我弄了一整天，终于给搞出来了。下面贴代码和截图。

var data0 = new Array(
    [ 2320.26,2320.26,2287.3,2362.94,343],
    [ 2300,2291.3,2288.26,2308.38,213],
    [ 2295.35,2346.5,2295.35,2346.92,653],
    [2264.43,2242.11,2240.07,2266.69,345],
    [ 2242.26,2210.9,2205.07,2250.63,236],
    [ 2190.1,2148.35,2126.22,2190.1,2456]
);


  var end_obj = [];   
   for(i in data0){  
   var obj = {name:'', datas:[]}; 
   
  obj.value = data0[i][4];//这个很关键，因为，折线图只显示数据结构中的value数据，我也不知道怎么表达，大家仔细看代码。
  
   obj.datas[0] = data0[i][0];
 
  obj.datas[1] = data0[i][1];
   obj.datas[2] = data0[i][2];
   obj.datas[3] = data0[i][3];
   end_obj.push(obj);  
  }


    
option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },


    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:end_obj,
            
            tooltip : {  
                    trigger: 'item',//是否节点触发  
                    padding: 5,  
                    formatter: function(a){  
                        return ('数据名称:'+a['name']  
                               +'</br>item0:'+a['data'].datas[0]  
                               +'<br>item1:'+a['data'].datas[1]  
                               +'<br>item2:'+a['data'].datas[2]  
                               +'<br>item3:'+a['data'].datas[3]  
                                
                               );  
                    },  
                }  
        }
       
    ]
};

结果：

算是基本完成了师父的要求吧。

回头看来，代码还是很简单的，第一次独立完成任务，纪念一下。