echarts的简单使用案例-柱形图

 时间:2024-11-08 22:16:46

1、首先下载echarts工具包,可以在官网下载,图中为下载后的echarts工具包的目录结构

echarts的简单使用案例-柱形图

2、测试echarts,新建文件夹test,将echarts-2.0.3\doc\example\www\下的js拷贝到test下,并新建test.html文件,如图

echarts的简单使用案例-柱形图

3、编辑test.html文件。首先导入echarts文件,因为我们只是测试柱状图所以只需要引入esl.js和echarts.js文件即可,如图

echarts的简单使用案例-柱形图

4、创建柱状图。首先创建柱状图的容器,<div id="main" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>,注意里面的id,下面会用到,另外要设定高度,否则柱状图不会显示。创建完成容器后,在容器中添加柱状图,如图

echarts的简单使用案例-柱形图echarts的简单使用案例-柱形图echarts的简单使用案例-柱形图echarts的简单使用案例-柱形图

5、OK,代码编写完成,我们双击test.html文件,柱状图成功显示,如图,你可以根据显示对比一下script内容,找到编写柱状图的关键

echarts的简单使用案例-柱形图
  • 数据库SQL语句查询
  • 如何在Sqlserver中设置可编辑的记录条数
  • Django学习笔记02:通过Pycharm安装Django
  • C#如何记录用户操作
  • notepad++怎么导入插件
  • 热门搜索
    黄瓜咸菜的腌制方法 独立显卡怎么安装 宝宝拉稀怎么办 网线怎么拉 汽车图标大全大图 男生头像大全 儿童故事大全文字版 家常炸酱面 经典诗词大全 马蹄怎么做好吃