大数据中台-动态效果

第一种动态效果: 按系列轮放

参考: 饼图自动播放

//select 指标名, 值

var dataset = __dataset__; //传入dataset
legend_label = ds_rowname(dataset) //可选, 自动获取legend
var series =[];
for (var i=1;i<dataset.length;i++){
    series.push({name: dataset[i][0],value: dataset[i][1]})
}

option__name__ = {
   // backgroundColor: '#2c343c',

    title: {
        text: dataset[0][1],
        left: 'center',
        top: 20,
        textStyle: {
      //      color: '#ccc'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b} <br/>{c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
    //        colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:dataset[0][1],
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                  //      color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                   //     color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                //    color: '#8B2500',
                 //   shadowBlur: 200,
                 //   shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            },
            data: series
        }
    ]
};
charts.push(myChart__name__);

//动态播放
startSelectAnimate(myChart__name__,legend_label.length,1000,1);

 

设定方法:

• 如果不改动图形, 可以在"仪表盘" --> 高级设定中 进行

  //动态播放
    "animate":{"2":{"dataLen":5,"interval":1000,"showtip":1}},

   

• 以上方法最简单,但有一个弊端, 需要指定dataLen, 有时可能dataLen不固定,这样你可以采用在图形设定的最后加上一段即可:

  //基于数据项动态设定
  startSelectAnimate(myChart__name__,legend_label.length,1000,1);

   

第二种动态效果: 时间轴模式(当然不一定是时间)

参考: 时间轴动态播放

//select 维度, 指标1,指标2,指标3...
let dataset = __dataset__; //传入dataset
let title = dataset[0][0]
dataset = ds_transform(dataset) //可选, 当需要行列互转时
//legend_label = ['C1','C2'] //legend_label的顺序可以指定, 已知系列名
let legend_label = ds_rowname(dataset) //可选, 自动获取legend
let xlabel = dataset[0].slice(1) //x轴的标签列
dataset = ds_createMap(dataset) //转化成KV格式

option__name__= {
            //timeline基本配置都写在baseoption 中
            baseOption: {
                timeline: {
                    //loop: false,        
                    axisType: 'category',
                    show: true,
                    autoPlay: true,
                    playInterval: 1000,
                    data: legend_label.slice(0,3)
                },
                grid: { containLabel: true },
                
                title: {
                        text: title,
                        subtext: '副标'
                    },
                xAxis: [{
                    type: 'category',
                    name: 'X轴标签',
                    data: xlabel,
                }, ],
                yAxis: { type: 'value', name: 'xxx' },
                series: [
                    {
                        type: 'line',
                    },
                ],
                tooltip: {}
            },
            //变量则写在options中
            options:[
                //第一个
                {
                    // xAxis: [{
                    //     data: xlabel
                    // }],
                    // title: {
                    //     text: '电量使用总计',
                    //     subtext: '单位:Mwh'
                    // },
                    series: [
                        {
                            data: dataset[legend_label[0]],
                            type: 'bar'
                        },
                    ]
                },
                //第二个
                {
                    series: [
                        {
                            data: dataset[legend_label[1]],
                            type: 'line'
                        },
                    ]
                },
                //第三个
                {
                  series: [
                      {
                          data:dataset[legend_label[2]]
                      },
         
                  ]
                },
            ]
        }
charts.push(myChart__name__);