preface

Echarts is a common visual library for our front-end friends, so we draw shaded line charts to make them more three-dimensional. You can use line chart lineStyle

If there is any mistake, please correct the boss

The unshaded line chart looks like this

The unshaded line chart looks like this

Shaded line chart looks like this

Does it look like a three-dimensional sense, a sense of hierarchy, then how is this shadow implemented, not much to say, directly on the code

Js code

<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: {      // The shaded part
                    shadowOffsetX: 0.// The X offset of the polyline
                    shadowOffsetY: 9.// The Y offset of the polyline
                    shadowBlur: 8.// Blur the polyline
                    shadowColor: "rgba(145, 132, 132, 1)".// Crease color}},]}; option && myChart.setOption(option); ,}}}; </script>Copy the code

The example is the official line chart. The main part is the lineStyle section. This is done by using the lineStyle property of echarts to draw an offset line and blur it so that it looks like a shadow.