起步平台 WeX5 集成百度echarts实现微信公众号中折线图颜色交错显示

前端时间做了一个基于微信公众号的问卷调查、数据填报的项目，在里面涉及了一些图表的分析展示，本来以为很简单的一个功能，却着实让我折腾了好长一段时间，到处查找资料、翻看API也没有找到解决办法，真的想说，啥事还是得靠自己，是什么问题呢，请听我慢慢道来。。。

首先，得感谢起步强大的移动开发平台：wex5，让我们的基于微信公众号的项目开发不再是什么难事

下面要说的就是wex5集成echarts实现折线图的不同区间不同颜色的显示问题！

一、效果图

先上几张效果图感受一下wex5平台的开发之快和百度echarts功能的强大吧!!!轻松集成到微信公众号中去

    

    

二、WeX5介绍

wex5平台是北京起步公司开发的面向移动应用的开源平台

 

• 定位：开发面向消费者和公众的开放应用系统
• 适用：一般app、电商app、客服app、会员app、微店微商等
• 前端：安卓app/苹果app/微信服务号/PC web app
• 后端：后端数据处理组件，对接各主流技术平台
• 费用：完全开源，彻底免费，无任何限制

关于该平台的详细介绍，请参见官网：http://www.wex5.com/

 

三、开发思路介绍

对于echarts来说，图表的数据展示是通过series来实现的，我们的开发一般都是涉及一个series来显示所有的数据，这种情况下只会有一条线显示数据，那么反过来思考，我们如果需要两条线呢？那不就是设置两个series就可以实现了啊。按照这个思路，我们定义了两个数组存放不同区段的数据：

 

在对series的数据集进行转化的时候，其实要考虑的是如果某个数据不属于第一个数据daySumOld，要将daySumOld数组中的值设置为'-'，用'-'可以让某个点不展示。
废话不多说，摞代码：

//显示折线图
var daySumOld= [];
var daySumNew=[];
var time=[];
var i = 0;
var flag = true;
dPriceTrend.each(function(obj){
if(obj.row.val('fDate')== null){
   }else{    
       if(i==0){  
          daySumOld = [];  //有数据时，清空假数据
          daySumNew = [];
          time = [];
       }
   var chuqinlv = obj.row.val('fPrice');
var fDate = obj.row.val('fDate');
var date = new Date();
var currentDate = date.getFullYear()+'-'+self.paddNum(date.getMonth() + 1)+'-'+self.paddNum(date.getDate());
if(new Date(fDate).getTime() <= new Date(currentDate).getTime()) {
if(flag) {  //时间是倒序显示，比如9-30,9-14...这样获取顺序，第一次发现有小于当前日期的，需要将该日期赋值给daySumNew,方便蓝色线条的展示
daySumOld[i] = chuqinlv;
daySumNew[i] = chuqinlv;
flag = false;
} else {
daySumOld[i] = chuqinlv;
daySumNew[i] = "-";
}
} else {
daySumNew[i] = chuqinlv;
daySumOld[i] = "-";
}
var times = fDate.toString().substr(5);
time[i] = times;
i++;
}
   });

daySumOld.reverse();
daySumNew.reverse();
time.reverse();

var option = {
title:{
text: "价格预测",
x: "center"
},
            tooltip : {
                trigger: 'item'
            },
           /* legend: {
                data:['出勤率']
            },*/
            toolbox: {
                show : true,
                feature : {
                    mark : {show: false},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line']},
                    restore : {show: false}
                    //saveAsImage : {show: true}
                }
            },         
            xAxis : [
                {
                    type : 'category',
                    data : time,
                    name : "日期",
                    nameLocation : "start"
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true},
                    name : "价格",
                    nameLocation : "end"
                }
            ],
            series : [
                      {
                     name:'价格预测',
                     type:'line',
                     itemStyle : {normal:{label:{show:true,position:'top',formatter:'{c}'}}},
                     data : daySumOld
                     //data: [daySumOld[0],daySumOld[1],daySumOld[2],daySumOld[3],'-']
                 },{
                     name:'价格预测',
                     type:'line',
                     itemStyle : {normal:{label:{show:true,position:'top',formatter:'{c}'}}},
                     data : daySumNew
                     //data: ['-','-','-',daySumNew[3],daySumNew[4]]
                 }
            ],         
            grid:{
            x:30,
            x2:10,
            y:50,
            y2:30
}
        }; 

var myChart = echarts.init(this.getElementByXid('div8'));
myChart.setOption(option);

四、总结

1.选择一个好的平台非常重要，wex5平台在开发手机应用和微信应用方面非常的适合；

2.集成echarts，需要对echarts的api非常的熟悉，如果api没有提到的，也可以自己不断尝试发现解决问题的方法。