面试篇-vue中第三方库的使用(echarts)

文章目录

• Echarts
• • 一、vue2和vue3中使用
  • • [vue2中引入与 使用](#vue2中引入与 使用)
    • [vue3中引入与 使用](#vue3中引入与 使用)
  • 二、相关面试题
  • • [1、vue2 vue3使用echarts无法二次渲染、echarts无法渲染、echarts图标不显示](#1、vue2 vue3使用echarts无法二次渲染、echarts无法渲染、echarts图标不显示)
    • 2、切换其他组件统计图时，出现卡顿如何解决
    • 3、echarts图标自适应div问题

Echarts

基本用法：

• 初始化类： echarts.init(domId)
• 样式配置： option={}
• 渲染图展： myChart.setOption(option)

一、vue2和vue3中使用

1、安装echarts

npm install echarts --save

vue2中引入与 使用

main.js引入

import Vue from "vue";
import App from "./App.vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

vue页面中使用

<div id="myChart" style="width: 500px;height: 500px"></div>
 
<script>
export default{
  mounted() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],
          },
        ]
      });
  },
}
</script>

vue3中引入与 使用

引入方法一： 通过getCurrentInstance全局引入
main.js引入

import { createApp } from 'vue'
import * as echarts from 'echarts'   //主要代码
import App from './App.vue'
const app =  createApp(App)
app.config.globalProperties.$echarts = echarts      //主要代码
app.mount('#app')

vue页面中使用

<div id="myChart" style="width: 200px; height:300px; "></div>
 
<script lang="ts" setup>
const echarts = getCurrentInstance()?.appContext.config.globalProperties.$echarts;
 
function as() {
  const myChart = echarts.init(document.getElementById("myChart"));
  // 绘制图表
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],
      },
    ],
  });
}
onMounted(() => {
 
  nextTick(() => {
    as();
  });
});
</script>

引入方法二： 仅在组件内部引入及使用

<script lang="ts" setup>
import * as echarts from 'echarts'
 
function as() {
  const myChart = echarts.init(document.getElementById("myChart"));  //主要语句
 
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],
      },
    ],
  });
}
 
onMounted(() =>{
  nextTick(() => {
     
  })
});
 
</script>

二、相关面试题

1、vue2 vue3使用echarts无法二次渲染、echarts无法渲染、echarts图标不显示

销毁div重新渲染：

$("#myChart").removeAttr("_echarts_instance_");
// 或
$("#myChart").removeAttr("_echarts_instance_").empty();

2、切换其他组件统计图时，出现卡顿如何解决

卡顿的原因： 每个图例在没有数据时 会创建一个定时器去渲染气泡 ，页面切换后，图例销毁了 ，但echarts实例还在内存 ，气泡渲染定时器仍在运行 ，导致echarts占用CPU高，卡顿

解决方案 在mounted和destroy间加一个beforeDestroy释放该页面的echart资源

mounted(){}
beforeDestroy(){
	//清空图例数据，不影响图例resize，释放内存
	this.chart.clear()
}
destroy(){}

3、echarts图标自适应div问题

当div发生resize事件 时，让其触发echarts的resize事件

$('.chart').resize(function(){
	myChart.resize()
})
//若jquery的resize不生效，引入`jquery.ba-resize.js`