echarts legend相关问题

一、饼图中心添加文本信息

通过graphic属性进行设置

graphic:{
  type:'text',
  style:{
    text:'{a|容错率}\n{b|20%}',//可设置多行不同样式的问题，在rich里添加就行
    rich:{
      a:{
        fontSize:14,//字体大小
        fontWeight:'bold',//字体宽
        lineHeight:20,//行高
        align:'center',
        color:'#008c8c'//字体颜色
      },
      b:{
        fontSize:20,
        lineHeight:40,
        fontWeight:'bold',
        align:'center',
        color:'#4A80FF'
      }	
    }
  }
}

二、移除饼图legend的icon

设置legend的icon属性为none

legend:{
	icon:'none'
}

三、自定义legend的icon样式

在legend的data中进行设置，注意：name名称与series中的name名称对应

legend:{
	data:[{
		name:'系列1',
		color:'red'
	},
		{
			name:'系列2',
			color:'blue'
		}
	]
}

将下方option代码粘贴到这里

option = {
  legend: {
    top: 'left',
    left:'0',
    orient:'verticalAlign',
    data: [
      {
        name: '系列1',
        itemStyle: {
          color: 'red'
        }
        // color:'red'
      },
      {
        name: '系列2',
        itemStyle: {
          color: 'blue'
        }
      }
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: '系列1' },
        { value: 38, name: '系列2' }
      ]
    }
  ]
};

四、自定义饼图的legend文本信息及样式

设置legend属性

在formatter中进行设置，可通过设置数组然后转成字符串的形式完成（这里用的Array.prototype.join()）

添加a，b，c，，，，然后在legend下的textStyle中添加rich属性值

legend:{
	formatter:(name)=>{
		//自定义操作
		let arr = [`{a|${name}}`,`{b|100个}`]
		return arr.join('\r') //在同一行
		// return arr.join('\n') //在不同行
	},
	textStyle:{
		color: '#008c8c',
		fontWeight: 'bold',
		rich:{
			a:{
				color:'red'
			},
			b:{
				color:'green'
			}
		}
		
	}
}

将下方option里的代码粘贴到这里

option = {
  legend: {
    top: 'bottom',
    itemWidth: 14,
    formatter: (name) => {
      let arr = ['{a|' + name + '}', '{b|12}'];
      console.log(arr.join('\n'));
      return arr.join('\r');
    },
    textStyle: {
      rich: {
        a: {
          color: 'green'
        },
        b: {
          color: 'blue'
        }
      },
      
    },

    data: [
      {
        name: '系列1'
        // icon:'circle',
      },
      {
        name: '系列2'
      }
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      labelLine: {
        show: false
      },
      data: [
        {
          value: 40,
          name: '系列1',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: 'red' },
              { offset: 1, color: 'green' }
            ])
          }
        },
        { value: 38, name: '系列2' }
      ]
    }
  ]
};

五、设置了pointer为true后仪表盘指针依旧消失的问题

需要设置data属性

series:[{
	type:'gauge',
	pointer:{
		show:true//false属性时会隐藏指针属性
	},
	//添加圆形中心指针
	anchor:{
		show:true,
		size:10,
		itemStyle:{
			borderWidth:5,
			borderColor:'#008c8c'//圆形中心的颜色
		}
	},
	data:[{
		name:'test',
		value:40//必须
	}]
}]

六、饼图图例里添加数据里没有的legend

比如：数据形式

data:[
	{name:'红色',value:20},
	{name:'黄色',value:10},
	{name:'蓝色',value:10}
]

需要展示成：

三原色 40个 红色 20个 黄色 10个 蓝色 10个

此时可以用图层叠加的方式，设置z属性(也不一定不设置，但是三原色要在其他的上方)

series:[
	{
		z:2,
		type:'pie',
		data:[{name:'三原色',value:40}]
	},
	{
		z:2,
		type:'pie',
		data:[
			{name:'红色',value:20},
			{name:'黄色',value:10},
			{name:'蓝色',value:10}
		]
	}
]

七、legend设置对齐

当图例中一个icon对应多行文本时，会出现icon跟文本不对齐的情况，解决方式：设置formatter，改变字符串变成'\n{name}\n{其他内容}'
复制下方代码进行测试点这里

legend:{
	top: '5%',
    left: 'center',
	formatter: (name) => {
		let arr = [`{a|${name}}`,`{b|xxx}`]
		let str = arr.join('\n')
		let tempArr = str.split('\n')
		let result = str
		for(let prop of tempArr){
			result = result.replace(prop,'')
		}
		return result + str
	},
	textStyle:{
      rich:{
        a:{
          color:'red'
        },
        b:{
          color:'green'
        }
      }
    }
}

参考博客
AlanTao—echarts中关于自定义legend图例文字