关于echarts的饼状体

来源:互联网 发布:淘宝购物车营销不见了 编辑:程序博客网 时间:2024/05/21 04:43
function showPieChart3(){
var pieChart=echarts.init(document.getElementById('tu1'));
var option = {
title : { //设置标题
     text: '某站点用户访问来源22',
     subtext: '纯属虚构',
     x:'center',//标题的x轴位置,可选为left,right,center,还可以用left来代替x
     y:'top',//标题的y轴位置,可选top,center,bottom,还可以用top来代替y
     textStyle: {
           color: '#c2c6cf',//设置字体颜色
           fontSize:'20',//设置字体的大小
           fontFamily:'宋体'//设置字体样式
       }
    },
    //backgroundColor:'red',//不设置渐变色
backgroundColor://第一个(0.5)参数是x轴位置,第二个参数(0.5)是y轴位置,第三个参数(0.5)是半径的大小
new echarts.graphic.RadialGradient(0.5, 0.5, 0.5,  [{
         offset: 0, color: 'white' // 开始的颜色,offset为透明度,1表示不透明,0代表完全透明
       }, {
         offset: 1, color: 'red' //  结束的颜色,100% 处的颜色
       }], false),//这个false表示使这个渐变色生效,可以不写,如果写成true则渐变颜色失效
 
legend: {
show:true,//是否显示,默认为true
orient: 'horizontal',//这两个小图标是水平显示(horizontal),还是垂直显示(vertical),默认为水平显示horizontal
data: ['本地车', '外地车'],
x:'center',//水平安放位置,默认为全图右对齐,可选值为center,left,right;还可以用left来代替x
y:'bottom',//垂直安放位置,默认为全图顶端,可选为top,bottom,center;还可以用top来代替y
padding:100,//工具箱内边距,单位px,现在可使这个标签距离最近的两个间距为100px
itemWidth: 10, // 图例图形宽度
itemHeight: 10,// 图例图形高度
       textStyle: {
           color: '#c2c6cf',//设置字体颜色
           fontSize:'15',//设置字体的大小
           fontFamily:'华文琥珀'//设置字体样式
       }
},
 
tooltip : {  
show:true,//当鼠标放在饼图上时,是否需要显示提示信息,默认为true
trigger: 'item',//触发类型,默认为item(数据触发),即只显示该点的数据;还可以为axis,显示坐标轴该点下对应的所有数据
formatter: "{a}<br/> {b} : {c} ({d}%)"//a,b,c,d所表示的内容在下面已经标注出来了,a(系列名称),b(数据项名称),c(数值), d(百分比)
/* formatter:function(params) { 
return params[0].name + ” : ” + params[0].value; //自定义的需要显示的东西 
} */
},

series : [
          {
           name: '访问来源',//a
           type: 'pie',//显示的类型,饼状图是pie,不同的图形不同的type
           radius : '50%',//设置圆圈的大小
           center: ['50%', '50%'],//距离左边和上边的间距百分比
           data:[
               {
               value:30,//c
               name:'本地车',//b
               itemStyle:{
                   normal:{
                   color:'white',
                   /*textStyle: {
                    fontSize:'100'
                   }饼状图不支持改变饼状图内部的字体样式,即设置字体大小失效(本地车,外地车失效)*/
                   }
               },
               
               },
               {
               value:50, 
               name:'外地车', 
               itemStyle:{
               normal:{
               color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//这个地方的渐变和上面的渐变不同,需要注意
                       offset: 0, color: 'yellow' // 开始的颜色,0010从左向右渐变,0001从上向下渐变,1000从下向上渐变等等
                   }, {
                     offset: 1, color: 'red' // 结束的颜色
                   }], false),//这个false表示使这个渐变色生效,可以不写,如果写成true则渐变颜色失效
               }
               },
               },
              
           ],
       }
    ]
};




pieChart.setOption(option);
}
原创粉丝点击