echarts饼图
时间：2022-10-18 23:00:00
1、option配置项
computed: { pieOption() { let option = { graphic: [ { type: 'image', left: 'center', top: 'center', style: { width: 150, height: 150, }, }, ], legend: { left: 'center', bottom: '1%', textStyle: { fontSize: 26, color: () => {}, }, }, tooltip: { trigger: 'item', }, label: { fontSize: 26, }, series: [ { radius: ['30%', '53%'], center: ['47%', '48%'], color: ['#44dbf7', '#ff9d00', '#e95a54', '#40c100', '#4474f1'], type: 'pie', itemStyle: { borderColor: '#201e18', borderWidth: 3, }, label: { normal: { show: true, // formatter: "{c}%", formatter: function(params) { return params.name '\n\n' params.value '项' }, textStyle: { fontSize: 30, color: '#ddbd97', }, position: 'outside', }, emphasis: { show: true, }, }, labelLine: { normal: { show: true, length: 18, length2: 45, lineStyle: { color: '#ddbd97', }, }, emphasis: { show: true, }, }, data: this.pieData, }, { radius: ['30%', '34%'], center: ['47%', '48%'], type: 'pie', label: { normal: { show: false, }, emphasis: { show: false, }, }, labelLine: { normal: { show: false, }, emphasis: { show: false, }, }, animation: false, tooltip: { show: false, }, data: [ { value: 1, itemStyle: { color: 'rgba(250,250,250,0.3)', }, }, ], }, { name: 外框， type: 'pie', clockWise: false, //顺时加载 hoverAnimation: false, ///鼠标移入变大 center: ['47%', '48%'], radius: ['60%', '60%'], label: { normal: { show: false, }, }, data: [ { value: 9, name: '', itemStyle: { normal: { borderWidth: 2, borderColor: '#73624e', }, }, }, ], }, // { // type: 'pie', // // radius: ['48%', '92%'], // radius: ['39%', '62%'], // center:['49%', '52%'], // color:['#3dc5d1', '#ee4e40', '#fbb321'], // itemStyle: { // borderColor: '#201f1d', // borderWidth: 9, // }, // data: this.pieData, // labelLine:{ // show:false // } // }, // { // type: 'pie', // avoidLabelOverlap: true, //避免重叠标签 // // radius: ['48%', '92%'], // radius: ['39%', '62%'], // center:['49%', '52%'], // color:['#3dc5d1', '#ee4e40', '#fbb321'], // itemStyle: { // borderColor: '#201f1d', // borderWidth: 9, // }, // label: { // show: true, // position: 'inner', // color:'#fff', // fontSize: '24', // formatter: '{d}%', // fontWeight:'bold', // }, // data: this.pieData, // labelLine:{ // show:false // } // } ], } return option }, barOption() { let option = { graphic: [ { type: 'image', left: 'center',
top: 'center',
style: {
width: 150,
height: 150,
},
},
],
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 18,
},
},
legend: {
bottom: '1%',
textStyle: {
fontSize: 26,
color: () => {}, //使图例文字颜色和图例颜色对应的相同
},
},
label: {
fontSize: 26,
},
series: [
{
radius: ['30%', '53%'],
center: ['52%', '48%'],
color: ['#44dbf7', '#ff9d00', '#e95a54', '#40c100', '#4474f1'],
type: 'pie',
itemStyle: {
borderColor: '#201e18',
borderWidth: 3,
},
label: {
normal: {
show: true,
formatter: function(params) {
return params.name + '\n\n' + params.value + '项'
},
textStyle: {
fontSize: 30,
color: '#ddbd97',
},
position: 'outside',
},
emphasis: {
show: true,
},
},
labelLine: {
normal: {
show: true,
length: 18,
length2: 45,
lineStyle: {
color: '#ddbd97',
},
},
emphasis: {
show: true,
},
},
data: this.secondPieData,
},
{
radius: ['30%', '34%'],
center: ['52%', '48%'],
type: 'pie',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
animation: false,
tooltip: {
show: false,
},
data: [
{
value: 1,
itemStyle: {
color: 'rgba(250,250,250,0.3)',
},
},
],
},
{
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['52%', '48%'],
radius: ['60%', '60%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#73624e',
},
},
},
],
},
// {
// type: 'pie',
// radius: ['39%', '62%'],
// center:['49%', '50%'],
// itemStyle: {
// borderColor: '#201f1d',
// borderWidth: 9,
// normal:{
// color:function(params){
// if(params.name=='验收销号'){
// params.data.itemStyle={
// color : '#01e17e'
// }
// }else if(params.name=='按期进行'){
// params.data.itemStyle={
// color : '#fbb321'
// }
// }else{
// params.data.itemStyle={
// color : '#ee4e40'
// }
// }
// }
// }
// },
// data: this.secondPieData,
// labelLine:{
// show:false
// }
// },
// {
// type: 'pie',
// radius: ['39%', '62%'],
// center:['49%', '50%'],
// itemStyle: {
// borderColor: '#201f1d',
// borderWidth: 9,
// normal:{
// color:function(params){
// if(params.name=='验收销号'){
// params.data.itemStyle={
// color : '#01e17e'
// }
// }else if(params.name=='按期进行'){
// params.data.itemStyle={
// color : '#fbb321'
// }
// }else{
// params.data.itemStyle={
// color : '#ee4e40'
// }
// }
// }
// }
// },
// data: this.secondPieData,
// labelLine:{
// show:false
// },
// label: {
// show: true,
// position: 'inner',
// color:'#fff',
// fontSize: '24',
// formatter: '{d}%',
// fontWeight:'bold',
// },
// },
],
//以下是柱状图
// tooltip: {
// trigger: "axis",
// axisPointer:{
// type:'none' //去掉鼠标悬浮时中间那条线
// }
// },
// grid:{
// left:'9%',
// // top:20,
// right:0,
// bottom:'6%',
// },
// xAxis:{
// type:'category',
// data: this.xAxisData,
// axisLabel:{
// color:'#988368',
// fontSize:30,
// },
// axisTick:{
// show:false
// },
// axisLine:{
// lineStyle:{
// color:"#9c8c7c",
// width:2
// }
// }
// },
// yAxis:{
// type:'value',
// splitNumber:5,
// splitLine:{
// show:true,
// lineStyle:{
// color:"#615b4b"
// }
// },
// axisLabel:{
// color:'#988368',
// fontSize:30,
// },
// axisTick:{
// show:false
// },
// axisLine:{
// lineStyle:{
// color:"#9c8c7c",
// width:2
// }
// }
// },
// label:{
// color:'#988368',
// fontSize:30
// },
// barWidth:47, //柱子宽度
// series:[
// {
// name:'已完成',
// type:'bar',
// data:this.yAxisData1,
// },
// {
// name:'治理中',
// type:'bar',
// data:this.yAxisData2,
// },
// ]
}
return option
},
},
2、使用computed配置项
initPie() {
let _this = this
let myChart = this.$echarts.init(this.$refs.left_Pie)
myChart.setOption(this.pieOption)
myChart.off('click')
myChart.on('click', function(value) {
this.leftTypeName = value.name
_this.getqueryImportantI(this.leftTypeName)
})
},
3、在接口获取数据后，调用initPie
this.$nextTick(() => {
this.initPie()
this.initBar()
})
