ECharts 入门教程 ECharts阴影设置

2024-02-25 开发教程 ECharts 入门教程匿名 13℃

title.shadowBlur | number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。

title.shadowColor | Color

阴影颜色。支持的格式同color。

注意：此配置项生效的前提是，设置了 show: true。

title.shadowOffsetX | number

[ default: 0 ]

阴影水平方向上的偏移距离。

注意：此配置项生效的前提是，设置了 show: true。

title.shadowOffsetY | number

[ default: 0 ]

阴影垂直方向上的偏移距离。

注意：此配置项生效的前提是，设置了 show: true。

饼状图设置阴影实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3Cschool(www.w3cschool.cn)</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="height:400px"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      backgroundColor: '#FAFAD2',
      title: {
        text: '国民营销信息来源渠道',
        subtext: 'W3Cschool',
        left: 'center',
        //标题栏的高度，值越大，距离顶部的距离越大
        top: 20,
        //标题栏字体的颜色
        textStyle: {
          color: '#FFD700'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      visualMap: {
        show: false,
        //饼图中在最大值最小值颜色范围中的亮度，值越大颜色越深
        min: 10,
        max: 600,
        inRange: {
          //0-1之间，值越小颜色越深
          colorLightness: [0, 1]
        }
      },
      series: [
        {
          //饼图中内容介绍
          name: '客户访问来源',
          //统计表的类型
          type: 'pie',
          //饼图的弧度，值越小生成的饼状图越小
          radius: '60%',
          //饼图生成后的位置
          center: ['50%', '50%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 274, name: '联盟广告' },
            { value: 235, name: '视频广告' },
            { value: 400, name: '搜索引擎' }
          ].sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          //饼状图的外围标签
          label: {
            normal: {
              textStyle: {
                color: 'rgba(0, 0, 0, 0.3)'
              }
            }
          },
          //指向外围标签的线条
          labelLine: {
            normal: {
              lineStyle: {
                color: 'rgba(0, 0, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              //具体决定了饼状图每一份的颜色显示
              color: '#FFA07A',
              //饼状图阴影，值越大阴影亮度越高
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          //图表生成的随机时间
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    };;
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>
</html>

折线图设置阴影实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3Cschool(www.w3cschool.cn)</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="height:400px"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      legend: {
        data: ['高度(km)与气温(°C)变化关系']
      },
      tooltip: {
        trigger: 'axis',
        formatter: 'Temperature : <br/>{b}km : {c}°C'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} °C'
        }
      },
      yAxis: {
        type: 'category',
        axisLine: { onZero: false },
        axisLabel: {
          formatter: '{value} km'
        },
        boundaryGap: false,
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
      },
      series: [
        {
          name: '高度(km)与气温(°C)变化关系',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3,
            shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }
      ]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>
</html>

上一节： ECharts中标题边框的设置

下一节： ECharts图例组件配置项

"ECharts 入门教程"的目录

ECharts 入门教程 ECharts阴影设置

饼状图设置阴影实例：

折线图设置阴影实例：