echarts使用过程中遇到的小问题汇总

1. 饼图位置确定不能由grid来设置，需要使用center和radius要设置；（另外，如果想默认包含标签，直接设置containLabel: true，不用设置上下左右的边距）

2. legend过长超出范围时设置显示方式:

方式1：

官网给出的方案：label{overflow:"none"}

文字超出宽度是否截断或者换行。配置width时有效

• 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
• 'break' 换行
• 'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
  (但是我的玫瑰图配置后无法生效，采用自己设置的方法)

方式2：

设置formatter，此方法可以配合rich使用，很方便

formatter: function(p) {
		let name = p.name.length>6?p.name.substr(0,6)+"...":p.name
			return [
					'{name|'+name+'}',
					'{value|'+p.value+'}单',
					'{percent|'+p.percent+'%}'
					].join('\n')
		},
// 如果不需要判断name长度可以直接使用formatter: '{name|{b}}\n{value|{c}}单\n{percent|{d} %}',
rich: {
		name: {
			color: "#333333"
		},
		percent: {
			fontSize: 10,
			color: '#999'
		}
	}

3. 当数据刷新后部分图表数据可能存在没刷新的情况

setOption有3个属性，setOption(option,notMerge,lazyUpdate);

第二个notMerge默认为false,即默认合并两个数据

解决方法：myChart.setOption(newValue, true)

4. 在手机端柱状图最左边数据的tooltip会超出屏幕显示

解决：

tooltip: {
	trigger: 'axis',
	confine :true
}

5. 对于未知个数的图表渲染，不知道初始化多少个，可以使用插件，把未知个option用optionList存起来通过index获取及初始化。地址：https://ext.dcloud.net.cn/plugin?id=3333

6. 设置dataZoom后，在图表上滚动会无法滚动页面，对应配置dataZoom中的属性zoomOnMouseWheel: false,preventDefaultMouseMove:false

7.配置饼图标签文字在指引线上下两部分，设置padding和指引线长度即可

labelLine: {
                                    show: true,
                                    length: 1,
                                    length2: 50,
                                    // // padding: [0, -70],
                                    // lineStyle: {
                                    //     type: "dashed",
                                    //     color: "#999999"
                                    // }
                                },
                                label: {
                                    show: true,
                                    formatter: '{b|{b}}\n\n{a|{d}%}',
                                    borderWidth: 20,
                                    borderRadius: 4,
                                    padding: [0, -50],
                                    rich: {
                                        a: {
                                            color: '#fff',
                                            fontSize: 12,
                                            lineHeight: 20,
                                            backgroundColor: "#ee6666",
                                            padding: [3, 5],
                                            borderRadius: 10
                                        },
                                        b: {
                                            fontSize: 12,
                                            // color: '#333',
                                            lineHeight: 20
                                        }
                                    }
                                }