echarts折線圖陰影小技巧

前言

echarts做爲咱們前端小夥伴經常使用的可視化庫，那咱們畫出有陰影的折線圖，讓折線圖比較立體感。 可使用折線圖的 lineStyle

若有錯誤，請大佬指正

不加陰影的折線圖是這樣的

不加陰影的折線圖是這樣的

加陰影的折線圖是這樣的

看起來是否是比較有立體感，層次感，那這樣陰影是怎樣是實現的，話很少說，直接上代碼

js代碼

<script>

import * as echarts from "echarts";

export default {
  name: "Home",
  components: {},
  mounted() {
    this.Draw();
  },
  methods: {
    Draw() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        color: ["#F14F8C"],
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            lineStyle: {      // 陰影部分
                    shadowOffsetX: 0, // 折線的X偏移 
                    shadowOffsetY: 9,// 折線的Y偏移 
                    shadowBlur: 8,  // 折線模糊
                    shadowColor: "rgba(145, 132, 132, 1)", //折線顏色
                  },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
複製代碼

例子是官方的折線圖，主要部分是lineStyle部分，這個利用echarts的 lineStyle 屬性畫出一個偏移的折線，在模糊一下，使之看起來像一個陰影，就完成了。