echarts图表怎么随着div变小

 时间:2026-04-23 12:09:10

1、第一步首先在我们的电脑上打开软件,新建一个html页面和添加echarts.js,如下图所示:

echarts图表怎么随着div变小

2、第二步在html中引入echarts.js,并创建一个id为main,宽度600px,高度400px的div盒子,如下图所示:

echarts图表怎么随着div变小

3、第三步通过  var myChart = echarts.init(document.getElementById('main'));代码来进行初始化echarts,并且将图表放在div盒子里面, myChart.setOption(option);代码将配置项和数据显示到图表上,如下图所示:

echarts图表怎么随着div变小

4、第四步我们在浏览器中打开html页面,可以看到一个宽度600px,高度400px的柱状图图表,如下图所示:

echarts图表怎么随着div变小

5、第五步我们在html页面中复制一下div盒子的代码,将div盒子的宽度高度调小,id改为main2,复制js代码,改为var myChart = echarts.init(document.getElementById('main2'));,如下图所示:

echarts图表怎么随着div变小

6、第六步在浏览器中打开html页面,可以看到div变小,图表也跟着变小,如下图所示:

echarts图表怎么随着div变小

  • yEd软件:如何修改UML类图中的类方法
  • python如何查看列表自身的方法有哪些?
  • Python pdfminer使用教程pdf文件处理
  • MySQL创建存储过程
  • 小区物业管理系统毕业论文加源码
  • 热门搜索
    周三祝福语 什么是哲学及其含义 钉鞋什么牌子好 曾经沧海难为水是什么意思 豁达的意思 长安cs55什么时候上市 tpp是什么意思 找什么工作有前途 twins是什么意思 潜伏的意思