Echarts初学(一)

  • Echarts初学(一)已关闭评论
  • 211 次浏览
  • A+
所属分类:Web前端
摘要

推荐:定义父容器的宽高,图表的宽高会默认跟随父容器  如果想要覆盖父容器的大小,可以声明 opts.width 或 opts.height 将其覆盖。


一、安装

Echarts初学(一)

在需要创建图表的组件中全局引入

Echarts初学(一)

 图表组件中

入门实例图表

<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、图表初始化

推荐:定义父容器的宽高,图表的宽高会默认跟随父容器

Echarts初学(一)

 如果想要覆盖父容器的大小,可以声明 opts.width 或 opts.height 将其覆盖。

注意:使用init初始化图表时,父容器一定要具有宽高!

初始化是指定图表宽高

Echarts初学(一)

 2、响应容器大小的变化

resize

//随着屏幕大小调节图表   window.addEventListener("resize", () => {     myChart.resize();   });

还可以给resize指定参数来修改图表大小

Echarts初学(一)

 3、图表的销毁与重建

页面跳转后旧页面的图表消失(节点消失)

解决方法;在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例,在图表容器重新被添加后再次调用 echarts.init 初始化。

 

 

官方文档:https://echarts.apache.org/