echar 如何修改canvas的宽高

 时间:2024-10-19 16:50:47

1、打开vscode,创建一个html5规范的页面EchartsDemo.html

echar 如何修改canvas的宽高

2、将echarts源文件放到页面的同级目录,并将js引入到页面中

echar 如何修改canvas的宽高

3、在页面中添加一个简易折线图的示例,在页面div设置宽高都是500px

echar 如何修改canvas的宽高

4、运行效果如图所示,跟echarts中的简易折线图效果一样。通过设置div的宽高,间接的就设置了最终canvas呈现的宽高

echar 如何修改canvas的宽高

5、在运行界面,按F12,进入开发者模式,点击出现窗口的左上角的箭头,移到折线图上,就可以看到canvas标签确实设置了宽高都是500px

echar 如何修改canvas的宽高

6、修改页面div的样式,添加一个红色的边框。另外,修改js在绘制echarts图形后,找到canvas对象,设置宽高=300px,这样原始div可以通过红色边框看到大小。canvas可以通过显示的折线图体现

echar 如何修改canvas的宽高

7、再次运行界面,就可以看到div大小没变,但是canvas承载的echarts图形就变小了,达到了修改canvas宽高的目的

echar 如何修改canvas的宽高
  • java导出excel设置表格宽度教程
  • jquery中怎样获得select选中的值?
  • js如何截取某个字符前面所有的字符串
  • dbvisualizer中.dbvis的问题
  • Beyond Compare 4 中文版入门教程
  • 热门搜索
    阴阳师攻略 小儿湿疹是怎么引起的 红烧茄子最简单的做法 调音器怎么调吉他 奇迹暖暖搭配竞技场攻略 电脑怎么重新分区 上海动物园攻略 青岛农业大学海都学院怎么样 减肥日记 大松电饭煲怎么样