Echarts

zhangtongxueya

于 2022-10-12 11:22:32 发布

阅读量210

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/zhangtongxueya/article/details/127279326

版权

  mounted() {
    // 监听搜索行高度变化 设置contont高度
    this.searHeight = this.$refs.searchRow.clientHeight;
    window.onresize = () => {
      this.searHeight = this.$refs.searchRow.clientHeight;
      this.myChart && this.myChart.resize();//图表自适应
    };
    this.getTableData();
  },
  //销毁window.onresize事件
  destroyed() {
    window.onresize = null;
  },

getChart() {
      this.myChart && this.myChart.clear();
      this.myChart = echarts.init(this.$refs.lineChart);
      var option;
      option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.tableData.map((item) => item.date),
        },
        yAxis: {
          name: "平均值",
          type: "value",
          splitLine: false,
          axisLabel: {
            formatter: "{value}%",
          },
        },
        grid: {
          left: "40",
          right: "40",
        },
        dataZoom: [{}],
        series: [
          {
            data: this.tableData.map((item) => item.rate),
            type: "line",
            areaStyle: {},
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                color: "rgba(115, 103, 240, 0.1)",
                lineStyle: {
                  color: "#7367f0",
                },
              },
            },
          },
        ],
      };
      option && this.myChart.setOption(option);
    },