【echarts相关】

饼图的定位

饼图没有表格grid，无法通过top/left/bottom/right定位；
饼图是通过**center[‘50%’,‘50%’]**来定位的；默认都是50%，可以修改。

饼图的label颜色(5.0以上)

在5.0或更早版本的echarts的饼形图，文本颜色默认是黑色（与color数组中的颜色不一样了…）
现在要设置label颜色不相同，修改label下面的color值但是所有label颜色都是一样。
要设置不同的label有不同的颜色。

解决方法：

series:{
 	data: mydata.map((item, index) => {
          item.label = {
            color: myColor[index] //自定义的myColoe数组，存放文本颜色
          }
          return item;
        })
}

饼图的文本定位(5.0以上)

labelLayout
饼图的文本默认定位不满足需求，现在要将文本定位到指定的位置。比如有两个label，要垂直居中，一个在饼图的上方，一个在饼图的下方。可以设置labelLayout的x和y值
解决方法：

series:{
	 labelLayout(params) { //params包含每个label的详细信息
          return {
            x: '20%',
            y: params.dataIndex === 1 ? '25%' : '76%',  //通过params.dataIndex(label的索引值)设置每个label的x,y
            draggable: true,
            verticalAlign: 'middle',
            align: 'center'
          }
        },
}

饼图中间文本(label也要显示在图表)

• 只有一个饼图的情况
  设置title

 title:{
      text: `{name|${obj.title}} \n {val|${obj.total}}` , //obj自定义数据
      top:'center',
      left:'center', //通过top，left定位文字在饼图中间
      textStyle:{
        lineHeight:35,
       rich:{
          name: {
            fontSize: "24",
            color: '#fff',
          },
          val: {
            fontSize: "24",
            color: '#fff',
          }
       }
      }

    },

• 多个饼图的情况(可以通用)
  多个饼图通过graphic

 graphic: [
      { 
        type: 'text', //通过top,left设置文字位置
        top: 'middle',
        left: '12%',
        style: {
          text: `${obj[0].name}\n${obj[0].total}`,
          textAlign: 'center',
          textVerticalAlign: 'niddle',
          fill: '#fff', //文字的颜色
          fontSize: 24,
          fontFamily: "Microsoft YaHei",
        }
      },
      ... //todo 其他饼的文字
  ]

其他问题

• echarts.min.js 构建地址https://echarts.apache.org/zh/builder.html
• 在option之外修改了echarts的配置，需要重新渲染

 myEchart.setOption(option);//重新渲染

• echarts图表自适应

  window.addEventListener('resize', function () {
    myEchart.resize()
  })