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>

希望对你有所帮助