@[Hgiao] (Vue中使用echarts )

第一步:目录下使用命令行,初始化工程的 npm 环境并安装 echarts(这里前提是您已经安装了 npm):

//npm
 npm install echarts --save

第二步:Html

// html
<template>
  <div  style="width: 600px; height: 400px">
    <div ref="tu" style="width: 600px; height: 400px"></div>
  </div>
</template>`

第三步:script

//
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      options: [],
    };
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      echarts.init(this.$refs.tu).setOption(
      //以下内容可以在https://echarts.apache.org/examples/zh/index.html
      //里面选取你想要的类型,粘贴即可
      {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      }
      
      );
    },
  },
};
</script>




Logo

前往低代码交流专区

更多推荐