Echarts在Vue2中的安装和使用

最新推荐文章于 2024-08-23 10:26:27 发布

Happy-Q

最新推荐文章于 2024-08-23 10:26:27 发布

阅读量168

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/m0_58991732/article/details/128908040

版权

该文章演示了如何在Vue项目中安装和使用Echarts库。通过`npminstallecharts--save`引入Echarts，然后在main.js中挂载到Vue原型上。在组件模板中创建具有固定宽高的容器，并在`mounted`生命周期钩子中初始化图表，设置选项来自定义显示数据。示例包括两个图表，一个是产品销售情况的柱状图。

摘要由CSDN通过智能技术生成

安装：cnpm install echarts --save
使用：在main.js中引入

import * as Echarts from 'echarts';
Vue.prototype.$Echarts = Echarts;

使用详情

<template>
  <div>
    <Header></Header>
    <!-- 准备具有宽高的容器 -->
    <div id="chart" style="width: 600px; height: 400px" ref="chart"></div>
    <!-- 销量 -->
    <div id="chart2" style="width: 600px; height: 400px" ref="chart2"></div>
  </div>
</template>

<script>
import Header from "../../components/header/header.vue";
//引入数据
import option1 from "./sales.js"
import option2 from "./sales2.js"
export default {
  components: { Header },
  name: "echarts01",
  data() {
    return {
      chart: null,
    };
  }, //图表实例
  mounted() {
    this.init();
    this.init2();
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  methods: {
    init() {
      console.log(this.$Echarts);
      //2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart);
      this.chart.setOption(option1);
    },
    init2(){
        //2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart2);
      this.chart.setOption(option2);
    }
  },
};
</script>

<style></style>

sale.js

const option2 = {
  title: {
    text: "销售情况",
    left: 0,
  },
  xAxis: {
    type: "category",
    data: ["产品1", "产品2", "产品3", "产品4", "产品5", "产品6", "产品7"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};

export default option2;