Help,怎么实现下图的调整

img

img


下面是要实现的效果,上面是目前的

哈喽,你这个样式其实就是加阴影,直接在label中设置:

label: {
  borderWidth:1,
  borderColor:'#ccc',
  shadowBlur:6,
  shadowColor:'#ccc',
}

在emphasis.label中设置:


emphasis: {
  label: {
    borderWidth:1,
    borderColor:'#cee1fc',
    shadowBlur:6,
    shadowColor:'#cee1fc',
  },
},

具体可以看看我写的例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      myChart.setOption({
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
            label: {
              padding:4,
              backgroundColor:'#fff',
              color:'#000',
              borderWidth:1,
              borderColor:'#ccc',
              shadowBlur:6,
              shadowColor:'#ccc',
            },
            // 高亮样式。
            emphasis: {
              textStyle: {
                textShadowColor: "red",
              },
              itemStyle: {
                // 高亮时点的颜色
                color: "red",
                textShadowColor: "black",
              },
              label: {
                borderWidth:1,
                borderColor:'#cee1fc',
                shadowBlur:6,
                shadowColor:'#cee1fc',
              },
            },
            data: [
              // 数据数组,name 为数据项名称,value 为数据项值
              { value: 235, name: "视频广告" },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" },
            ],
          },
        ],
      });
    </script>
  </body>
</html>