echarts里面的参数解释_echarts图之饼图中各种参数的含义以及设置方法

echarts饼图

/*注意必须要给饼图存放的父元素设置高度 也可以设置宽度*/

#pie{

width:500px;

height:200px;

background-color: pink;

}

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

var option = {

title: {

text: '饼图',

left: 'right',

textStyle: { //标题内容的样式

color: '#000',

fontStyle: 'normal',

fontWeight: 100,

fontSize: 16 //主题文字字体大小，默认为18px

},

},

tooltip: {

formatter: "{b} : {c} ({d}%)"//鼠标划过时饼状图上显示的数据 一般样式为 name: value (所占百分比)

},

legend: {//图例 标注各种颜色代表的模块

orient: 'vertical',//图例的显示方式 默认横向显示

bottom: 0,//控制图例出现的距离 默认左上角

left: 'left',//控制图例的位置

itemWidth: 16,//图例颜色块的宽度和高度

itemHeight: 12,

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

color: '#000',

fontSize: 16

},

data: ['班级一', '班级二', '班级三']//图例上显示的饼图各模块上的名字

},

color: ['#FE3A64', '#79E454','#F98C62','#4D5DFD'],//饼图中各模块的颜色

series: [{

type: 'pie',//echarts图的类型 pie代表饼图

radius: '80%',//饼图中饼状部分的大小所占整个父元素的百分比

center: ['50%', '50%'],//整个饼图在整个父元素中的位置

selectedMode: 'single',

itemStyle: {

normal: {

label: {

show: false,//饼图上是否出现标注文字 标注各模块代表什么 默认是true

// position: 'inner',//控制饼图上标注文字相对于饼图的位置 默认位置在饼图外

},

labelLine: {

show: false//官网demo里外部标注上的小细线的显示隐藏 默认显示

}

}

},

data: [//每个模块的名字和值

{ value: 40, name: '班级一' },

{ value: 35, name: '班级二' },

{ value: 25, name: '班级三' }

]

}]

};

myChart.setOption(option);