ichartjs图表之简单饼图实现

基本信息

源码名称：ichartjs图表之简单饼图实现

源码大小：4.15KB

文件格式：.html

开发语言：CSS

更新时间：2017-10-26

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 1 元　

源码介绍

ichartjs图表之简单饼图实现

饼图：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>ichartjs designer</title>
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
<script type='text/javascript'>
$(function(){
      var chart = iChart.create({
            render:"ichart-render",
            width:800,
            height:400,
            background_color:"#fefefe",
            gradient:false,
            color_factor:0.2,
            border:{
                  color:"BCBCBC",
                  width:1
            },
            align:"center",
            offsetx:0,
            offsety:0,
            sub_option:{
                  border:{
                        color:"#BCBCBC",
                        width:1
                  },
                  label:{
                        fontweight:500,
                        fontsize:11,
                        color:"#4572a7",
                        sign:"square",
                        sign_size:12,
                        border:{
                              color:"#BCBCBC",
                              width:1
                        },
                        background_color:"#fefefe"
                  }
            },
            shadow:true,
            shadow_color:"#666666",
            shadow_blur:2,
            showpercent:false,
            column_width:"70%",
            bar_height:"70%",
            radius:"100%",
            title:{
                  text:"测试ichartjs图表",
                  color:"#111111",
                  fontsize:20,
                  font:"微软雅黑",
                  textAlign:"center",
                  height:30,
                  offsetx:0,
                  offsety:0
            },
            subtitle:{
                  text:"MyTest",
                  color:"#111111",
                  fontsize:16,
                  font:"微软雅黑",
                  textAlign:"center",
                  height:20,
                  offsetx:0,
                  offsety:0
            },
            footnote:{
                  text:"all Data To Test",
                  color:"#111111",
                  fontsize:12,
                  font:"微软雅黑",
                  textAlign:"right",
                  height:20,
                  offsetx:0,
                  offsety:0
            },
            legend:{
                  enable:false,
                  background_color:"#fefefe",
                  color:"#333333",
                  fontsize:12,
                  border:{
                        color:"#BCBCBC",
                        width:1
                  },
                  column:1,
                  align:"right",
                  valign:"center",
                  offsetx:0,
                  offsety:0
            },
            coordinate:{
                  width:"80%",
                  height:"84%",
                  background_color:"#ffffff",
                  axis:{
                        color:"#a5acb8",
                        width:[1,"",1,""]
                  },
                  grid_color:"#d9d9d9",
                  label:{
                        fontweight:500,
                        color:"#666666",
                        fontsize:11
                  }
            },
            label:{
                  fontweight:500,
                  color:"#666666",
                  fontsize:11
            },
            type:"pie3d",
            data:[
                  {
                  name:"上海某公司",
                  value:20,
                  color:"#4572a7"
            },{
                  name:"成都某公司",
                  value:30,
                  color:"#aa4643"
            },{
                  name:"广东某公司",
                  value:40,
                  color:"#89a54e"
            },{
                  name:"深圳某公司",
                  value:50,
                  color:"#000000"
            }
            ]
      });
      chart.draw();
});
</script>
</head>
<body style='background-color:#244c74;'>
<div id='ichart-render'></div>
</body>
</html>