function chartTopPie() {
var myChart = echarts.init(document.getElementById('char-top-pie'));
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0,0,0,0)",
borderWidth: 0
},
emphasis: {
color: "rgba(0,0,0,0)",
borderWidth: 0
}
};
var dataStyle = {
normal: {
formatter: '{c}%',
position: 'center',
show: true,
textStyle: {
fontSize: '28',
fontWeight: 'normal',
color: '#fff'
}
}
};
var option = {
title: [
{
text: '年度合同总收入',
left: '30%',
bottom: '5%',
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: '16',
color: '#fff',
textAlign: 'center'
},
subtext: '45206元',
subtextStyle: {
fontWeight: 'normal',
fontSize: '14',
color: '#fff',
textAlign: 'center'
}
},
{
text: '年度营业总收入',
left: '75%',
bottom: '5%',
textAlign: 'center',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: '16',
textAlign: 'center'
},
subtext: '85101元',
subtextStyle: {
fontWeight: 'normal',
fontSize: '14',
color: '#fff',
textAlign: 'center'
}
}
],
series: [
{
type: 'pie',
hoverAnimation: false, //鼠标经过的特效
radius: [
'35%',
'47%'
],
center: [
'30%',
'40%'
],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [
{
value: 46.5,
itemStyle: {
normal: {
color: '#00BAFF'
}
},
label: dataStyle
},
{
value: 53.5,
itemStyle: placeHolderStyle
}
]
},
{
type: 'pie',
hoverAnimation: false,
radius: [
'36%',
'47%'
],
center: [
'75%',
'40%'
],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [
{
value: 10.5,
itemStyle: {
normal: {
color: '#7446ED'
}
},
label: dataStyle
},
{
value: 89.5,
itemStyle: placeHolderStyle
}
]
},
//外圈的边框
//外圈的边框
{
// name: '总人数',
type: 'pie',
hoverAnimation: false, //鼠标经过的特效
radius: [
'45%',
'48%'
],
center: [
'30%',
'40%'
],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [
{
value: 100,
itemStyle: {
normal: {
color: '#00BAFF'
}
}
}
]
},
{
type: 'pie',
hoverAnimation: false,
radius: [
'45%',
'48%'
],
center: [
'75%',
'40%'
],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [
{
value: 100,
itemStyle: {
normal: {
color: '#7446ED'
}
}
}
]
}
]
};
myChart.setOption(option)
window.addEventListener("resize", () => {
myChart.resize();
});
}
function chartTopPie() {
var myChart = echarts.init(document.getElementById('char-top-pie'));
var data = [
{
'name': '营业总收入',
'value': 5600
},
{
'name': '营业总成本',
'value': 3600
},
{
'name': '营业总利润',
'value': 1500
}
]
var seriesObjs = [];
var r = 60;
var color = [
'#0B7EF2',
'#08B3FF',
'#6DE0CF'
];
var placeHolderStyle = {
normal: {
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0.1)',
borderWidth: 5
}
}
for (var i = 0; i < data.length; i++) {
var seriesObj = {
name: data[i].name,
type: 'pie',
clockWise: false,
radius: [
r - 1 - i * 20,
r - i * 20
],
center: [
'20%',
'40%'
],
itemStyle: {
normal: {
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
borderWidth: 5,
borderColor: color[i]
}
},
hoverAnimation: false,
data: [
{
value: data[i].value
},
{
value: data[0].value * 4 / 3 - data[i].value,
name: 'invisible',
itemStyle: placeHolderStyle
}
]
}
seriesObjs.push(seriesObj)
}
var option = {
color: color,
title: [
{
text: '年度',
left: '15%',
bottom: '2%',
textStyle: {
fontWeight: 'normal',
fontSize: '16',
color: '#fff',
textAlign: 'center'
}
}
],
tooltip: {
show: false,
formatter: '{a} : {c}'
},
legend: {
show: true,
top: "22%",
right: '5%',
width: 200,
data: [
'营业总收入',
'营业总成本',
'营业总利润'
],
itemWidth: 15,
itemHeight: 15,
itemGap: 15,
formatter: function (name) {
return name + ' ' + data.find(function (e) {
if (e.name === name) return e
}).value + '万元'
},
textStyle: {
fontSize: 15,
color: "#ffffff"
}
},
series: seriesObjs
}
myChart.setOption(option)
window.addEventListener("resize", () => {
myChart.resize();
});
}
function chartDashboard2() {
var myChart = echarts.init(document.getElementById('char-dashboard2'));
var option = {
title: [{
text: '公司年度计划',
bottom: 100,
left: '35%',
padding: [-30, 0],
textStyle: {
color: '#fff',
fontSize: 14,
align: 'center'
}
}
],
"toolbox": {
"show": false,
"feature": {
"mark": {
"show": true
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"series": [{
"name": "指标",
"type": "gauge",
"startAngle": 180, //总的360,设置180就是半圆
"endAngle": 0,
min: 0,
max: 100,
"center": ["50%", "70%"], //整体的位置设置
"radius": 100,
"axisLine": {
"lineStyle": {
"width": 30, //柱子的宽度
"color": [[0.558, "#E85252"], [1, "rgba(0,0,0,0.3)"]] //0.298是百分比的比例值(小数),还有对应两个颜色值
}
},
"axisTick": {
"show": false
},
axisLabel: {
color: '#ffffff',
show: true,
padding: [30, 0, 0, 0],
fontSize: 12,
distance: -35,
formatter(value) {
if (value === 0 || value === 100) {
return value + '.00%';
}
}
},
"splitLine": {
"show": false
},
"pointer": {
"show": false,
},
"title": {
"show": true,
"offsetCenter": [0, "-35%"], //标题位置设置
"textStyle": { //标题样式设置
"color": "#ffffff",
"fontSize": 18,
"fontFamily": "微软雅黑",
"fontWeight": "bold"
},
},
"detail": {
"show": false
},
"data": [{ //显示数据
"value": 55.8,
"name": "8,524万元"
}]
}]
};
myChart.setOption(option)
window.addEventListener("resize", () => {
myChart.resize();
})
}