console
var mainChart;
mainChart = echarts.init(document.getElementById("main"));
$(function(){
mainChart.resize();
showMyChart();
});
mainChart.showLoading({text: '正在努力的读取数据中...'});
function showMyChart() {
mainChart.hideLoading();
var option = {
color: ['#3398DB','#d14a61'],
title: {
text: 'echart-多饼图',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['一分厂','二分厂','三分厂','四分厂','五分厂']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'一分厂',
type:'pie',
radius : [10, 50],
center : ['25%', '30%'],
data:[
{value:85, name:'合格'},
{value:15, name:'不合格'},
]
},
{
name:'二分厂',
type:'pie',
radius : [10, 50],
center : ['50%', '30%'],
data:[
{value:95, name:'合格'},
{value:5, name:'不合格'},
]
},{
name:'三分厂',
type:'pie',
radius : [10, 50],
center : ['75%', '30%'],
data:[
{value:82, name:'合格'},
{value:18, name:'不合格'}
]
},{
name:'四分厂',
type:'pie',
radius : [10, 50],
center : ['62%', '62%'],
data:[
{value:65, name:'合格'},
{value:35, name:'不合格'},
]
},{
name:'五分厂',
type:'pie',
radius : [10, 50],
center : ['35%', '62%'],
data:[
{value:60, name:'合格'},
{value:40, name:'不合格'}
]
}
]
};
mainChart.setOption(option);
}
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
<div id="main" style="width:600px;height:400px;margin-top:10px;"> </div>