微信小程序中使用ec-canvas，包括单图表和多图表
微信小程序中使用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 ></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%;
}
多个图表
<!--pages/analysisList/components/echartList/echartList.wxml-->
<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 ></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() {
var option2 = {
color: ["#00FFCC"],
// 以防y轴被压缩
grid: {
y: 10
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
data: this.data.transmitTimeArr,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
series: [{
name: '转发量',
type: 'line',
data: this.data.transmitDataArr,
}]
};
if (chart2) {
chart2.setOption(option2);
}
},
// 绘制点赞量
runLikeCanva() {
var option3 = {
color: ["#DE4040"],
// 以防y轴被压缩
grid: {
y: 10
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
data: this.data.likeTimeArr,
// show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
series: [{
name: '点赞量',
type: 'line',
data: this.data.likeDataArr,
}]
};
if (chart3) {
chart3.setOption(option3);
}
},
// 绘制评论量
runCommentCanva() {
var option4 = {
color: ["#FFB400"],
// 以防y轴被压缩
grid: {
y: 10
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
data: this.data.commentTimeArr,
// show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
series: [{
name: '评论量',
type: 'line',
data: this.data.commentDataArr,
}]
};
if (chart4) {
chart4.setOption(option4);
}
},
// 绘制收藏量
runCollectCanva() {
var option5 = {
color: ["#FF00FF"],
// 以防y轴被压缩
grid: {
y: 10
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
data: this.data.collectTimeArr,
// show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
series: [{
name: '收藏量',
type: 'line',
data: this.data.collectDataArr,
}]
};
if (chart5) {
chart5.setOption(option5);
}
},
// 绘制广告点击量
runBannerCanva() {
var option6 = {
color: ["#ffffff"],
// 以防y轴被压缩
grid: {
y: 10
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#a1a1a1'
}
},
data: this.data.bannerTimeArr,
// show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a1a1a1'
}
},
// show: false
},
series: [{
name: '广告点击量',
type: 'line',
data: this.data.bannerDataArr,
}]
};
if (chart6) {
chart6.setOption(option6);
}
},
},
})
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