echarts饼图

<div id="main2"style="width: 250px;height:200px;"></div>

   <script type="text/javascript">

       var myChart = echarts.init(document.getElementById('main2'));

       // 指定图表的配置项和数据

       var option = {

           tooltip : { //提示框组件

                trigger: 'item', //触发类型(饼状图片就是用这个)

                formatter: "{a}<br/>{b} : {c} ({d}%)" //提示框浮层内容格式器

           },

           color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'],  //手动设置每个图例的颜色

            legend: {  //图例组件

                //right:100,  //图例组件离右边的距离

                orient : 'horizontal',  //布局  纵向布局 图例标记居文字的左边 vertical则反之

                width:40,      //图行例组件的宽度,默认自适应

                x : 'right',   //图例显示在右边

                y: 'center',   //图例在垂直方向上面显示居中

                itemWidth:10,  //图例标记的图形宽度

                itemHeight:10, //图例标记的图形高度

               data:['30%','10%','15%','20%','25%'],

                textStyle:{    //图例文字的样式

                    color:'#333',  //文字颜色

                   fontSize:12    //文字大小

                }

           },

           series : [ //系列列表

                {

                    name:'随访次数',  //系列名称

                    type:'pie',   //类型 pie表示饼图

                    center:['30%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置

                    radius : ['50%','70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形

                    itemStyle : {  //图形样式

                        normal : { //normal 是图形在默认状态下的样式；emphasis是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

                            label : {  //饼图图形上的文本标签

                                show :false  //平常不显示

                            },

                            labelLine : {     //标签的视觉引导线样式

                                show : false  //平常不显示

                            }

                        },

                        emphasis : {   //normal 是图形在默认状态下的样式；emphasis是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

                            label : {  //饼图图形上的文本标签

                                show : true,

                                position :'center',

                                textStyle : {

                                    fontSize :'10',

                                    fontWeight: 'bold'

                                }

                            }

                        }

                    },

                    data:[

                        {value:30, name:'30%'},

                        {value:10, name:'10%'},

                        {value:15, name:'15%'},

                        {value:20, name:'20%'},

                        {value:25, name:'25%'}

                    ]

                }

           ]

       }

       myChart.setOption(option);

   </script>

</div>

  

动态更新

option.itemStyle().normal().color("function(params){varcolorList=['#60fb88','#6490ff','#ffb458','#9c96b5','#56c5f9','#ffe764','#ff6888'];return colorList[params.dataIndex];}");

boundary在非类目轴只有true和false两种，faLse就是贴边没有边距，true就是如图的间距

 

Boundary //数值轴两端的空白策略

 

内部图表大小是与div容器大小相关的，如果想调整图表大小，调整div就可以了，如果是想调整图表与div间上下左右留白，则设置grid属性就可以了。

  myChart.setOption({  

                title:{

                    text:"价格指数"

                },

                grid:{

                    x:25,

                    y:45,

                    x2:5,

                    y2:20,

                    borderWidth:1

                },

                ....

 

 

在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的，如下图所示： 

 

然而，很多时候我们为了使界面更加美观，通常会有使每个柱子颜色都不相同的需求。那么这时候，我们需要在itemStyle的normal状态下，首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量，则柱子会循环使用设定的颜色。 
代码如下： 
itemStyle: { 
normal: { 
color: function(params) { 
//首先定义一个数组 
var colorList = [ 
'#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', 
'#B74AE5','#0AAF9F','#E89589' 
]; 
return colorList[params.dataIndex] 
}, 
//以下为是否显示 
label: { 
show: false 
} 
} 
} 

 

yAxis.interval number

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。

echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。如下图，当横轴时间为13天时，echarts会自动隔天显示

 

如果我们想显示全，则需要在xAxis 属性加上axisLabel:{interval: 0}

 

1.  "axisLabel":{  

2.             interval: 0  

3.         }  

 

  

 

设置指示线：

1. series : [  

2.         {  

3.             name: '访问来源',  

4.             type: 'pie',  

5.             radius : '55%',  

6.             center: ['50%', '60%'],  

7.             labelLine:{    

8.                 normal:{    

9.                     length:5    

10.                 }    

11.             },    

 

标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。

 

文本标签：label有normal,emphasis两个状态；

标签的视觉引导线：labelLine有normal,emphasis两个状态

itemStyle（图形样式）有normal,emphasis两个状态；

 

series[i]-pie.center Array

[ default: ['50%', '50%'] ]

饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。

支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。

使用示例：

// 设置成绝对的像素值

center: [400, 300]// 设置成相对的百分比

center: ['50%', '50%']