vue中引用echarts

最新推荐文章于 2024-09-09 11:08:24 发布

web.yoyo

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量217

点赞数

分类专栏： Echarts 文章标签： echarts vue.js

本文链接：https://blog.csdn.net/weixin_51679573/article/details/126718668

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

全局引入

npm 下载依赖

npm install echarts --save

main.js中全局引入

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

组件中使用

<template>
  <div>
    <div ref="chart" id="echarts" :style="{ width: '100vw', height: '100vh'}"></div>
  </div>
</template>

<script>
export default {
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
  mounted(){
    this.initCharts()
  }
};
</script>

单组件引入

也需要安装依赖，但不需要全局引用

<script>
import * as echarts from 'echarts'
export default {
  methods: {
    initCharts() {
      let myChart = echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
  mounted(){
    this.initCharts()
  }
};
</script>

效果图

效果图片