<div id="chart1" class="charts"></div>
    data(){
        return{
            dataY: [
    820,
    932,
    901,
    934,
    1290,
    1330,
    1320,
    820,
    932,
    901,
    934,
    1290,
    1330,
    1320,
    820,
    932,
    901,
    934,
    1290,
    1330,
    1320,
    820
  ],
  dataX: [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23
  ]
        }
    }
      methods: {
          initData() {
      let that = this;
      var option1 = {
        xAxis: {
          name: "时",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#d8d8d8" // x坐标轴的轴线颜色
            }
          },
          axisLabel: {
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
              color: "#707070", //x轴上的字体颜色
              fontSize: "12" // x轴字体大小
            }
          },
          type: "category",
          data: this.dataX
        },
        yAxis: {
          name: "℃",
          type: "value",
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            //  改变轴线颜色
            lineStyle: {
              // 使用深浅的间隔色
              color: "#edeeed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#d8d8d8" // x坐标轴的轴线颜色
            }
          },
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              align: "left",
              color: "#707070", //x轴上的字体颜色
              fontSize: "12" // x轴字体大小
            },
            formatter: "{value}",
            interval: 0,
            margin: 40
          }
        },
        series: [
          {
            data:this.dataY,
            type: "line",
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#5a60c7",
                lineStyle: {
                  color: "#5a60c7"
                }
              }
            }
          }
        ]
      };
      that.chart1 = that.echarts.init(document.getElementById("chart1")); //定义
      that.chart1.clear();
      that.chart1.setOption(option1); //展示
      that.chart1.resize(); //刷新画布
    },
 
}
 mounted() {
    let that = this;
    that.initData();
    window.addEventListener("resize", () => {
      this.resize(); //监听屏幕大小,来刷新画布
    });
  }复制代码
Logo

前往低代码交流专区

更多推荐