echarts饼状图mysql_echarts饼状图案例

$(function() {//临时数据

var tempData =[{

value:5,

name:'工伤保险信息10项'},

{

value:16,

name:'失业保险信息8项'},

{

value:15,

name:'医疗保险信息9项'},

{

value:10,

name:'生育保障9项'},

{

value:15,

name:'养老保险11项'}

];//最终输出数据

var result =[];//颜色

var color=['#00F0FF', '#00FFD8', '#00FF78', '#0083FE', '#00BFFF'];//间隔数据的样式

var placeHolderStyle ={

normal: {

label: {

show:false},

labelLine: {

show:false},

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

borderColor:'rgba(0, 0, 0, 0)',

borderWidth:0}

};//循环加入间隔数据

for (var i = 0; i < tempData.length; i++) {

result.push({

value: tempData[i].value,

name: tempData[i].name,

itemStyle: {

normal: {

borderWidth:2,

shadowBlur:20,

borderColor:color[i],

shadowColor: color[i]

}

}

}, {

value:2,

name:'',

itemStyle: placeHolderStyle//间隔数据

});

}//设置字体样式

var rich ={

b: {//名字

fontSize: 18,

color:'#aae8ff',

align:'left',

padding:2},

hr: {//分割线

borderColor: '#00ffff',

width:'100%',

borderWidth:1,

height:0},

w: {//数据存量

fontSize: 18,

color:'#aae8ff',

align:'left',

padding:2},

c: {//数据

fontSize: 18,

align:'center',

padding:2,

color:'#53C6F2'},

a: {//单位

fontSize: 18,

align:'center',

padding:2,

color:'#53C6F2'}

}var option ={

backgroundColor:'transparent',//画布背景色

tooltip: { //提示框

trigger: 'item',

formatter:"{b} : {d}%"

//formatter: "{b} : {d}%
{c}"

},

series: [{

type:'pie',

radius: ['50%', '60%'],//内 外圆半径

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

color: ['#00F0FF', '#00FFD8', '#00FF78', '#0083FE', '#00BFFF'],//色块填充颜色

itemStyle: {

normal: {

label: {

show:true,

position:'outside',

color:'#ddd',

formatter:function(params) {var percent = 0;var total = 0;for (var i = 0; i < tempData.length; i++) {

total+=tempData[i].value;

}

percent= ((params.value) * 1000).toFixed(0);if(params.name !== '') {return '{b|'+params.name+'} \n {hr|} \n {w|数据存量:} {c|'+percent+'} {a|条}'}else{return '';

}

},

rich: rich

},

labelLine: {

length:20,

length2:30,

show:true,

color:'#00ffff'}

}

},

data: result/*labelLine: {

normal: {

show: true,

length: 20,

length2: 30,

lineStyle: {

color: '#CCCCCC',

width: 2

}

}

},*/

/*label: {

normal: {

//formatter: '{b|{b}} \n {hr|} \n {w|数据存量:} {c|{c}%} {a|条}',

formatter: '{b|{b}} \n {hr|} \n {w|数据存量:} {c|{c}} {a|条}',

rich: {

b: { // 名字

fontSize: 18,

color: '#94C8DC',

align: 'left',

padding: 2

},

hr: { // 分割线

borderColor: '#CCCCCC',

width: '100%',

borderWidth: 2,

height: 0

},

w: { // 数据存量

fontSize: 18,

color: '#94C8DC',

align: 'left',

padding: 2

},

c: { // 数据

fontSize: 18,

align: 'center',

padding: 2,

color: '#53C6F2'

},

a: { // 单位

fontSize: 18,

align: 'center',

padding: 2,

color: '#53C6F2'

}

} //rich end

}

} //lable end*/}

]//series end

};//option end

var myChart = echarts.init(document.getElementById("bottom"));

myChart.setOption(option);

})