<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script>
<style>
#demo {
width: 450px;
height: 300px;
}
#fullScreenMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #ffffff;
}
#fullScreen {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo"></div>
<!--全屏显示的容器-->
<div id="fullScreenMask">
<div id="fullScreen"></div>
</div>
</body>
<script>
var chart = echarts.init(document.getElementById('demo'));
var chartScreen = null;
var option = {
backgroundColor: 'rgba(70, 131, 254, .3)',
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"+ '人' +" ({d}%)"
},
legend: {
icon: 'rect',
itemWidth: 12,
itemHeight: 12,
type: 'scroll',
textStyle:{
color:'#ffffff',
fontSize:12
},
orient: 'vertical',
data:[],
selected:{},
right: 10,
top: 30,
bottom: 20,
formatter: function (name) {
return echarts.format.truncateText(name, 90, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
},
toolbox: {
itemSize:16,
showTitle:false,
right:24,
feature: {
saveAsImage: {},
myTool: {
show: true,
title: '全屏显示',
icon: 'image://img/fullscreen.png',
onclick: function (){
if (setFullScreenToolBox(option)) {
console.log(chartScreen)
getChartData(chartScreen,false);
}
}
}
}
},
series: [
{
name:'人员部署',
type:'pie',
barWidth: '30%',
radius: ['50%', '70%'],
center:['40%', '50%'],
label: {
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
},
emphasis: {
show: true,
fontWeight: 'bold'
}
},
itemStyle:{
normal:{
color:function(params) {
var colorList = ['#E09C19','#E63234','#6AC3F1','#DD6B25','#D4E019','#009944','#6A8DF1','#C535A8','#6D54E9','#67E682','#E954CF','#CAF161'];
return params.dataIndex >= colorList.length-1 ? "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16):colorList[params.dataIndex];
},
}
},
data:[]
}
]
};
chart.setOption(option);
getChartData(chart,true) ;
function getChartData(chart,bool) {
var result = {
data:[
{
count: 5,
name: "部门一",
},
{
count: 15,
name: "很长名字的部门很长名字的部门很长名字的部门",
},
{
count: 5,
name: "部门二",
},
{
count: 5,
name: "部门三",
},
{
count: 55,
name: "很长很长名字的部门",
},
{
count: 5,
name: "财务部",
},
{
count: 5,
name: "行政部",
},
{
count: 5,
name: "很长名字的部门",
},
{
count: 588,
name: "人力部",
},
{
count: 5,
name: "销售部",
},
{
count: 5,
name: "运营部",
},
{
count: 5,
name: "很长名字的部门很长名字的部门",
},
{
count: 25,
name: "部门五",
},
{
count: 85,
name: "部门6",
},
{
count: 55,
name: "部门7",
},
{
count: 55,
name: "部门8",
},
{
count: 555,
name: "部门9",
},
]
}
var _count = [], _name = [] ,_selected = {};
if (result.data.length > 0) {
$.each(result.data,function (i,v) {
var proname = v.name;
_count.push({value:v.count, name:proname});
_name.push(proname);
bool && (i < 5 ?_selected[proname] = true : _selected[proname] = false);
});
chart.setOption({
legend: {
data:_name,
selected:_selected
},
series: [
{
data:_count
}
]
});
}
}
function setFullScreenToolBox(option) {
if ($('#fullScreenMask').css('display') === 'block') {
$('#fullScreenMask').hide();
ChartScreen = null;
return false;
}
$('#fullScreenMask').show();
chartScreen = echarts.init(document.getElementById('fullScreen'));
chartScreen.setOption(option);
chartScreen.setOption({
toolbox: {
feature: {
myTool: {
title: '退出全屏',
icon: 'image://img/fullscreen.png',
}
}
}
});
return true;
}
window.onresize = function () {
chartScreen.resize()
}
</script>
</html>
Processed:
0.015, SQL:
9
