ECharts陰影設(shè)置

2020-08-26 16:58 更新

title.shadowBlur | number

圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。

示例：

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

注意：此配置項(xiàng)生效的前提是，設(shè)置了 show: true 以及值不為 tranparent 的背景色 backgroundColor。

title.shadowColor | Color

陰影顏色。支持的格式同color。

注意：此配置項(xiàng)生效的前提是，設(shè)置了 show: true。

title.shadowOffsetX | number

[ default: 0 ]

陰影水平方向上的偏移距離。

注意：此配置項(xiàng)生效的前提是，設(shè)置了 show: true。

title.shadowOffsetY | number

[ default: 0 ]

陰影垂直方向上的偏移距離。

注意：此配置項(xiàng)生效的前提是，設(shè)置了 show: true。

餅狀圖設(shè)置陰影實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3Cschool(www.o2fo.com)</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準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
  <div id="main" style="height:400px"></div>
  <script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定圖表的配置項(xiàng)和數(shù)據(jù)
    var option = {
      backgroundColor: '#FAFAD2',
      title: {
        text: '國(guó)民營(yíng)銷信息來(lái)源渠道',
        subtext: 'W3Cschool',
        left: 'center',
        //標(biāo)題欄的高度，值越大，距離頂部的距離越大
        top: 20,
        //標(biāo)題欄字體的顏色
        textStyle: {
          color: '#FFD700'
        }
      },

      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> : {c} (iptbaox%)"
      },

      visualMap: {
        show: false,
        //餅圖中在最大值最小值顏色范圍中的亮度，值越大顏色越深
        min: 10,
        max: 600,
        inRange: {
          //0-1之間，值越小顏色越深
          colorLightness: [0, 1]
        }
      },
      series: [
        {
          //餅圖中內(nèi)容介紹
          name: '客戶訪問(wèn)來(lái)源',
          //統(tǒng)計(jì)表的類型
          type: 'pie',
          //餅圖的弧度，值越小生成的餅狀圖越小
          radius: '60%',
          //餅圖生成后的位置
          center: ['50%', '50%'],
          data: [
            { value: 335, name: '直接訪問(wèn)' },
            { value: 310, name: '郵件營(yíng)銷' },
            { value: 274, name: '聯(lián)盟廣告' },
            { value: 235, name: '視頻廣告' },
            { value: 400, name: '搜索引擎' }
          ].sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          //餅狀圖的外圍標(biāo)簽
          label: {
            normal: {
              textStyle: {
                color: 'rgba(0, 0, 0, 0.3)'
              }
            }
          },
          //指向外圍標(biāo)簽的線條
          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',
          //圖表生成的隨機(jī)時(shí)間
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    };;
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>
</html>

折線圖設(shè)置陰影實(shí)例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3Cschool(www.o2fo.com)</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準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
  <div id="main" style="height:400px"></div>
  <script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定圖表的配置項(xiàng)和數(shù)據(jù)
    var option = {
      legend: {
        data: ['高度(km)與氣溫(°C)變化關(guān)系']

      },
      tooltip: {
        trigger: 'axis',
        formatter: 'Temperature : <br/>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)變化關(guān)系',
          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>

以上內(nèi)容是否對(duì)您有幫助：

← ECharts中標(biāo)題邊框的設(shè)置

ECharts圖例組件配置項(xiàng) →

寫(xiě)筆記

我要補(bǔ)充

ECharts陰影設(shè)置

餅狀圖設(shè)置陰影實(shí)例：

折線圖設(shè)置陰影實(shí)例：

推薦文章

推薦教程

推薦課程