**本文為千鋒資深前端教學老師帶來的【JavaScript全解析】系列，文章內含豐富的代碼案例及配圖，從0到1講解JavaScript相關知識點，致力於教會每一個人學會JS！** **文末有本文重點總結，可以收藏慢慢看\~ 更多技術類內容，主頁關註一波！** # ES6函數中參數的預設值 給函數的形 ...
一、安裝
在需要創建圖表的組件中全局引入
圖表組件中
入門實例圖表
<script setup lang="ts">
//全局引入
import * as echarts from "echarts";
import {onMounted} from "vue";
import TestCharts from "@/components/TestCharts.vue";
onMounted(() => {
initEcharts();
})
function initEcharts() {
const option = {
title: {
text: "ECharts 入門示例"
},
tooltip: {},
legend: {
data: ["銷量"]
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [
{
name: "銷量",
type: "bar", //類型為柱狀圖
data: [5, 20, 36, 10, 10, 20]
}
]
};
const myChart = echarts.init(document.getElementById("myChart"));// 圖標初始化
myChart.setOption(option);// 渲染頁面
//隨著屏幕大小調節圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
</script>
二、圖表容器及大小
1、圖表初始化
推薦：定義父容器的寬高，圖表的寬高會預設跟隨父容器
如果想要覆蓋父容器的大小，可以聲明 opts.width 或 opts.height 將其覆蓋。
註意：使用init初始化圖表時，父容器一定要具有寬高！
初始化是指定圖表寬高：
2、響應容器大小的變化
resize
//隨著屏幕大小調節圖表
window.addEventListener("resize", () => {
myChart.resize();
});
還可以給resize指定參數來修改圖表大小
3、圖表的銷毀與重建
頁面跳轉後舊頁面的圖表消失（節點消失）
解決方法;在圖表容器被銷毀之後，調用 echartsInstance.dispose 銷毀實例，在圖表容器重新被添加後再次調用 echarts.init 初始化。
官方文檔：https://echarts.apache.org/
