drawLine () {
console.log($('#echarts1').width())
$('#echarts1').height($('#echarts1').width() * 0.84)
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var pieOption = {
title: '总体情况',
data: [
{
value: 1048,
name: '分类1',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(22, 239, 237, 1)'
},
{
offset: 1,
color: 'rgba(17, 118, 255, 1)'
}
])
}
},
{
value: 735,
name: '分类2',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(73, 89, 241, 1)'
},
{
offset: 1,
color: 'rgba(31, 57, 150, 1)'
}
])
}
},
{
value: 580,
name: '路面工程',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(74, 168, 255, 1)'
},
{
offset: 1,
color: 'rgba(72, 111, 255, 1)'
}
])
}
},
{
value: 484,
name: '安全设施',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(22, 239, 237, 1)'
},
{
offset: 1,
color: 'rgba(17, 118, 255, 1)'
}
])
}
},
{
value: 300,
name: '原材料和产品',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(0, 146, 151, 1)'
},
{
offset: 1,
color: 'rgba(46, 207, 133, 1)'
}
])
},
},
{
value: 300,
name: '原材料和产品',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(11, 70, 206, 1)'
},
{
offset: 1,
color: 'rgba(143, 102, 248, 1)'
}
])
},
},
{
value: 300,
name: '原材料和产品',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(46, 144, 255, 1)'
},
{
offset: 1,
color: 'rgba(13, 83, 163, 1)'
}
])
},
},
{
value: 300,
name: '原材料和产品',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(29, 169, 234, 1)'
},
{
offset: 1,
color: 'rgba(44, 219, 206, 1)'
}
])
},
},
],
},
option = {
title: {
text: '40.4%',
// text: '{a| 40.4}' + '{b| %} ',
// formatter: [
// '{a| 40.4}',
// '{b| %}'
// ].join('\n'),
textStyle: {
color: 'rgba(15, 255, 255, 1)',
fontSize: 28
},
itemGap: 20,
left: 'center',
top: 'center',
rich: {
a: {
color: 'rgba(15, 255, 255, 1)',
fontSize: 28
},
b: {
color: 'rgba(154, 171, 209, 1)',
fontSize: 18
},
}
},
tooltip: {
trigger: 'item',
},
series: [
{
type: 'pie',
radius: ['80%', '90%'],
center: ['52%', '50%'],
clockwise: false,
labelLine: {
normal: {
length: 5,
length2: 5,
lineStyle: {
color: '#61b7ce',
},
},
},
label: {
show: false,
color: 'rgba(255,255,255,0.65)',
},
data: pieOption.data ? pieOption.data : 0,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
}