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

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

ECharts可下载源码自行编译。在创建项目之后，或者仅需拷贝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="echarts">

<view

class="data_chart">

<view

class="title">购买商品统计</view>

<ec-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:'搜索引擎'}]

}]};折线图的使用

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

通过xAxis将横坐标设为类目型，并指定了对应的值；通过type将yAxis的类型设定为数值型。在series中，我们将系列类型设为line，并且通过data指定了折线图三个点的取值。这样，就能得到一个最简单的折线图了。option={

xAxis:{type:'category',data:['