ecarts 饼状图鼠标悬浮放大

ecarts 饼状图鼠标悬浮放大

起因是，同事写了一个饼图，数据展示完全没问题，但是鼠标悬浮，不是放大，反而缩小了。这和我们的ui不一样，所以在找了一系列的资料后，终于发现在哪里改。

下面附上之前写的图：

原始配置：

 series: [
    {
        name: "",
        type: "pie",
        radius: ['50%', '32%'],
        label: {
          show:false,
          textStyle: {
            fontSize: 12,
            color: "inherit",
          },
          position: "outside",
          // formatter: "{d}%",
        },
        labelLine: {
          show: false,
          length: 0,
          length2: 15,
        },
        emphasis: {
          itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
    }
  ]

改后代码：

修改的部分前面用 + 标注出来拉，大家仔细看哦。

 series: [
    {
      name: 'Access From',
      type: 'pie',
  +  radius: ['40%', '60%'],
      avoidLabelOverlap: false,
     label: {
            show:false,
            textStyle: {
              fontSize: 12,
              color: "inherit",
            },
            position: "outside",
            // formatter: "{d}%",
          },
      labelLine: {
            show: false,
            length: 10,
            length2: 5,
          },
      emphasis: {
 +    scaleSize: 8,
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]

改后图：

完成！