⼩程序中使⽤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 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: {
svg和canvas的区别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);
}
}
}
});
{
"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 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 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 => {
browseDataArr: [...this.data.browseDataArr, item.num],
browseTimeArr: [...this.data.browseTimeArr, ateTime],
})
})
ansmitDataArr = []
ansmitTimeArr = []
transmitData.forEach(item => {
transmitDataArr: [...ansmitDataArr, item.num],
transmitTimeArr: [...ansmitTimeArr, ateTime]
})
})
this.data.likeDataArr = []
this.data.likeTimeArr = []
likeData.forEach(item => {
likeDataArr: [...this.data.likeDataArr, item.num],
likeTimeArr: [...this.data.likeTimeArr, ateTime]
})
})
this.datamentDataArr = []
this.datamentTimeArr = []
commentData.forEach(item => {
commentDataArr: [...this.datamentDataArr, item.num], commentTimeArr: [...this.datamentTimeArr, ateTime]
})
})
llectDataArr = []
llectTimeArr = []
collectData.forEach(item => {
collectDataArr: [...llectDataArr, item.num],
collectTimeArr: [...llectTimeArr, ateTime]
})
})
if (this.data.isPost) {
this.data.bannerDataArr = []
this.data.bannerTimeArr = []
bannerData.forEach(item => {
bannerDataArr: [...this.data.bannerDataArr, item.num],
bannerTimeArr: [...this.data.bannerTimeArr, ateTime]
})
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论