原文:掘金

 

echarts折线图阴影小技巧

前言

echarts作为我们前端小伙伴常用的可视化库,那我们画出有阴影的折线图,让折线图比较立体感。 可以使用折线图的 lineStyle

如有错误,请大佬指正

不加阴影的折线图是这样的

不加阴影的折线图是这样的

norm.png

加阴影的折线图是这样的

line.png

看起来是不是比较有立体感,层次感,那这样阴影是怎样是实现的,话不多说,直接上代码

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 属性画出一个偏移的折线,在模糊一下,使之看起来像一个阴影,就完成了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐