小程序中使用echart的方法
闲来无事,帮朋友处理的一个小程序的问题,如有不足,还望大家多多指教和交流QQ:1066330447。
- 开发工具:微信开发者工具+vscode(为了方便写代码,其实开发者工具本身也是可以进行编辑)
- 最终效果图:页面显示
- 流程步骤
1.引js(ec-canvae.js,echart.js,wx-canvas.js)为防止小程序过大导致提交不了,这里需要采用压缩版的js,或者根据需要选择精简版的js。
2.新建一个小程序页面文件夹(包含js,wxml,wxcss),ec-canvas.wxml中的内容为<canvas class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"> </canvas>
ec-canvas.wxss的样式为width:100%;height:100%
3.找到需要插件的页面,打开.wxml的文件 插入如下代码<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
4.页面的样式需要添加,否则页面无法显示
ec-canvas {
width: 100%;
height: 300px;
}
5.js中按小程序的语法正常编写逻辑,我们需要做的就是引用echart的函数部分,我这里新建一个initchart方法,代码大致方式如下
6.大致结构出来了,是不是有点小激动,现在主要看下自己写的那个函数也是就initChart方法中的部分(其实这些我们可以参照echart的文档),
7.重点来了,先初始化echart,不要问为什么先初始化,谁让我们用了别人的插件尼,不初始化不行…,
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
8.初始化完毕后我们需要调用,用什么调用尼,答案是canvas。我们是在canvas上画图嘛,所以这是必然的,代码如下
canvas.setChart(chart);
9.接下来我们开始设置echart的具体信息了,什么x轴,Y轴,各种线,颜色啊什么的,我们统一作为一个对象扔里面大概如下
10.以上完毕之后 我们就要去设置这个对象到echart里面,作为返回的对象到小程序的data上代码如下
chart.setOption(option);
return chart;
全部代码如下
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
},
grid: {
containLabel: true,
left: '10px',
padding:['5px']
},
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// show: false
},
yAxis: {
name: '日活(万)',
nameTextStyle : {
color: "red",
padding : [0, 0, 10, 20],
},
axisLabel: {
formatter: function (value, index) {
return value.toFixed(2) + '%'; //
}
},
x: 'center',
type: 'value',
nameGap : 5 ,
splitNumber: 5 ,
splitLine: {
lineStyle: {
type: 'dolid'
}
}
// show: false
},
series: [{
name: 'A',
type: 'line',
smooth: false,
data: [18, 19, 20, 21 , 22, 23, 24],
}, {
name: 'B',
type: 'line',
smooth: false,
data: [12, 14, 13, 11, 12, 13, 12],
}, {
name: 'C',
type: 'line',
smooth: false,
data: [15, 16, 17, 15, 16, 15, 16],
}]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
}
});