请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
14
帖子
0
勋章
1万+
Y币

pieChart模块demo

[复制链接]
发表于 2019-4-26 14:06:13
var chartId;
    var pieChart;
    var element = [];
    apiready = function(){
       pieChart = api.require('pieChart');
      //可以从后台取类似格式的数据
       var dataArr = [{ value: 20,color: '#FF6600',name:'旅游'}, {value: 20,color: '#660099',name:'美食'}, {value: 20,color: '#FF33FF',name:'影院'}, {value: 20,color: '#66CCFF',name:'服装'}, {value: 20,color: '#00CCFF',name:'首饰'}];
       for(var i in dataArr){
            var color = dataArr.color;
            var name = dataArr.name;
            var value = dataArr.value;
           //插入一个右侧的颜色代表显示
            $("#showSort").append('<div style="font-size:0.67rem;width:100%;height:25px;line-height:25px;"><div style="background:'+color+';width:40px;height:15px;margin:5px;float:left;"></div style="float:left;">'+name+'</div>');
          //定义重组图形的显示数组  
          if(element==undefined){
                element = {
                    value:'',
                    color:''
                }
            }
            element['value'] = value;
            element['color'] = color;
       }
       var height = $("#showSort").height();
       var left = api.winWidth/2-183;
       var top = api.winHeight/2-100;
       $("#showSort").css({'height':height,'left':left,'top':top});
        pieChart.open({
            x: api.winWidth / 2,
            y: api.winHeight / 2,
            radius: 100,
            center: {
                title: '标题',
                subTitle: '子标题'
            },
            elements: element,
            fixed: false
        }, function(ret, err) {
            if (ret) {
                alert(JSON.stringify(ret));
                chartId = ret.id;
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
//刷新图形数据
function refresh(){
        var pieChart = api.require('pieChart');
        var reElement = [{ value: 10,color: '#FF6600'}, {value: 40,color: '#660099'}, {value: 20,color: '#FF33FF'}, {value: 5,color: '#66CCFF'}, {value: 15,color: '#00CCFF'}]
        pieChart.reloadData({
            id: chartId,
            elements: reElement
        }, function(ret, err) {
            if (ret) {
                alert(JSON.stringify(ret));
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
//隐藏图形
    function hideChart(){
        pieChart.hide({
            id: chartId
        });
    }
//显示图形
    function showChart(){
        pieChart.show({
            id: chartId
        });
    }
//关闭图形并退出当前win
    function closeChart(){
        api.closeWin({
            name: 'test'
        });
        pieChart.close({
            id: chartId
        });
    }
//重置图形位置
    function resetChart(){
        var pieChart = api.require('pieChart');
        pieChart.setFrame({
            id: chartId,
            x: api.winHeight/4,
            y: api.winWidth/2,
            anim: true
        });
      //修改右侧显示位置
       var top = api.winHeight/4-100;
       $("#showSort").css({'top':top});

    }

分享一个pieChart模块的简单写法,大家可以根据自己的需求进行改动。

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
37
帖子
2
勋章
3711
Y币
感谢分享
175
帖子
1
勋章
5678
Y币
感谢分享
90
帖子
2
勋章
2237
Y币
可以塞。
19
帖子
3
勋章
1万+
Y币
感谢分享
6
帖子
0
勋章
35
Y币
变量值如何给定?

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
您需要登录后才可以回帖 登录

本版积分规则