关于百度Echart动态图表的问题

Question

怎样利用百度Echart实现动态图表，麻烦有做过的大神们指点一二

Answer 1

给你我的代码示例吧、

    var queryDiskBuy=function(){
        var ajaxSettings=$.extend({},commonSettings,{
                url : params.queryDiskBuyUrl,
                success : function(data){
                    diskBuyHandler(data);
                },
                error : errorHandler,
                data : {
                    recent : recent,
                }   
        });
        $.ajax(ajaxSettings);
    };
    var diskBuyHandler=function(data){
        if(!data.success||data.list==null){
            tab("security-tab1-main",dataAllIn,"买入时股票涨幅（%）","当天收盘涨幅（%）",'买入分布');
            return;
        }
        for(var i=0;i<data.list.length;i++){
            var temp=[data.list[i].matchInAscend,data.list[i].stockAscend,data.list[i].matchInAmt];
            dataAllIn[i]=temp;
        }
        tab("security-tab1-main",dataAllIn,"买入时股票涨幅（%）","当天收盘涨幅（%）",'买入分布');
    };

tab函数：

    var tab = function(id,dataAll,xName,yName,title2){
        var myChart = echarts.init(document.getElementById(id));
                   var markLineOpt = {
                       animation: false,
                       label: {
                           normal: {
                               formatter: '',
                               textStyle: {
                                   align: 'right'
                               }
                           }
                       },
                       lineStyle: {
                           normal: {
                               type: 'solid',
                               color:"#ccc"
                           }
                       },
                       tooltip: {
                           show:false
                       },
                       data: [[{
                           coord: [-10,-10],
                           symbol: 'none'
                       }, {
                           coord: [10, 10],
                           symbol: 'none'
                       }]]
                   };
                   var option = {
                       color: [
                           'rgba(251,75,75,1)','blue'
                       ],
                       grid: [
                           {
                               x:"70",
                               x2: '40',
                               y: '5%',
                               width: '70%',
                               height: '70%'
                           }
                       ],
                       tooltip: {
                           formatter: function (obj) {
                               var value = obj.value;
                               return '<div style=" font-size: 14px">'
                                       + '买入时股票涨幅'+ ':' + value[0] + '%'+ '<br>'
                                       + '当天收盘涨幅'+ ':' + value[1]+ '%'+ '<br>'
                                       + '成交金额' + ':' + value[2]+ '元'+ '<br>';
                                       + '</div>'+ '<br>'
                           }
                       },
                       xAxis: [
                           {
                               name:xName,
                               type : 'value',
                               nameLocation:"middle",
                               nameGap:"30",
                               scale:true,
                               min:'-10',
                               max:'10',
                               splitNumber:10,//设置x轴间隔数
                               axisLine:{
                                   onZero:false,//坐标轴不从0开始
                                   lineStyle:{
                                       color:"#9DA1A7"
                                   }
                               },
                               axisTick:{
                                   show:false
                               }
                           }
                       ],
                       yAxis: [
                           {
                               name:yName,
                               nameLocation:"middle",
                               nameGap:"30",
                               type : 'value',
                               scale:true,
                               min:'-10',
                               max:'10',
                               splitNumber:10,//设置y轴间隔数
                               axisLine:{
                                   onZero:false, //坐标轴不从0开始
                                   lineStyle:{
                                       color:"#9DA1A7"
                                   }
                               },
                               axisTick:{
                                   show:false
                               }
                           }
                       ],
                       series: [
                           {
                               name: '买入分布',
                               type: 'scatter',
                               xAxisIndex: 0,
                               yAxisIndex: 0,
                               data: dataAll,
                               markLine: markLineOpt,
                               itemStyle:{
                                   normal:{
                                       color:function(data){
                                           if(parseFloat(data.data[0]) <parseFloat( data.data[1]))
                                           {
                                               if("买入分布"==title2){
                                                   return "red";
                                               }else{
                                                   return "green";
                                               }
                                           }
                                           else{
                                               if("卖出分布"==title2){
                                                   return "red";
                                               }else{
                                                   return "green";
                                               }

                                           }
                                       }
                                   }
                               },
                               symbolSize: function (data) {
                                   return Math.abs(data[2]) /1000;
                               }//节点大小范围
                           }
                       ]
                   };
        myChart.setOption(option);
    }