echarts 饼图移动端_echarts移动端中例子总结。

var mytopics = echarts.init(document.getElementById('topic-main'));

//设置你的饼图每一个圈的样式var dataStyle ={

normal: {

label: {

show:false},

labelLine: {

show:false}

}

};var placeHolderStyle ={

normal: {

color:'rgba(0,0,0,0)',

label: {

show:false},

labelLine: {

show:false}

},

emphasis: {

color:'rgba(0,0,0,0)'}

};var option ={

title: { //标题的样式

text:'课程总练习量',

x:'center',

y:'60%',

itemGap:30,

textStyle: {

color:'rgba(30,144,255,0.8)',

fontFamily:'微软雅黑',

}

},

tooltip: {//鼠标移动上去之后显示的样式(提示语)

show:true,//position: ['20%', '50%'],

confine:true, //在移动端，提示框中的内容如果长了就会移动到窗口外，所以该参数是限制提示框始终在窗口内

formatter:"{a}
{b} : {c} ({d}%)",//这个是提示框上的文字，如果不写，也能出来，但是写了就得自己定义显示的内容

},

legend: { //它是图形最顶层的三个小方块每一个颜色所代表的东西//x : '66%',

//y : '15%',

data: dataname //数据，dataname=['练习量','占用率']，数组形式

},

dataZoom: {

show:true,

start:30,

end:100},

series: [{ //每一个所代表的数据，三个对象

name:'1',

type:'pie',

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

clockWise:false,

radius: ['65%', '80%'],

itemStyle: dataStyle,

data: [{ //两个对象所代表的是一般是想显示的东西，另一半就是剩下的百分比

value: datavalue[0],

name: dataname[0]

}, {

value: datasurplusvalue[0],

name: datasurplusname[0],

itemStyle: placeHolderStyle

}]

}, {

name:'2',

type:'pie',

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

clockWise:false,

radius: ['50%', '65%'],

itemStyle: dataStyle,

data: [{

value: datavalue[1],

name: dataname[1]

}, {

value:datasurplusvalue[1],

name: datasurplusname[1],

itemStyle: placeHolderStyle

}]

}, {

name:'3',

type:'pie',

clockWise:false,

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

radius: ['35%', '50%'],

itemStyle: dataStyle,

data: [{

value: datavalue[2],

name: dataname[2]

}, {

value: datasurplusvalue[2],

name: datasurplusname[2],

itemStyle: placeHolderStyle

}]

}]

};

mytopics.setOption(option);