Echarts初学(一)
1.Echarts初学(一)
一、安装
在需要创建图表的组件中全局引入
图表组件中
入门实例图表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | < 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/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战