任务单06：Echarts基本组件的使用（一）.docxVIP

PAGE PAGE 5 任务单06：Echarts基本组件的使用（一） §任务要求 搭建Echarts开发环境 安装Hbuilder（或者Pycharm、VS Code），学会Echarts开发流程； 对比Hbuilder和Pycharm的Echarts编辑环境，分析其优缺点 Echarts开发流程 建立一个HTML文件，引入Echarts官方js包 创建div容器（画布） Echarts初始化，关联div容器 创建option对象（设置标题、工具栏、图例、坐标轴、数据等） 导入Echarts设置到div容器 通过浏览器运行显示 2、Echarts基本组件的设置 （1）Echarts标题（title）组件的设置，开发效果图如下 代码： （2）Echarts提示框（tooltip）组件的设置，开发效果图如下 代码： （3）Echarts工具栏（toolbox）组件的设置，开发效果图如下 代码： （4）Echarts图例（legend）组件的设置，开发效果图如下 代码： 【拓展】 1、分别安装Pycharm和VS code，在相应编辑器中编辑Echarts，实现下图效果 2、编辑Echarts，实现下面水平柱状图效果 §操作步骤 （步骤贴图，代码直接粘贴，注意粘贴代码运行结果截图等，截图要截取部分浏览器界面） §评价 教师对学生操作过程和结果进行评价