項目八個人信息模塊開發(fā)TheapplicationofEchartinsmallprograms任務三Echart在小程序中的運用ECharts是一款基于JavaScript的數(shù)據可視化圖表庫，提供直觀、生動、可交互和可個性化定制的數(shù)據可視化圖表。Echarts提供了小程序版本echarts-for-weixin，封裝了成了一個名為ec-canvas的自定義組件供開發(fā)者直接引用，開發(fā)者通過熟悉的ECharts配置方式，快速開發(fā)圖表，滿足各種可視化需求。項目八個人信息模塊開發(fā)任務描述配置ECharts

ECharts可下載源碼自行編譯。在創(chuàng)建項目之后，或者僅需拷貝ec-canvas目錄到新建的項目下，然后做相應的調整。ec-canvas文件夾整個有將近1M，建議在分包中組織可視化頁面。此外，考慮在線定制需要的圖表，下載的文件替換掉ec-canvas/echarts.js。打開pages/profile/profile.json文件，配置如下：{"usingComponents":{

"ec-canvas":"../../ec-canvas/ec-canvas"}}配置ECharts

在profile.wxml設計可視圖區(qū)域，包括柱狀圖、餅圖和折線圖區(qū)域。打開

pages/profile/profile.wxml文件，編寫可視化圖表區(qū)域布局。<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設計可視圖區(qū)域，包括柱狀圖、餅圖和折線圖區(qū)域。打開

pages/profile/profile.wxml文件，編寫可視化圖表區(qū)域布局。<view

class="echarts">

<view

class="data_chart">

<view

class="title">購買商品統(tǒng)計</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>柱狀圖的使用

柱狀圖（或稱條形圖）是一種通過柱形的長度來表現(xiàn)數(shù)據大小的一種常用圖表類型。設置柱狀圖的方式，是將series的type設為bar。在這個示例中，橫坐標是類目型的，因此需要在xAxis中指定對應的值；而縱坐標是數(shù)值型的，可以根據series中的data，自動生成對應的坐標范圍。柱狀圖的使用

在這個例子中，橫坐標是類目型的，因此需要在xAxis中指定對應的值；而縱坐標是數(shù)值型的，可以根據series中的data，自動生成對應的坐標范圍。option={xAxis:{data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{},series:[{type:'bar',data:[23,24,18,25,27,28,25]}]};餅圖的使用

餅圖主要用于表現(xiàn)不同類目的數(shù)據在總和中的占比，每個的弧度表示數(shù)據數(shù)量的比例。餅圖的配置和折線圖、柱狀圖略有不同，不再需要配置坐標軸，而是把數(shù)據名稱和值都寫在系列中。餅圖的半徑可以通過

series.radius

設置，可以是諸如“60%”

這樣相對的百分比字符串，或是

200

這樣的絕對像素數(shù)值。餅圖的使用

餅圖的配置和折線圖、柱狀圖略有不同，不再需要配置坐標軸，而是把數(shù)據名稱和值都寫在系列中。以下是一個最簡單的餅圖的例子。option={series:[{

type:'pie',

data:[{value:335,name:'直接訪問'},

{value:234,name:'聯(lián)盟廣告'},

{value:1548,name:'搜索引擎'}]

}]};折線圖的使用

折線圖主要用來展示數(shù)據項隨著時間推移的趨勢或變化。可以建立一個橫坐標是類目型（category）、縱坐標是數(shù)值型（value）的折線圖。折線圖的使用

通過xAxis將橫坐標設為類目型，并指定了對應的值；通過type將yAxis的類型設定為數(shù)值型。在series中，我們將系列類型設為line，并且通過data指定了折線圖三個點的取值。這樣，就能得到一個最簡單的折線圖了。option={

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