vue3中使用echarts

网站推荐

给大家推荐个好用的图表网站：首页 - Made A Pie
PPEcharts：PPChart - 让图表更简单

使用

1. 引入

npm install echarts
`--save` 等同于` -S` 生产阶段的依赖,也就是项目运行时的依赖，就是程序**上线后**仍然需要依赖

2. 导入

import * as echarts from "echarts";

2. 页面中使用

<template>
    <!-- /* 设置id名字，代码会根据id查找 */ -->
    <div id="main"></div>
</template>

import * as myChart from "echarts";
import { onMounted } from "vue";
//声明周期函数，自动执行初始化
onMounted(() => {
    init();
});
//初始化函数
function init() {
    // 基于准备好的dom，初始化echarts实例
    let Chart = myChart.init(document.getElementById("main"));
    // 绘制图表
    let options = {
        title: {
            text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    };
    //window.onresize = function() { //自适应大小 
    //  chart.resize();
    //}
    // 渲染图表
    Chart.setOption(options);

/* 样式这里要设置长宽，不然显示不出来 */
#main {
        width: 100vw;
    height: 80vh;
}

附：Echarts 中的 clear() 和 dispose()

避免在卸载组件时出现资源泄漏，使用 clear 或dispose() 方法实现释放实例

import { onUnmounted } from 'vue'  
  
onUnmounted(() => {  
  echart.dispose() // 调用dispose方法释放echarts实例  
})