Vue中使用echarts

最新推荐文章于 2022-03-04 09:54:41 发布

Hgiao

最新推荐文章于 2022-03-04 09:54:41 发布

阅读量2.9k

点赞数 9

分类专栏： vue 文章标签： html npm vue.js

本文链接：https://blog.csdn.net/Hgiao/article/details/109615629

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

@[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>