echarts 曲线走势图

html

 <div id="agentEcharts" style="width: 100%;height: 400px;"></div>

js

<script>
  export default {
    data() {
      return {
        commentsCurveTitle: ["客户机构", "代理商机构"],
        commentsCurveTime: [
          "一月", "二月", "三月", "四月", "五月","六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
        ],
        commentsCurveData: []
      };
    },
    methods: {
//近12个月代理商/客户机构新增数量走势
      agentEcharts() {
        let myChart = this.$echarts.init(document.getElementById("agentEcharts"));
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          legend: {
            // itemWidth: 10,
            // itemHeight: 10,
            itemGap: 20,
            x: "80%",
            y: "0",
            data: this.commentsCurveTitle
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [{
            type: "category",
            boundaryGap: false,
            data: this.commentsCurveTime
          }],
          yAxis: [{
            type: "value"
          }],
          //数据
          series: [{
              name: "客户机构",
              type: "line",
              stack: "",
              color: "#0284E2",
              smooth: true,
              symbolSize: 5,
              areaStyle: {
                //右，下，左，上
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "#0284E2"
                    },
                    {
                      offset: 1,
                      color: "#ffffff"
                    }
                  ],
                  false
                )
              },
              data: [50, 26, 90, 26, 50, 66, 50, 26, 50, 126, 50, 56]
            },
            {
              name: "代理商机构",
              type: "line",
              stack: "",
              color: "#FF6058",
              smooth: true,
              symbolSize: 5,
              areaStyle: {
                //右，下，左，上
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "#FF6058"
                    },
                    {
                      offset: 1,
                      color: "#ffffff"
                    }
                  ],
                  false
                )
              },
              data: [65, 48, 65, 48, 65, 48, 65, 48, 65, 48, 65, 48]
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
     },
     mounted() {
      this.agentEcharts();
    }
   }