echarts-for-weixin 項目提供了一個小程序組件，用這種方式可以方便地使用 ECharts。
下載
echarts-for-weixin ec-canvas
如果你想使用最新版本的echarts可以將 ec-canvas 目錄下的 echarts.js 替換為最新版的 ECharts。如果希望減小包體積大小，可以使用自定義構(gòu)建生成并替換 echarts.js。需要注意的是新版的 ECharts 微信小程序支持微信 Canvas 2d，當(dāng)用戶的基礎(chǔ)庫版本 >= 2.9.0 且沒有設(shè)置 force-use-old-canvas=“true” 的情況下，使用新的 Canvas 2d（默認(rèn)），使用新的 Canvas 2d 可以提升渲染性能，解決非同層渲染問題，強(qiáng)烈建議開啟。
使用
在項目根目錄下創(chuàng)建components文件夾，將下載的ec-canvas放在components文件夾中。
詳情可參考echart官網(wǎng)文章來源：http://www.zghlxwxcb.cn/news/detail-775478.html
使用ec-canvas實現(xiàn)蜘蛛網(wǎng)案例：
在components中創(chuàng)建radar組件
<!--components/radar/radar.wxml-->
<view class="container">
<ec-canvas class="ec-canvas" id="mychart-dom-radar" isUseNewCanvas="{{ true }}" canvas-id="mychart-radar" ec="{{ ec }}"></ec-canvas>
</view>
/* components/radar/radar.wxss */
.container,.ec-canvas{
width: 100%;
height: 100%;
}
import * as echarts from '../ec-canvas/echarts';
Component({
/**
* 組件的屬性列表
*/
properties: {
data: {
type: Array,
value: []
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
ec: {
// onInit: initChart,
lazyLoad: true, // 懶加載
}
},
lifetimes: {
attached: function() {
// 在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行
this.initchart(this.data.data)
},
detached: function() {
// 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
},
},
// 以下是舊式的定義方式，可以保持對 <2.2.3 版本基礎(chǔ)庫的兼容
attached: function() {
// 在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行
this.initchart(this.data.data)
},
detached: function() {
// 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
},
/**
* 數(shù)據(jù)監(jiān)聽器
*/
observers: {
'data': function(val){
this.initchart(val)
}
},
/**
* 組件的方法列表
*/
methods: {
loadchart(data){
// 綁定組件（ec-canvas標(biāo)簽的id）
let ec_canvas = this.selectComponent('#mychart-dom-radar');
ec_canvas.init((canvas,width,height,dpr)=>{
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 解決模糊顯示的問題
})
// echart表格的內(nèi)容配置
var option = {
backgroundColor: "#ffffff",
xAxis: {
show: false
},
yAxis: {
show: false
},
radar: {
// 雷達(dá)圖每個指示器名稱的配置項。
axisName: {
color: 'rgba(102, 102, 102, 1)',
fontSize: 12,
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 400,
},
// 指示器名稱和指示器軸的距離
nameGap: 8,
// 指示器軸的分割段數(shù)
splitNumber: 4,
// 坐標(biāo)軸軸線
axisLine: {
lineStyle: {
color: 'rgba(234, 234, 234, 1)',
width: 1.5
}
},
splitLine: {
lineStyle: {
color: 'rgba(234, 234, 234, 1)',
width: 1.5
}
},
splitArea: {
areaStyle: {
color: ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)']
}
},
// 雷達(dá)器的指示器
indicator: [{
name: '指示器1',
max: 4,
},
{
name: '指示器2',
max: 4,
},
{
name: '指示器3',
max: 4,
},
{
name: '指示器4',
max: 4,
},
{
name: '指示器5',
max: 4,
},
{
name: '指示器6',
max: 4,
}
]
},
series: [{
type: 'radar',
symbol: 'none',
data: [
{
value: data,
lineStyle: {
color: "rgba(209, 189, 128, 1)",
width: 2,
},
areaStyle: {
color: "rgba(209, 189, 128, 0.3)"
}
}
]
}]
};
chart.setOption(option);
return chart;
})
},
initchart(data){
// 傳遞后臺數(shù)據(jù)到圖表中，進(jìn)行懶加載圖表
this.loadchart(data);
},
}
})
{
"component": true,
"usingComponents": {
"ec-canvas": "/components/ec-canvas/ec-canvas"
}
}
在頁面中使用蜘蛛網(wǎng)組件
<scroll-view style="height: 500px" scroll-y>
<view class="radar">
<my-radar data="{{radarData}}"></my-radar>
</view>
</scroll-view>
/* pages/zxm-radar/index.wxss */
.radar{
width: 570rpx;
height: 570rpx;
}
// pages/zxm-radar/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
radarData: [1, 2, 4, 3, 2, 1]
},
})
{
"usingComponents": {
"my-radar": "/components/radar/radar"
}
}
在此過程中發(fā)現(xiàn)當(dāng)頁面中有滾動時，雖然使用了2d渲染，但在模擬器中圖層會在上層，手機(jī)上在同層，目前沒有想到較好的方式解決，歡迎小伙伴們留言交流探討，至此實現(xiàn)蜘蛛網(wǎng)就結(jié)束了，當(dāng)然你在項目中還是需要根據(jù)實際情形來處理。
文章來源地址http://www.zghlxwxcb.cn/news/detail-775478.html
到了這里，關(guān)于小程序中使用echarts，案例一：實現(xiàn)蜘蛛網(wǎng)（雷達(dá)圖）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
