echarts自定义legend样式

需求：

1. legend排放位置自定义
2. 单独legend设置不同的背景色
3. legend超长文本省略+后面显示对应的value值

效果图

实现方案：
echarts中

let options={
	// 因为要对不同的legend设置不同的定位，所以legend使用数组，不适用对象
	//legend:[]
	legend:this.customPieLegend(this.modelUseCount)
}

js

customPieLegend(arr) {
            // 自定义饼图legend样式，top/left/bcgcolor/
            let legendOptions = []
            for (let i = 0; i < arr.length; i++) {
                let legendItem = {
                    // 设置top:'',left/right:'',给不同的legend定位
                    itemWidth: 10,
                    itemHeight: 10,
                    data: [
                        {
                        	// 此处应该有name属性，通过循环添加--->name:''
                            icon: 'circle'
                        }
                    ],
                    padding: [11.5, 8, 8.5, 12],
                    textStyle: {
                        color: '#545659',
                        fontSize: 14,
                        fontFamily: '微软雅黑',
                        rich: {
                            a: {
                            	// 设置模型name的样式
                                align: 'left',
                                color: '#545659',
                                fontSize: 14,
                                padding: [0, 0, -3, 0],
                                width: 120,
                                verticalAlign: 'middle',
                                align: 'left'
                            },
                            b: {
                            	// 设置value的样式
                                color: '#545659',
                                fontSize: 14,
                                padding: [0, 0, -3, 0],
                                width: 30,
                                align: 'right'
                            }
                        }
                    },
                    formatter: name => {
                    	// 超长文本省略，超过6个字显示...，同时拼接value值
                    	// modelUseCount为饼图数据列表
                        let legendName = name.length > 6 ? name.slice(0, 6) + '...' : name
                        let legendValue = this.modelUseCount.filter(item => item.name == name)[0].value
                        return '{a|' + legendName + '}{b|' + legendValue + '次}'
                    },
                    tooltip: {
                    	// 使用tooltip，鼠标移入legend的时候显示name全称
                        show: true,
                        trigger: 'item',
                        // transitionDuration设置为0，防止浏览器抖动
                        transitionDuration:0
                    }
                }
                legendItem.data[0].name = arr[i].name
                // 案例默认最多显示6个legend，单独给不同的legend设置不同的位置
                if (i == 0) {
                    legendItem.top = '60%'
                    legendItem.left = '0%'
                    legendItem.backgroundColor = '#F5FAFF'
                    // legendItem.backgroundColor='red'
                } else if (i == 1) {
                    legendItem.top = '60%'
                    legendItem.right = '0%'
                    legendItem.backgroundColor = '#F5FAFF'
                } else if (i == 2) {
                    legendItem.top = '70%'
                    legendItem.left = '0%'
                    legendItem.backgroundColor = '#FFFFFF'
                } else if (i == 3) {
                    legendItem.top = '70%'
                    legendItem.right = '0%'
                    legendItem.backgroundColor = '#FFFFFF'
                } else if (i == 4) {
                    legendItem.top = '80%'
                    legendItem.left = '0%'
                    legendItem.backgroundColor = '#F5FAFF'
                    // legendItem.backgroundColor = 'red'
                } else if (i == 5) {
                    legendItem.top = '80%'
                    legendItem.right = '0%'
                    legendItem.backgroundColor = '#F5FAFF'
                }
                legendOptions.push(legendItem)
            }
            return legendOptions
        }