页面数据可视化开发常规web图表绘制下06课件讲解.pptxVIP

页面数据可视化开发-常规web图表绘制（下）

任务描述任务描述：使用Echarts完成常规web图表的绘制。主要内容：1.Echarts基本介绍2.Echarts的优势3.Echarts的开发流程

常规web图表绘制关键步骤讲解下载Echarts.js并导入加载数据并设置图表配置项初始化ECharts实例对象将数据和配置项设置到实例对象中

下载Echarts.js并导入1、首先进入到Echarts官网，域名为：/。在引导页面中下载Echarts.js。在下载成功之后创建一个html页面，并在页面中引入Echarts.js的文件。并创建一个div容器用于渲染图表具体代码如下：!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleECharts常规图表绘制完整案例/title!--引入ECharts--scriptsrc=/ajax/libs/echarts/5.1.2/echarts.min.js/script/headbody!--用来呈现图表的div标签--divid=chartstyle=width:600px;height:400px;/div/body/html

初始化ECharts实例对象2、在JavaScript代码块当中，通过选择器进行页面标签的绑定。具体代码如下：varmyChart=echarts.init(document.getElementById(chart));

加载数据并设置图表配置项3、在这个示例中，使用静态数据，所以只需要将数据填充到series中。如果要加载动态数据，则需要使用AJAX或其他接口进行数据获取。具体代码如下：series:[{name:性别比例,type:pie,radius:50%,data:[{value:555,name:男},{value:445,name:女}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:rgba(0,0,0,0.5)}}}]

将数据和配置项设置到实例对象中4、通过JavaScript代码对于页面上的标签进行图像渲染，在渲染前一定要检查一下容器的大小，一定要设置足够的容器大小，否则可能会导致数据展示有所缺失。具体代码如下：//使用刚指定的配置项和数据显示图表。myChart.setOption(option);

任务小结常规web图表绘制下载Echarts.js并导入将数据和配置项设置到实例对象中加载数据并设置图表配置项初始化ECharts实例对象