微信小程序开发项目实战（微课版）课件 8-3 课件-Echart在小程序中的运用.pptx

项目八个人信息模块开发TheapplicationofEchartinsmallprograms任务三Echart在小程序中的运用

ECharts是一款基于JavaScript的数据可视化图表库，提供直观、生动、可交互和可个性化定制的数据可视化图表。Echarts提供了小程序版本echarts-for-weixin，封装了成了一个名为ec-canvas的自定义组件供开发者直接引用，开发者通过熟悉的ECharts配置方式，快速开发图表，满足各种可视化需求。项目八个人信息模块开发任务描述

配置EChartsECharts可下载源码自行编译。在创建项目之后，或者仅需拷贝ec-canvas目录到新建的项目下，然后做相应的调整。ec-canvas文件夹整个有将近1M，建议在分包中组织可视化页面。此外，考虑在线定制需要的图表，下载的文件替换掉ec-canvas/echarts.js。打开pages/profile/profile.json文件，配置如下：{usingComponents:{ec-canvas:../../ec-canvas/ec-canvas}}

配置ECharts在profile.wxml设计可视图区域，包括柱状图、饼图和折线图区域。打开?pages/profile/profile.wxml文件，编写可视化图表区域布局。view?class=echarts??view?class=data_chart/view??view?class=divide/view??view?class=data_chart/view??view?class=divide/view??view?class=data_chart?/view/view

配置ECharts在profile.wxml设计可视图区域，包括柱状图、饼图和折线图区域。打开?pages/profile/profile.wxml文件，编写可视化图表区域布局。view?class=echartsview?class=data_chartview?class=title购买商品统计/viewec-canvas?id=mychart-dom-bar?canvas-id=mychart-bar?ec={{?ec?}}/ec-canvas/view??view?class=divide/view??view?class=data_chart/view??view?class=divide/view??view?class=data_chart?/view/view

柱状图的使用柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。设置柱状图的方式，是将series的type设为bar。在这个示例中，横坐标是类目型的，因此需要在xAxis中指定对应的值；而纵坐标是数值型的，可以根据series中的data，自动生成对应的坐标范围。

柱状图的使用在这个例子中，横坐标是类目型的，因此需要在xAxis中指定对应的值；而纵坐标是数值型的，可以根据series中的data，自动生成对应的坐标范围。option={xAxis:{data:[Mon,Tue,Wed,Thu,Fri,Sat,Sun]},yAxis:{},series:[{type:bar,data:[23,24,18,25,27,28,25]}]};

饼图的使用饼图主要用于表现不同类目的数据在总和中的占比，每个的弧度表示数据数量的比例。饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。饼图的半径可以通过?series.radius?设置，可以是诸如“60%”?这样相对的百分比字符串，或是?200?这样的绝对像素数值。

饼图的使用饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。option={series:[{type:pie,data:[{value:335,name:直接访问},{value:234,name:联盟广告},{value:1548,name:搜索引擎}]}]};

折线图的使用折线图主要用来展示数据项随着时间推移的趋势或变化。可以建立一个横坐标是类目型（catego