目录
-
使用echarts图表
1. 下载js文件
不要直接用echarts.js(文件太大,无法上传问题),可自由选择所需图表、坐标系、组件进行打包下载
官网打包地址:https://www.echartsjs.com/zh/builder.html
2. 自定义组件ec-canvas
下载wx-canvas.js以及ec-canvas文件夹
3. 创建图表
在使用图表的页面json文件中引入组件
"usingComponents": {
"ec-canvas": "../../MyView/ec-canvas/ec-canvas"
},
在使用图表的页面wxml文件中创建了ec-canvas 组件
<view class="container">
<ec-canvas id="lineCanvas" canvas-id="lineChart" ec="{{ ec }}"></ec-canvas>
</view>
使用图表的页面js文件中,ec
的作用是使图表能够在页面加载后被初始化并设置
var app = getApp();
var util = require('../../../utils/util.js');
import * as echarts from '../../../utils/echarts'; //引入echarts.js
var Chart = null;
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
onInit: true
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.echartsComponnet = this.selectComponent('#lineCanvas');//注意这里的id要与wxml中写的id一致
this.initChart();
this.getStatistics();
},
//获取统计数据
getStatistics: function() {
var that = this;
//显示加载动画
wx.showLoading({
title: '加载中',
mask: true
})
//发起网络请求
wx.request({
url: url,
method: "POST",
header: {
'content-type': 'application/json'
},
success: function(res) {
wx.hideLoading();
if (res.data.code == 0) {
var data = res.data.data;
var dateObj = []
var cateObj = []
for (var i in data) {
dateObj.push(data[i].date)
cateObj.push(data[i].count)
}
that.setData({
dateList: dateObj,
cateList: cateObj
})
//如果是第一次绘制
if (!Chart) {
that.initChart(); //初始化图表
} else {
that.setOption(Chart); //更新数据
}
} else {
wx.showToast({
title: res.data.msg,
duration: 2000,
icon: 'none'
})
}
},
fail: function() {
wx.hideLoading();
wx.showToast({
title: '连接超时',
icon: 'none',
duration: 1500
})
}
})
},
//初始化图表
initChart: function(xdata, ydata) {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
Chart = echarts.init(canvas, null, {
width: width,
height: height
});
this.setOption(Chart);
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return Chart;
});
},
setOption: function(Chart) {
Chart.clear(); // 清除
Chart.setOption(this.getOption()); //获取新数据
},
// 设置表格展示样式
getOption: function() {
var that = this;
// 指定图表的配置项和数据
var option = {
animation: false, //图表直接显示,动画显示
xAxis: {
type: 'category',
data: that.data.dateList, //x轴上的数据是动态的
disableGrid: true,//是否显示表格
},
yAxis: {
type: 'value',
name:'人数',
},
series: [{
type: 'line',
data: that.data.cateList, //y轴上的数据也是动态的
symbol: 'none', //标记的图形
smooth: true,//平滑的折线图
itemStyle: {
normal: {
lineStyle: {
color: '#3585fc',
width:2
}
}
}
}],
grid: { //组件离容器的距离
y: '13%',//容器顶部距y轴上端
y2: '10%',//容器底部距y轴原点
x: '9%',//容器左侧距x轴原点
x2: '5%',//容器右侧距x轴末端
},
}
return option;
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
-
使用柱状图时横坐标名称过长
1. 横坐标名称换行显示
xAxis: {
type: 'category',
data: that.data.cateList, //x轴上的数据是动态的
axisLabel: {//坐标轴刻度标签的相关设置
interval: 0,//坐标轴刻度标签的显示间隔,在类目轴中有效。设置成 0 强制显示所有标签
color: '#353535',
formatter: function (value) {
var valueDetal = value.split("-").join("");
var ret = ""; //拼接加\n返回的类目项
var maxLength = 4; //每项显示文字个数
var valLength = valueDetal.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) { //如果类目项的文字大于3,
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置
var end = start + maxLength; //结束截取的位置
temp = valueDetal.substring(start, end) + "\n";
ret += temp;
}
return ret;
} else {
return valueDetal;
}
}
},
},
2. 横坐标名称竖着显示或者倾斜显示
xAxis: {
type: 'category',
data: that.data.cateList, //x轴上的数据是动态的
axisLabel: {//坐标轴刻度标签的相关设置
interval: 0,//坐标轴刻度标签的显示间隔,在类目轴中有效。设置成 0 强制显示所有标签
rotate:20,//设置倾斜角度(当角度为90时为竖着显示)
color: '#353535',//标签文字颜色
}
}