vue 项目中使用echarts

vue 项目中使用echarts

1 下载echarts 模块

cnpm install echarts@4.9.0

2 main.js 导入

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
Vue.config.productionTip = false;

3 页面使用
3-1 设置容器

  <div id="echart" style="width: 100%; height: 100%"></div>

3-2 data中放数据

      option: {
        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",
          },
        ],
      },

3-3 mounted 初始化

  mounted() {
    this.init();
  },

3-4 methods使用

  methods: {
    init() {
      echarts.init(document.getElementById("echart")).setOption(this.option);
    },
  },

4 完整代码

<!--
 * @Date: 2022-08-23 00:52:59
 * @LastEditors: zhangchao
 * @LastEditTime: 2022-11-07 16:34:36
 * @FilePath: /company/src/layout/Index.vue
-->
<template>
  <div id="echart" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {
        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",
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      echarts.init(document.getElementById("echart")).setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss"></style>

效果