一、安裝
在需要創建圖表的組件中全域引入
圖表組件中
入門實體圖表
<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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552993.html
標籤：其他
上一篇：組件化編程
下一篇：返回列表