echarts折線圖數據動態渲染（調接口）

<template>
    <div id="mainw" style="width: 750px; height: 400px"></div>
</template>

<script>
var echarts = require("echarts");

mounted() {
  this.$nextTick(() => {
    this.getEcgarts();
  });
},

methods: {
  getEcgarts() {
    接口函數名().then(res => {
      var myChart = echarts.init(document.getElementById("mainw"));
      let resp = res.data; // 接口返回的數據
      let option = {
        title: {
          text: "", // 標題
          textStyle: {
          　fontWeight: "bold",
            fontSize: 14 // 字體大小
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: resp.map(item => item.keyName)
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
           // data: [320, 500, 662, 798, 863, 1330, 1320],
            data: resp.map(item => item.valCount),
            type: "line",
            itemStyle: {
              normal: {
                color: "#597EF7", //折點顏色
                lineStyle: {
                  color: "#597EF7" //折線顏色
                }
              },
              label: { show: true } //是否在折線點上顯示數字
            },
           smooth: true,
             symbolSize: 13, // 空心點大小
             areaStyle: {
               // 折線漸變
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0, // 0%
                     color: "rgba(80,141,255,0.39)"
                   },
                   {
                     offset: 0.5, // 50%
                     color: "rgba(56,155,255,0.25)"
                   },
                   {
                     offset: 1, // 100%
                     color: "rgba(38,197,254,0.00)"
                   }
                 ])
               }
             }
           }
         ]
       };
       myChart.setOption(option);
　　　　// 如果實在data里面 寫的option數據 要加上this
　　　　myChart.setOption(this.option)
     });
   }

</script>

希望對你有所幫助