要设置高
const pieChart5 = this.$refs.pieChart5
if (_.has(this.pieChart5, 'id')) {
this.pieChart5.clear()
} else {
this.pieChart5 = this.$echarts.init(pieChart5)
this.pieChart5.resize()
}
this.pieChart5.setOption(this.option5)
window.onresize = this.pieChart5.resize
option5() {
return {
color: '#fff',
grid: {
left: this.fontSize(0.8),
bottom: 0,
top: this.fontSize(0.1),
right: this.fontSize(0.65)
},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data: ['xxxx', '万达', '世纪', '1111'],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: function (value, index) {
const list = [23, 15, 72, 93]
return '{name|' + value + '}\n' + '{valueTxt|' + list[index] + '%}'
},
rich: {
name: {
color: '#fff',
fontSize: this.fontSize(0.1),
lineHeight: this.fontSize(0.2)
},
valueTxt: {
color: '#00FCFC',
fontWeight: 'bold',
fontSize: this.fontSize(0.18)
}
}
}
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 29034, 104970, 131744],
showBackground: true,
backgroundStyle: {
borderRadius: this.fontSize(1),
color: '#31304D'
},
barWidth: this.fontSize(0.12),
itemStyle: {
borderRadius: this.fontSize(1),
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#0099FF' // 0% 处的颜色
},
{
offset: 1,
color: '#00F1FF' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
animationDuration: 5000,
animationDelay: function (idx) {
return idx * 10
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5
}
}
},
要设置高
const pieChart4 = this.$refs.pieChart4
if (_.has(this.pieChart4, 'id')) {
this.pieChart4.clear()
} else {
this.pieChart4 = this.$echarts.init(pieChart4)
this.pieChart4.resize()
}
this.pieChart4.setOption(this.option4)
option4() {
return {
series: [
{
center: ['20%', '40%'],
radius: '60%',
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: false,
clip: false,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#30E1B3' // 0% 处的颜色
},
{
offset: 1,
color: '#36E39B' // 100% 处的颜色
}
],
global: true // 缺省为 false
},
borderWidth: 0
}
},
axisLine: {
lineStyle: {
width: 10,
color: [[1, 'transparent']]
}
},
splitLine: {
show: false,
distance: 0,
length: this.fontSize(0.1)
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: this.fontSize(0.5)
},
data: [
{
value: 20,
name: 'xxxxx',
title: {
show: true,
offsetCenter: [0, '150%'],
color: '#ffffff',
fontSize: this.fontSize(0.13)
}
}
],
title: {
fontSize: this.fontSize(0.14)
},
detail: {
fontSize: this.fontSize(0.16),
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value) + '%'
},
color: '#fff'
}
},
{
center: ['50%', '40%'],
radius: '60%',
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: false,
clip: false,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#30E1B3' // 0% 处的颜色
},
{
offset: 1,
color: '#36E39B' // 100% 处的颜色
}
],
global: true // 缺省为 false
},
borderWidth: 0
}
},
axisLine: {
lineStyle: {
width: this.fontSize(0.1),
color: [[1, 'transparent']]
}
},
splitLine: {
show: false,
distance: 0,
length: this.fontSize(0.1)
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: this.fontSize(0.5)
},
data: [
{
value: 70,
name: '万达',
title: {
show: true,
offsetCenter: [0, '150%'],
color: '#ffffff',
fontSize: this.fontSize(0.13)
}
}
],
title: {
fontSize: this.fontSize(0.14)
},
detail: {
fontSize: this.fontSize(0.16),
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value) + '%'
},
color: '#fff'
}
},
{
center: ['80%', '40%'],
radius: '60%',
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: false,
clip: false,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#30E1B3' // 0% 处的颜色
},
{
offset: 1,
color: '#36E39B' // 100% 处的颜色
}
],
global: true // 缺省为 false
},
borderWidth: 0
}
},
axisLine: {
lineStyle: {
width: this.fontSize(0.1),
color: [[1, 'transparent']]
}
},
splitLine: {
show: false,
distance: 0,
length: this.fontSize(0.1)
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: this.fontSize(0.5)
},
data: [
{
value: 100,
name: '宝龙',
title: {
show: true,
offsetCenter: [0, '150%'],
color: '#ffffff',
fontSize: this.fontSize(0.13)
}
}
],
title: {
fontSize: this.fontSize(0.14)
},
detail: {
fontSize: this.fontSize(0.16),
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value) + '%'
},
color: '#fff'
}
}
]
}
},
设置高
const pieChart3 = this.$refs.pieChart3
if (_.has(this.pieChart3, 'id')) {
this.pieChart3.clear()
} else {
this.pieChart3 = this.$echarts.init(pieChart3)
this.pieChart3.resize()
}
this.pieChart3.setOption(this.option3)
option3() {
return {
// title: {
// text: '柱状图',
// left: 'center'
// },
textStyle: {
color: '#ffffff'
},
color: ['#04feff', '#ff5500'],
grid: {
left: this.fontSize(0.5),
bottom: this.fontSize(0.3),
top: this.fontSize(0.3),
right: this.fontSize(0.3)
},
xAxis: [
{
type: 'category',
data: ['xxxx', '科技', '万达', '有限'],
axisPointer: {
type: 'shadow'
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: 'value',
name: '',
axisLabel: {
formatter: '{value}'
},
splitLine: {
lineStyle: {
color: '#ccc',
opacity: 0.2,
type: 'dashed'
}
}
}
],
barWidth: this.fontSize(0.16),
series: [
{
name: '降水量',
type: 'bar',
data: [12, 8, 20, 12],
itemStyle: {
borderRadius: this.fontSize(1)
},
label: {
show: true,
position: 'top',
color: '#fff',
valueAnimation: true
},
animationDuration: 5000,
animationDelay: function (idx) {
return idx * 10
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5
}
}
},
