echarts-折线图-大白点

先看效果图：

 

 

 代码如下：

 <div id="lineChart" style="width:100%;height:100%"></div>

//自适应字体大小变化
 WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 5280;
      return fontSize * res;
 },

myecharts() {
      let myChart = this.$echarts.init(document.getElementById("lineChart"));


      // 绘制图表
      //myChart.setOption({
      var option = {
        grid: {
          left: this.WidthAdaptive(90),
          top: this.WidthAdaptive(80),
          height: "63%",
          width: "85%",
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10/09",
              "10/10",
              "10/11",
              "10/12",
              "10/13",
              "10/14",
              "10/15",
            ],
            boundaryGap: true,
            splitLine: {
              //show: true,
              lineStyle: {
                type: "solid",
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "rgba(77, 101, 129, 0.8)",
              },
              symbol: ["none", "arrow"],
              symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
              symbolOffset: this.WidthAdaptive(10),
            },
            axisTick: {
              show: false,




              alignWithLabel: true,
            },
            axisLabel: {
              fontSize: this.WidthAdaptive(24),
              fontFamily: "Source Han Sans CN",
              fontWeight: 400,
              lineHeight: this.WidthAdaptive(40),
              color: "#cccccc",
              margin: this.WidthAdaptive(12),
            },
          },
        ],
        yAxis: {
          name: "单位: 人",
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(105, 119, 135, 0.6)",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(77, 101, 129, 0.8)",
            },
            symbol: ["none", "arrow"],
            symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
            symbolOffset: this.WidthAdaptive(10),
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: this.WidthAdaptive(24),
            fontFamily: "Source Han Sans CN",
            fontWeight: 400,
            lineHeight: this.WidthAdaptive(50),
            color: "#cccccc",
            margin: this.WidthAdaptive(13),
          },
          nameGap: this.WidthAdaptive(20),
          nameTextStyle: {
            fontSize: this.WidthAdaptive(24),
            fontFamily: "Source Han Sans CN",
            fontWeight: 400,
            lineHeight: this.WidthAdaptive(50),
            color: "#cccccc",
          },
        },
        series: [
          {
            data: [1272, 1500, 1750, 1204, 1500, 927, 2000],
            type: "line",
            lineStyle: {
              color: "#0095FF",
              width: this.WidthAdaptive(6),
            },
            symbol: "circle",
            symbolSize: this.WidthAdaptive(33),
            itemStyle: {
              color: "rgba(0,191,143,0)",
              borderColor: "#ffffff",
              borderType: "solid",
              borderWidth: this.WidthAdaptive(2),
            },
            smooth: true,
            z: 1,
          },
          {
            type: "scatter",
            data:[1272, 1500, 1750, 1204, 1500, 927, 2000],
            symbolSize: this.WidthAdaptive(16),
            itemStyle: {
              color: "#ffffff",
              opacity: 1,
            },
            emphasis: {
              scale: false,
            },
            z: 2,
          },
        ],
        // });
      };
      myChart.setOption(option);




      window.onresize = myChart.resize;
    },