mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
1036 lines
25 KiB
JavaScript
1036 lines
25 KiB
JavaScript
$(window).load(function(){
|
||
$(".loading").fadeOut()
|
||
})
|
||
|
||
/****/
|
||
$(document).ready(function(){
|
||
var whei=$(window).width()
|
||
$("html").css({fontSize:whei/20})
|
||
$(window).resize(function(){
|
||
var whei=$(window).width()
|
||
$("html").css({fontSize:whei/20})
|
||
});
|
||
});
|
||
|
||
|
||
$(window).load(function(){$(".loading").fadeOut()})
|
||
$(function () {
|
||
echarts_1()
|
||
echarts_2()
|
||
echarts_3()
|
||
echarts_4()
|
||
echarts_5()
|
||
echarts_6()
|
||
pe01()
|
||
pe02()
|
||
pe03()
|
||
|
||
function echarts_1() {
|
||
var myChart = echarts.init(document.getElementById('echarts1'));
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {type: 'shadow'},
|
||
},"grid": {
|
||
"top": "20%",
|
||
"right":"50",
|
||
"bottom":"20",
|
||
"left":"30",
|
||
},
|
||
legend: {
|
||
data: ['字段1', '字段2', '字段3','字段4','字段5','字段6'],
|
||
right: 'center', width:'100%',
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemWidth: 12,
|
||
itemHeight: 10,
|
||
},
|
||
|
||
|
||
|
||
"xAxis": [
|
||
{
|
||
"type": "category",
|
||
data: ['2016', '2017', '2018', '2019'],
|
||
axisLine: { lineStyle: {color: "rgba(255,255,255,.1)"}},
|
||
axisLabel: { textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14', },
|
||
},
|
||
|
||
},
|
||
],
|
||
"yAxis": [
|
||
{
|
||
"type": "value",
|
||
"name": "单位万",
|
||
axisTick: {show: false},
|
||
splitLine: {
|
||
show: false,
|
||
|
||
},
|
||
"axisLabel": {
|
||
"show": true,
|
||
fontSize:14,
|
||
color: "rgba(255,255,255,.6)"
|
||
|
||
},
|
||
axisLine: {
|
||
min:0,
|
||
max:10,
|
||
lineStyle: {color: 'rgba(255,255,255,.1)'}
|
||
},//左线色
|
||
|
||
},
|
||
{
|
||
"type": "value",
|
||
"name": "增速",
|
||
"show": true,
|
||
"axisLabel": {
|
||
"show": true,
|
||
fontSize:14,
|
||
formatter: "{value} %",
|
||
color: "rgba(255,255,255,.6)"
|
||
},
|
||
axisTick: {show: false},
|
||
axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
|
||
splitLine: {show:true,lineStyle: {color:'rgba(255,255,255,.1)'}},//x轴线
|
||
},
|
||
],
|
||
"series": [
|
||
|
||
{
|
||
"name": "字段1",
|
||
"type": "bar",
|
||
"data": [36.6,38.80, 40.84, 41.60],
|
||
"barWidth": "15%",
|
||
"itemStyle": {
|
||
"normal": {
|
||
barBorderRadius: 15,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#8bd46e'
|
||
}, {
|
||
offset: 1,
|
||
color: '#09bcb7'
|
||
}]),
|
||
}
|
||
},
|
||
"barGap": "0.2"
|
||
},
|
||
{
|
||
"name": "字段2",
|
||
"type": "bar",
|
||
"data":[14.8,14.1, 15, 16.30],
|
||
"barWidth": "15%",
|
||
"itemStyle": {
|
||
"normal": {
|
||
barBorderRadius: 15,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#248ff7'
|
||
}, {
|
||
offset: 1,
|
||
color: '#6851f1'
|
||
}]),
|
||
}
|
||
},
|
||
"barGap": "0.2"
|
||
},
|
||
{
|
||
"name": "字段3",
|
||
"type": "bar",
|
||
"data":[9.2,9.1, 9.85, 8.9],
|
||
"barWidth": "15%",
|
||
"itemStyle": {
|
||
"normal": {
|
||
barBorderRadius: 15,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#fccb05'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f5804d'
|
||
}]),
|
||
}
|
||
},
|
||
"barGap": "0.2"
|
||
},
|
||
{
|
||
"name": "字段4",
|
||
"type": "line",
|
||
smooth: true,
|
||
"yAxisIndex": 1,
|
||
"data": [0,6.01, 5.26, 1.48],
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2
|
||
},
|
||
},
|
||
"itemStyle": {
|
||
"normal": {
|
||
"color": "#86d370",
|
||
|
||
}
|
||
},
|
||
|
||
}
|
||
,
|
||
{
|
||
"name": "字段5",
|
||
"type": "line",
|
||
"yAxisIndex": 1,
|
||
|
||
"data": [0, -4.73, 6.38,8.67],
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2
|
||
},
|
||
},
|
||
"itemStyle": {
|
||
"normal": {
|
||
"color": "#3496f8",
|
||
|
||
}
|
||
},
|
||
"smooth": true
|
||
} ,
|
||
{
|
||
"name": "字段6",
|
||
"type": "line",
|
||
"yAxisIndex": 1,
|
||
|
||
"data":[0,-1.09, 8.24, -9.64],
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2
|
||
},
|
||
},
|
||
"itemStyle": {
|
||
"normal": {
|
||
"color": "#fbc30d",
|
||
|
||
}
|
||
},
|
||
"smooth": true
|
||
}
|
||
]
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
|
||
|
||
}
|
||
function echarts_2() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts2'));
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {type: 'shadow'},
|
||
// formatter:'{c}' ,
|
||
},
|
||
grid: {
|
||
left: '0',
|
||
top: '30',
|
||
right: '10',
|
||
bottom: '-20',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
data: ['字段1', '字段2'],
|
||
right: 'center',
|
||
top:0,
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemWidth: 12,
|
||
itemHeight: 10,
|
||
// itemGap: 35
|
||
},
|
||
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
rotate: -90,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize:14,
|
||
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
|
||
},
|
||
|
||
data: ['17年3月', '17年6月', '17年9月', '17年12月', '18年3月', '18年6月', '18年9月', '18年12月', '19年3月', '19年6月', '19年9月', '19年12月']
|
||
|
||
}, {
|
||
|
||
axisPointer: {show: false},
|
||
axisLine: { show: false},
|
||
position: 'bottom',
|
||
offset: 20,
|
||
|
||
|
||
|
||
}],
|
||
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisTick: {show: false},
|
||
// splitNumber: 6,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize:14,
|
||
},
|
||
},
|
||
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: '字段1',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
color: 'rgba(228, 228, 126, 1)',
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(228, 228, 126, .2)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(228, 228, 126, 0)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(228, 228, 126, 1)',
|
||
borderColor: 'rgba(228, 228, 126, .1)',
|
||
borderWidth: 12
|
||
}
|
||
},
|
||
data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10 ]
|
||
|
||
}, {
|
||
name: '字段2',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
|
||
normal: {
|
||
color: 'rgba(255, 128, 128, 1)',
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(255, 128, 128,.2)'
|
||
}, {
|
||
offset:1,
|
||
color: 'rgba(255, 128, 128, 0)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(255, 128, 128, 1)',
|
||
borderColor: 'rgba(255, 128, 128, .1)',
|
||
borderWidth: 12
|
||
}
|
||
},
|
||
data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
|
||
},
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_3() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts3'));
|
||
|
||
option = {
|
||
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['字段1', '字段2', '字段3'],
|
||
right: 'center',
|
||
top:0,
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemWidth: 12,
|
||
itemHeight: 10,
|
||
// itemGap: 35
|
||
},
|
||
grid: {
|
||
left: '0',
|
||
right: '20',
|
||
bottom: '0',
|
||
top:'15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['字段1','字段2','字段3','字段3','字段4','字段5','字段6','字段7','字段8','字段9'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'white'
|
||
|
||
}
|
||
},
|
||
axisLabel: {
|
||
//rotate:-90,
|
||
formatter:function(value){return value.split("").join("\n");},
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize:14,
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)'
|
||
}
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: 'value',
|
||
splitNumber: 4,
|
||
axisTick: {show: false},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.1)'
|
||
}
|
||
},
|
||
axisLabel: {textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize:14,
|
||
}},
|
||
axisLine: {show:false},
|
||
},
|
||
|
||
series: [{
|
||
name: '字段1',
|
||
type: 'bar',
|
||
stack: 'a',
|
||
barWidth: '30',barGap: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#8bd46e', }
|
||
},
|
||
data: [331, 497, 440, 81, 163, 366, 57, 188, 172, 2295]
|
||
},
|
||
{
|
||
name: '字段2',
|
||
type: 'bar',
|
||
stack: 'a',
|
||
barWidth: '30',barGap: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#f5804d',
|
||
barBorderRadius:0, }
|
||
},
|
||
data: [48, -97, 56, -59, 90, 98, 64, 61, -8, 253]
|
||
},
|
||
{
|
||
name: '字段3',
|
||
type: 'bar',
|
||
stack: 'a',
|
||
barWidth: '30',barGap: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#248ff7',
|
||
barBorderRadius:0, }
|
||
},
|
||
data: [ -13, -21, -112, 5, 0, -5, 72, -3, 8, -69]
|
||
}
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_5() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts5'));
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {type: 'shadow'},
|
||
},"grid": {
|
||
"top": "15%",
|
||
"right":"10%",
|
||
"bottom":"20",
|
||
"left":"10%",
|
||
},
|
||
legend: {
|
||
data: ['字段1', '字段2'],
|
||
right: 'center',
|
||
top:0,
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemWidth: 12,
|
||
itemHeight: 10,
|
||
},
|
||
"xAxis": [
|
||
{
|
||
"type": "category",
|
||
|
||
data: ['2016', '2017', '2018', '2019'],
|
||
axisLine: { lineStyle: {color: "rgba(255,255,255,.1)"}},
|
||
axisLabel: { textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14', },
|
||
},
|
||
|
||
},
|
||
],
|
||
"yAxis": [
|
||
{
|
||
"type": "value",
|
||
"name": "单位1",
|
||
splitLine: {show: false},
|
||
axisTick: {show: false},
|
||
"axisLabel": {
|
||
"show": true,
|
||
color: "rgba(255,255,255,.6)"
|
||
|
||
},
|
||
axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//左线色
|
||
|
||
},
|
||
{
|
||
"type": "value",
|
||
"name": "单位2",
|
||
"show": true,
|
||
axisTick: {show: false},
|
||
"axisLabel": {
|
||
"show": true,
|
||
formatter: "{value} %",
|
||
color: "rgba(255,255,255,.6)"
|
||
},
|
||
axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
|
||
splitLine: {show:true,lineStyle: {color:'rgba(255,255,255,.1)'}},//x轴线
|
||
},
|
||
],
|
||
"series": [
|
||
|
||
{
|
||
"name": "字段1",
|
||
"type": "bar",
|
||
"data": [
|
||
18453.35 ,20572.22 ,24274.22 ,30500.00
|
||
],
|
||
"barWidth": "20%",
|
||
|
||
"itemStyle": {
|
||
"normal": {
|
||
barBorderRadius: 15,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#fccb05'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f5804d'
|
||
}]),
|
||
}
|
||
},
|
||
"barGap": "0"
|
||
},
|
||
{
|
||
"name": "字段2",
|
||
"type": "line",
|
||
"yAxisIndex": 1,
|
||
|
||
"data": [0,11.48,18.00,25.65],
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2
|
||
},
|
||
},
|
||
"itemStyle": {
|
||
"normal": {
|
||
"color": "#ff3300",
|
||
|
||
}
|
||
},
|
||
"smooth": true
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_4() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts4'));
|
||
var myColor=['#eb2100','#eb3600','#d0570e','#d0a00e','#34da62','#00e9db','#00c0e9','#0096f3'];
|
||
option = {
|
||
|
||
grid: {
|
||
left: '2%',
|
||
top:'1%',
|
||
right: '5%',
|
||
bottom: '0%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
show: false,
|
||
}],
|
||
yAxis: [{
|
||
axisTick:'none',
|
||
axisLine:'none',
|
||
offset:'7',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.6)',
|
||
fontSize:'14',
|
||
}
|
||
},
|
||
data: ['字段1','字段2','字段3','字段4','字段5','字段6','字段7','字段8','字段9']
|
||
|
||
}, {
|
||
axisTick:'none',
|
||
axisLine:'none',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.6)',
|
||
fontSize:'14',
|
||
}
|
||
},
|
||
data: [1514, 1619, 1623,1968,2158,2456 ,3506,4664,8390]
|
||
|
||
},{
|
||
name:'单位：件',
|
||
nameGap:'50',
|
||
nameTextStyle:{
|
||
color: 'rgba(255,255,255,.6)',
|
||
fontSize:'16',
|
||
},
|
||
axisLine:{
|
||
lineStyle:{
|
||
color:'rgba(0,0,0,0)'
|
||
}
|
||
},
|
||
data: [],
|
||
}],
|
||
series: [{
|
||
name: '条',
|
||
type: 'bar',
|
||
yAxisIndex: 0,
|
||
data: [25,30,34,40,43,48,52,56,70],
|
||
label:{
|
||
normal:{
|
||
show:true,
|
||
position:'right',
|
||
formatter:function(param){
|
||
return param.value + '%';
|
||
},
|
||
textStyle:{
|
||
color: 'rgba(255,255,255,.8)',
|
||
fontSize:'12',
|
||
}
|
||
}
|
||
},
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||
offset: 0,
|
||
color: '#03c893'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0091ff'
|
||
}
|
||
]),
|
||
barBorderRadius: 15,
|
||
}
|
||
},
|
||
z: 2
|
||
}, {
|
||
name: '白框',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
barGap: '-100%',
|
||
data: [99.5,99.5,99.5,99.5,99.5,99.5,99.5,99.5,99.5,99.5],
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'rgba(0,0,0,.2)',
|
||
barBorderRadius:15,
|
||
}
|
||
},
|
||
z: 1
|
||
}]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_6() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts6'));
|
||
|
||
|
||
option = {
|
||
title:{
|
||
text:'5132',
|
||
subtext:'总体',
|
||
x:'center',
|
||
y:'40%',
|
||
textStyle:{
|
||
color:'#fff',
|
||
fontSize:22,
|
||
lineHeight:10,
|
||
},
|
||
subtextStyle: {
|
||
color:'#90979c',
|
||
fontSize:16,
|
||
lineHeight:10,
|
||
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{b} : {c} ({d}%)"
|
||
},
|
||
|
||
visualMap: {
|
||
show: false,
|
||
min: 500,
|
||
max: 600,
|
||
inRange: {
|
||
//colorLightness: [0, 1]
|
||
}
|
||
},
|
||
series: [{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
center: ['50%', '50%'],
|
||
color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
||
data: [{
|
||
"value": 1924,
|
||
"name": "字段名称1"
|
||
}, {
|
||
"value": 1055,
|
||
"name": "字段名称2"
|
||
}, {
|
||
"value": 1532,
|
||
"name": "字段名称3"}
|
||
].sort(function(a, b) {
|
||
return a.value - b.value
|
||
}),
|
||
roseType: 'radius',
|
||
|
||
label: {
|
||
normal: {
|
||
formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
|
||
rich: {
|
||
c: {
|
||
color: 'rgb(241,246,104)',
|
||
fontSize: 20,
|
||
fontWeight:'bold',
|
||
lineHeight: 5
|
||
},
|
||
b: {
|
||
color: 'rgb(98,137,169)',
|
||
fontSize: 14,
|
||
height: 44
|
||
},
|
||
},
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: 'rgb(98,137,169)',
|
||
},
|
||
smooth: 0.2,
|
||
length: 10,
|
||
length2: 20,
|
||
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
|
||
function pe01() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('pe01'));
|
||
var txt=81
|
||
option = {
|
||
title: {
|
||
text: txt+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#fff',
|
||
fontSize: '18'
|
||
}
|
||
},
|
||
color:'rgba(255,255,255,.3)',
|
||
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '80%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: txt,
|
||
name: '已使用',
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#eaff00',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '未使用',
|
||
value: 100-txt
|
||
}]
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
function pe02() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('pe02'));
|
||
var txt=17
|
||
option = {
|
||
title: {
|
||
text: txt+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#fff',
|
||
fontSize: '18'
|
||
}
|
||
},
|
||
color:'rgba(255,255,255,.3)',
|
||
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '80%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: txt,
|
||
name: '已使用',
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#ea4d4d',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '未使用',
|
||
value: 100-txt
|
||
}]
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function pe03() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('pe03'));
|
||
var txt=2
|
||
option = {
|
||
title: {
|
||
text: txt+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#fff',
|
||
fontSize: '18'
|
||
}
|
||
},
|
||
color:'rgba(255,255,255,.3)',
|
||
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '80%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: txt,
|
||
name: '已使用',
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#395ee6',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '未使用',
|
||
value: 100-txt
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|