echarts图表折线图

最新推荐文章于 2024-01-05 19:07:27 发布

少年包青菜

最新推荐文章于 2024-01-05 19:07:27 发布

阅读量201

点赞数

文章标签： js vue

本文链接：https://blog.csdn.net/m0_50884068/article/details/119755654

版权

上代码

安装
npm install echarts
// 全局引入
import 'echarts';
// 页面使用
<template>
  <div>
      <div id="zhexian" style="width: 500px; height: 500px;background:red;"></div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
export default {
  data() {
    return {
      aoption: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
      axianX: [],
      axianY: [],
    };
  },
  created() {this.add()},
  methods: {
    add() {
        var list1=['1','2','3','4']
        var list2=['8','7','6','5']
      this.aoption.xAxis.data = (this.axianX=list1);
      this.aoption.series[0].data = (this.axianY=list2);
      this.zhe();
    },
    zhe() {
      this.$nextTick(function () {
        let zhe = echarts.init(
          document.getElementById("zhexian")
        );
        zhe.setOption(this.aoption);
      });
    },
  },
};
</script>