Echarts 渐变折线图

图例：

代码：

<template>
  <div class="policPic">
    <div id="chart_example" ref="chart_example"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  methods: {
    // 报警消息折线图

    drawLine() {
      let echarts = require("echarts");
      let myChart = echarts.init(chart_example);
      // let myChart = this.$echarts.init(chart_example);
      myChart.setOption({
        grid: {
          //距离外层box左右位置
          x: 60, //左
          y: 80, //上
          x2: 35, //右
          y2: 40, //下
          borderWidth: 1,
        },
        title: {
          text: "报警消息趋势图",
          textStyle: {
            fontSize: "20px",
            color: "#3A9CF9", //标题颜色
          },
          left: 15,
          top: 10,
        },
        xAxis: {
          name: "时",
          type: "category",
          boundaryGap: false,
          data: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：次",
          left: -20,
          min: 0, // 设置y轴刻度的最小值
          //max:1800,  // 设置y轴刻度的最大值
          splitNumber: 9, // 设置y轴刻度间隔个数
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              158,
              356,
              405,
              509,
              610,
              700,
              810,
              500,
              560,
              816,
              660,
              718,
              569,
              257,
              1200,
              510,
              1300,
            ],
            type: "line",
            symbol: "none",
            areaStyle: {
              normal: {
                // 设置折线图颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "#F7F6F6" },
                  { offset: 0, color: "#84A6FF" },
                ]),
              },
            },
            lineStyle: {
              width: 1,
              color: "transparent",
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.policPic {
  /* width: 1370px; */
  width: 87%;
  height: 635px;
  background: #ffffff;
  overflow: hidden;
}
#chart_example {
  width: 100%;
  height: 635px;
}
</style>