微信小程序中使用ec-canvas(包括單圖表和多圖表)

本文轉載自查看原文 2021-04-28 11:50 988 微信小程序

微信小程序中使用ec-cavas

首先引入ec-canvas插件
首先，下載 GitHub 上的 ecomfe/echarts-for-weixin 項目。
ec-canvas 目錄下有一個 echarts.js，默認我們會在每次 echarts-for-weixin 項目發版的時候替換成最新版的 ECharts。如有必要，可以自行從 ECharts 項目中下載最新發布版，或者從官網自定義構建以減小文件大小。

注意（踩坑）的點：

1 ec-canvas組件標簽這里一定要設置百分比寬高，不然頁面不顯示

2 ec初始化渲染圖表的順序一定要在數據掛載之前，為了保證這一點，要在數據掛載那里做一個異步，不然概率性出現數據掛載在初始化渲染圖表之前

3 在掛載的時候判斷一下圖表有沒有初始化渲染上去，不然圖表未初始化渲染會報錯

4 一個頁面寫多個圖表的時候不能寫一個子組件然后多次調用，這樣子只會顯示最后一個渲染的圖表，乖乖的一個一個的按照下面的這個寫吧（ TODO 這個多個圖表的目前只找到這種寫法，應該會有更優的寫法，這樣寫的有點冗余）

單個圖表
xml中

<view class="container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>
js中

// components/echarts/echarts.js
import * as echarts from '../ec-canvas/echarts';
const app = getApp();

//記得在這里全局聲明一下
var seriesDataArr = [];
var timeArr = [];
var chart = null;

Component({
/**
* 組件的屬性列表
*/
properties: {
// 數據
seriesData: {
type: Array,
value: [],
observer: function (seriesData) {
//這里寫個訂閱事件去監聽父組件傳過來的值，
//為什么要監聽呢，因為父子間時通過調接口異步獲取的數據，需要去監聽一下，在onshow中是獲取不到的
if (seriesData.length > 0) {
//這里為什么要寫setTimeout呢，因為要保證下面的ec渲染初始化圖表之后再來這里去調取數據掛載上去
setTimeout(() => {
console.log(seriesData,'關注度圖表數據');
seriesDataArr = seriesData
this.runColumncCanva()
}, 200)
}
}
},
// 橫坐標日期
time: {
type: Array,
value: [],
observer: function (time) {
if (time.length > 0) {
timeArr = [];
time.forEach(time => {
// 去掉年份，並且以 / 顯示日期
time = [(time.split('-'))[1],(time.split('-'))[2]].join('/')
timeArr.push(time)
})
this.runColumncCanva();
}
}
}
},

/**
* 組件的初始數據
*/
data: {
ec: {
// 初始化圖表
onInit: function (canvas, width, height) {
console.log('關注度渲染ec');
//初始化echarts元素，綁定到全局變量，方便更改數據
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
}
}
},

/**
* 組件的方法列表
*/
methods: {
// 繪制圖表
runColumncCanva() {
var option = {
color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: timeArr,
axisLabel:{
rotate:45,//傾斜度 -90 至 90 默認為0
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: seriesDataArr
};
//這里一定要做個charts是否存在的判斷，因為萬一ec那里沒有初始化，這里就會報錯
if (chart) {
chart.setOption(option);
}
}
}
});
json文件

{
"component": true,
"usingComponents": {
"ec-canvas": "../ec-canvas/ec-canvas"
}
}
//注意的點：
// 1 這個container容器一定要設置固定寬高
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
height: 516rpx;
width: 611rpx;
}
// ！！注意：這里也一定要設置個百分比寬高，不然圖表在頁面上不顯示
ec-canvas {
width: 100%;
height: 100%;
}
多個圖表

<view class="echart-list flex flex-col">
<view class="item-container">
<view class="ec-head">
<view class="bower-text header-text">瀏覽量</view>
<view class="header-text right-text">{{browseDataCount.symbol}}{{browseDataCount.increase}}%</view>
</view>
<view class="ec-container" wx:if="true">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec1 }}"></ec-canvas>
</view>
</view>
<view class="item-container">
<view class="ec-head">
<view class="transmit-text header-text">轉發量</view>
<view class="header-text right-text">{{transmitDataCount.symbol}}{{transmitDataCount.increase}}%</view>
</view>
<view class="ec-container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec2 }}"></ec-canvas>
</view>
</view>
<view class="item-container">
<view class="ec-head">
<view class="like-text header-text">點贊量</view>
<view class="header-text right-text">{{likeDataCount.symbol}}{{likeDataCount.increase}}%</view>
</view>
<view class="ec-container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec3 }}"></ec-canvas>
</view>
</view>
<view class="item-container">
<view class="ec-head">
<view class="comment-text header-text">評論量</view>
<view class="header-text right-text">{{commentDataCount.symbol}}{{commentDataCount.increase}}%</view>
</view>
<view class="ec-container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec4 }}"></ec-canvas>
</view>
</view>
<view class="item-container">
<view class="ec-head">
<view class="collect-text header-text">收藏量</view>
<view class="header-text right-text">{{collectDataCount.symbol}}{{collectDataCount.increase}}%</view>
</view>
<view class="ec-container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec5 }}"></ec-canvas>
</view>
</view>
<block wx:if="{{isPost}}">
<view class="item-container">
<view class="ec-head">
<view class="banner-text header-text">廣告點擊量</view>
<view class="header-text right-text">{{bannerDataCount.symbol}}{{bannerDataCount.increase}}%</view>
</view>
<view class="ec-container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec6 }}"></ec-canvas>
</view>
</view>
</block>
</view>
// pages/analysisList/components/echartList/echartList.js
import * as echarts from '../../../../components/ec-canvas/echarts';
const app = getApp();

var chart1 = null
var chart2 = null
var chart3 = null
var chart4 = null
var chart5 = null
var chart6 = null

Component({
/**
* 組件的屬性列表
*/
properties: {
// 數據
dataList: {
type: Object,
value: {},
observer: function (dataList) {
if (Object.keys(dataList).length !== 0) {
setTimeout(() => {
let browseData = dataList.BROWSE.list
let transmitData = dataList.TRANSMIT.list
let likeData = dataList.LIKE.list
let commentData = dataList.COMMENT.list
let collectData = dataList.COLLECT.list

if (this.data.isPost) {
var bannerData = dataList.BANNER.list
}
// 左上角數據
this.setData({
browseDataCount: {
increase: dataList.BROWSE.increase,
symbol: dataList.BROWSE.symbol
},
transmitDataCount: {
increase: dataList.TRANSMIT.increase,
symbol: dataList.TRANSMIT.symbol
},
likeDataCount: {
increase: dataList.LIKE.increase,
symbol: dataList.LIKE.symbol
},
commentDataCount: {
increase: dataList.COMMENT.increase,
symbol: dataList.COMMENT.symbol
},
collectDataCount: {
increase: dataList.COLLECT.increase,
symbol: dataList.COLLECT.symbol
},
})
if (this.data.isPost) {
this.setData({
bannerDataCount: {
increase: dataList.BANNER.increase,
symbol: dataList.BANNER.symbol
},
})
}
// 處理圖表數據
this.data.browseDataArr = []
this.data.browseTimeArr = []
browseData.forEach(item => {
item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
this.setData({
browseDataArr: [...this.data.browseDataArr, item.num],
browseTimeArr: [...this.data.browseTimeArr, item.createTime],
})
})
this.data.transmitDataArr = []
this.data.transmitTimeArr = []
transmitData.forEach(item => {
item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
this.setData({
transmitDataArr: [...this.data.transmitDataArr, item.num],
transmitTimeArr: [...this.data.transmitTimeArr, item.createTime]
})
})
this.data.likeDataArr = []
this.data.likeTimeArr = []
likeData.forEach(item => {
item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
this.setData({
likeDataArr: [...this.data.likeDataArr, item.num],
likeTimeArr: [...this.data.likeTimeArr, item.createTime]
})
})
this.data.commentDataArr = []
this.data.commentTimeArr = []
commentData.forEach(item => {
item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
this.setData({
commentDataArr: [...this.data.commentDataArr, item.num],
commentTimeArr: [...this.data.commentTimeArr, item.createTime]
})
})
this.data.collectDataArr = []
this.data.collectTimeArr = []
collectData.forEach(item => {
item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
this.setData({
collectDataArr: [...this.data.collectDataArr, item.num],
collectTimeArr: [...this.data.collectTimeArr, item.createTime]
})
})
if (this.data.isPost) {
this.data.bannerDataArr = []
this.data.bannerTimeArr = []
bannerData.forEach(item => {
item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
this.setData({
bannerDataArr: [...this.data.bannerDataArr, item.num],
bannerTimeArr: [...this.data.bannerTimeArr, item.createTime]
})
})
}
setTimeout(() => {
this.runBrowseCanva()
this.runTransmitCanva()
this.runLikeCanva()
this.runCommentCanva()
this.runCollectCanva()
if (this.data.isPost) {
this.runBannerCanva()
}
}, 300)
}, 200)
}
}
},
isPost: {
type: Boolean,
value: false,
}
},

/**
* 組件的初始數據
*/
data: {
ec1: {
// 初始化圖表
onInit: function (canvas, width, height) {
//初始化echarts元素，綁定到全局變量，方便更改數據
chart1 = echarts.init(canvas, null, {
width: width,
height: height,
});
canvas.setChart(chart1);
return chart1;
}
},
ec2: {
// 初始化圖表
onInit: function (canvas, width, height) {
//初始化echarts元素，綁定到全局變量，方便更改數據
chart2 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart2);
return chart2;
}
},
ec3: {
// 初始化圖表
onInit: function (canvas, width, height) {
//初始化echarts元素，綁定到全局變量，方便更改數據
chart3 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart3);
return chart3;
}
},
ec4: {
// 初始化圖表
onInit: function (canvas, width, height) {
//初始化echarts元素，綁定到全局變量，方便更改數據
chart4 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart4);
return chart4;
}
},
ec5: {
// 初始化圖表
onInit: function (canvas, width, height) {
//初始化echarts元素，綁定到全局變量，方便更改數據
chart5 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart5);
return chart5;
}
},
ec6: {
// 初始化圖表
onInit: function (canvas, width, height) {
//初始化echarts元素，綁定到全局變量，方便更改數據
chart6 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart6);
return chart6;
}
},
browseDataArr: [],
transmitDataArr: [],
likeDataArr: [],
commentDataArr: [],
collectDataArr: [],
bannerDataArr: [],
browseTimeArr: [],
transmitTimeArr: [],
likeTimeArr: [],
commentTimeArr: [],
collectTimeArr: [],
bannerTimeArr: [],
browseDataCount: {
increase: '',
symbol: ""
},
transmitDataCount: {
increase: '',
symbol: ""
},
likeDataCount: {
increase: '',
symbol: ""
},
commentDataCount: {
increase: '',
symbol: ""
},
collectDataCount: {
increase: '',
symbol: ""
},
bannerDataCount: {
increase: '',
symbol: ""
},
},

/**
* 組件的方法列表
*/
methods: {
// 繪制瀏覽量
runBrowseCanva() {
var option1 = {
color: ["#7EFF00"],
// 以防y軸被壓縮
grid: {
y: 10
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
data: this.data.browseTimeArr,
// show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
series: [{
name: '瀏覽量',
type: 'line',
data: this.data.browseDataArr,
}]
};
if (chart1) {
chart1.setOption(option1);
}
},
// 繪制轉發量
runTransmitCanva() {

})
json

{
"component": true,
"usingComponents": {
"ec-canvas": "../../../../components/ec-canvas/ec-canvas"
}
}
/* pages/analysisList/components/echartList/echartList.wxss */
.item-container {
height: 372rpx;
background: #3a3a3a;
margin: 25rpx;
}
.ec-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 28rpx 20rpx 28rpx;
border-bottom: 1rpx solid #333;
}

.header-text {
font-size: 24rpx;
line-height: 48rpx;
}
.right-text {
opacity: 0.6;
}
.bower-text {
color: #7EFF00;
}
.transmit-text {
color: #00FFCC;
}
.like-text {
color: #DE4040;
}
.comment-text {
color: #FFB400;
}
.collect-text{
color: #FF00FF;
}
.banner-text {
color: #fff;
}
.ec-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
height: 280rpx;
width: 700rpx;
}

ec-canvas {
width: 100%;
height: 100%;
}
————————————————
版權聲明：本文為CSDN博主「a小毛同學」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/mao871863224/article/details/108877244

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序使用ec-canvas實現echart折線圖時報錯處理方法在微信小程序中使用圖表如何在微信小程序中使用ECharts圖表小程序 ec-canvas 組件封裝微信小程序中使用ECharts 異步加載數據實現圖表微信小程序中使用canvas 微信小程序實現圖表展示微信小程序中canvas繪制圖表層級問題小程序 echarts組件圖表監聽點擊事件觸摸事件（組件： uni-ec-canvas）微信小程序tab切換時echarts不顯示問題及使用小程序中使用echarts圖表顯示模糊