526互联

vue中引入echarts

发布时间 2023-08-17 15:56:52作者: BENEEEE

1、先下载依赖包

npm install echarts -s //安装在目标项目中，如果想要全局安装就用-g

2、引入

2.1、全局引入

main.js中

import echarts from 'echarts'
Vue.prototype.$echarts=echarts
//也可以用：
import *as echarts from 'echarts'

2.2、局部引入

component.vue

import echarts from 'echarts' 
//或者
import *as echarts from 'echarts'

3、插入echarts

3.1、全局注册

3.1.1、直接使用dom元素

<template>
  <div>
    <div id="myEchart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data(){
    return{
      const option = {
        // 在此添加ECharts 选项...
      }
    }
  },
  mounted() {
    //使用异步可以避免因等待整个页面而造成阻塞，但要注意与其他异步操作之间的交互
    this.$nextTick(() => {	
      this.renderChart();		
    }) 
  },
  methods: {
    renderChart() {
      let myChart = this.$echarts.init(document.getElementById('myEchart'));
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.chart {
  width: 100%;
  height: 400px; /* 设置显式高度 */
}
</style>

//通过确保父元素具有非零尺寸，为.chart容器设置显式高度来确保图表容器具有特定的大小，并使用$nextTick方法确保在DOM更新后执行操作获取准确的DOM尺寸信息，从而避免 "Can't get DOM width or height" 错误

3.1.2、使用ref实现对DOM元素引用和操作来插入echarts

<div ref="myEchart" class="chart"></div>

methods: {
    renderChart() {
      let myChart = this.$echarts.init(this.$refs.myEchart);
      myChart.setOption(option);
    },
  },

3.2、局部注册

3.2.1、直接使用dom元素

将let myChart = this.$echarts.init(document.getElementById('myEchart')); 改为：

let myChart = echarts.init(document.getElementById('myEchart'));

3.2.2、使用ref实现对DOM元素引用和操作来插入echarts

将let myChart = this.$echarts.init(this.$refs.myEchart); 改为：

let myChart = echarts.init(this.$refs.myEchart);