echarts在vue中的使用

最新推荐文章于 2025-02-19 09:45:53 发布

原创最新推荐文章于 2025-02-19 09:45:53 发布 · 1.2k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #vue.js #javascript

本文介绍了如何在Vue应用中局部引入ECharts图表组件，以及如何通过全局注册实现组件间共享。关键步骤包括为DOM容器设置宽高、在`mounted`生命周期钩子中初始化图表，并提供了两种不同引入方式的示例。

1.局部使用：哪里需要哪里引入

注意一定要给dom容器加宽高，不然出不来，啥也看不到

<template>
  <div>
      <div id="main" :style="{width: '500px', height: '300px'}">
        
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {

  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
</style>

2.全局使用：

就是在main.js中引入

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

进入到你需要写的组件中，比如Tubiao.vue中使用

<template>
  <div>
      <div id="main" :style="{width: '500px', height: '300px'}">
        
      </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts';
export default {

  mounted() {
    // var myChart = echarts.init(document.getElementById("main"));
    let myChart = this.$echarts.init(document.getElementById("main"))
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 200, 36, 100, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
</style>