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创建存储过程
  • 小区物业管理系统毕业论文加源码
  • 热门搜索
    自制蛋挞液的简单做法 宫保鸡丁的做法家常菜 绥怎么读 南瓜饼用普通面粉做法 褚怎么读 农村养老保险怎么交 凉面做法 咖喱炒饭的做法 奥克斯空调怎么样 漾怎么读