qq_27074467
2016-09-18 07:26
采纳率: 37.5%
浏览 1.7k
已采纳

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

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 王_超 2016-09-18 08:23
    已采纳

    给你我的代码示例吧、

        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);
        }
    
    打赏 评论
  • little_how 2016-09-18 07:36

    不知道你要怎么动态,我的项目做的是超级动态。

    思路:
    1.echars3.0中不同图像只有option不同,所以配置从option入手
    2.每个echarts都需要用一个div或者其他元素承载,所以要生成一个多图的页面,一定要为option做唯一标识处理
    3.尽量做到模板化
    比如我的折线和柱状图模板如下:
    {
    color: [#default_static_color],
    tooltip : {
    trigger: 'axis',
    axisPointer : {

    type : 'shadow'
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    legend:{
    data:[#default_static_legend]
    },
    xAxis : [
    {
    type : 'category',
    data : [#default_static_xAxis],
    axisTick: {
    alignWithLabel: true
    }
    }
    ],
    yAxis : [{type : 'value'}],
    series : [#default_static_series]
    }
    这里只对option做了处理,
    然后配置的时候会根据模板生成进一步的freemarker模板。
    还有很多其他模板。

    希望可以帮到你....

    打赏 评论

相关推荐 更多相似问题