小程序点餐系统-微信小程序实战(十六)带你从

--------

小程序点餐系统

-------

一切正常状况下,例如在web端,立即做法是npm install echarts --save 。 但是在小程序中立即安裝的话,会致使编译程序子孙后代码包过大的难题,因而,大家能够应用echart的缩小版本号, echart.min.js。将这个文档放在ec-canvas文档夹下。或去文末的库房详细地址去查询。


第二歩: 完成canvas组件 ec-canvas.js 值得一提的是,一般绘图图表的数据信息都是服务器回到的,因而lazyLoad这个特性默认设置为true,意思为当拿到数据信息以后再开展图表的原始化。

大家会发现这个文档中引入一个WxCanvas,这是一个用于绘图canvas的封裝专用工具。

// ec-canvas.js
import WxCanvas from './wx-canvas';
import * as echarts from './echart';
let ctx;
Component({
 properties: {
 canvasId: {
 type: String,
 value: 'ec-canvas'
 lazyLoad: {
 type: Boolean,
 value: false
 disableTouch: {
 type: Boolean,
 value: false
 throttleTouch: {
 type: Boolean,
 value: false
 ready: function() {
 if (!this.lazyLoad) this.init();
 methods: {
 init: function (callback) {
 ctx = wx.createCanvasContext(this.data.canvasId, this);
 const canvas = new WxCanvas(ctx, this.data.canvasId);
 echarts.setCanvasCreator(() = {
 return canvas;
 var query = wx.createSelectorQuery().in(this);
 query.select('.ec-canvas').boundingClientRect(res = {
 if (typeof callback === 'function') {
 this.chart = callback(canvas, res.width, res.height);
 else if (this.data.ec typeof this.data.ec.onInit === 'function') {
 this.chart = this.data.ec.onInit(canvas, res.width, res.height);
 else {
 this.triggerEvent('onInit', {
 canvas: canvas,
 width: res.width,
 height: res.height
 }).exec();
 canvasToTempFilePath(opt) {
 if (!opt.canvasId) {
 opt.canvasId = this.data.canvasId;
 ctx.draw(true, () = {
 wx.canvasToTempFilePath(opt, this);
 touchStart(e) {
 if (this.chart e.touches.length 0) {
 var touch = e.touches[0];
 var handler = this.chart.getZr().handler;
 handler.dispatch('mousedown', {
 zrX: touch.x,
 zrY: touch.y
 handler.dispatch('mousemove', {
 zrX: touch.x,
 zrY: touch.y
 handler.processGesture(wrapTouch(e), 'start');
 touchMove(e) {
 if (this.chart e.touches.length 0) {
 var touch = e.touches[0];
 var handler = this.chart.getZr().handler;
 handler.dispatch('mousemove', {
 zrX: touch.x,
 zrY: touch.y
 handler.processGesture(wrapTouch(e), 'change');
 touchEnd(e) {
 if (this.chart) {
 const touch = e.changedTouches ? e.changedTouches[0] : {};
 var handler = this.chart.getZr().handler;
 handler.dispatch('mouseup', {
 zrX: touch.x,
 zrY: touch.y
 handler.dispatch('click', {
 zrX: touch.x,
 zrY: touch.y
 handler.processGesture(wrapTouch(e), 'end');
拷贝编码
// wx-canvas.js
export default class WxCanvas {
 constructor(ctx, canvasId) {
 this.ctx = ctx;
 this.canvasId = canvasId;
 this.chart = null;
 WxCanvas.initStyle(ctx);
 this.initEvent();
 getContext(contextType) {
 return contextType === '2d' ? this.ctx : null;
 setChart(chart) {
 this.chart = chart;
 attachEvent () {
 // noop
 detachEvent() {
 // noop
 static initStyle(ctx) {
 const styles = [
 'fillStyle',
 'strokeStyle',
 'globalAlpha',
 'textAlign',
 'textBaseAlign',
 'shadow',
 'lineWidth',
 'lineCap',
 'lineJoin',
 'lineDash',
 'miterLimit',
 'fontSize'
 styles.forEach((style) = {
 Object.defineProperty(ctx, style, {
 set: (value) = {
 if ((style !== 'fillStyle' style !== 'strokeStyle')
 || (value !== 'none' value !== null)
 ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value);
 ctx.createRadialGradient = () = ctx.createCircularGradient(arguments);
 initEvent() {
 this.event = {};
 const eventNames = [{
 wxName: 'touchStart',
 ecName: 'mousedown',
 }, {
 wxName: 'touchMove',
 ecName: 'mousemove',
 }, {
 wxName: 'touchEnd',
 ecName: 'mouseup',
 }, {
 wxName: 'touchEnd',
 ecName: 'click',
 eventNames.forEach((name) = {
 this.event[name.wxName] = (e) = {
 const touch = e.mp.touches[0];
 this.chart._zr.handler.dispatch(name.ecName, {
 zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
 zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
拷贝编码
ec-canvas.wxml
 block wx:if="{{ canvasId }}" 
 canvas
 id="{{ canvasId }}"
 canvasId="{{ canvasId }}"
 bindtouchstart="touchStart"
 bindtouchmove="touchMove"
 bindtouchend="touchEnd"
 binderror="error"
 /canvas 
 /block 
拷贝编码
ec-canvas.json 和 ec-canvas.wxss
{
 "component": true,
 "usingComponents": {}
拷贝编码
.ec-canvas {
 width: 100%;
 height: 100%;
 flex: 1;
拷贝编码

第三歩:在网页页面中引入chart组件
index.js
// index.js
import * as echarts from '../../ec-canvas/echart';
Page({
 data: {
 onLoad: function () {
 this.initChart()
 // 原始化图表
 initChart() {
 const chartComponent = this.selectComponent('#chart')
 chartComponent.init((canvas, width, height) = {
 const chart = echarts.init(canvas, null, {
 width,
 height
 const option = {
 tooltip: {
 trigger: 'axis',
 axisPointer: {
 type: 'shadow'
 legend: {
 orient: 'vertical',
 x: 'right',
 data: ['开单金额'],
 textStyle: {
 fontSize: 12,
 color: '#999999'
 grid: {
 left: '2%',
 right: '5%',
 bottom: '5%',
 top: "15%",
 containLabel: true
 color: ['#87E7FF'],
 xAxis: {
 type: 'category',
 data: ['', '', '', '', '', '', ''],
 axisLabel: {
 textStyle: {
 fontSize: 12,
 color: '#999999'
 axisTick: {
 alignWithLabel: true
 yAxis: {
 type: 'value',
 axisTick: {
 inside: true
 scale: true,
 axisLabel: {
 textStyle: {
 fontSize: 12,
 color: '#999999'
 margin: 5,
 formatter: function (value) {
 if (value = 1000) {
 value = value / 1000 + "k";
 return value;
 series: [{
 name: '金额',
 stack: '-',
 type: 'bar',
 data: [ 572011, 2204, 44337, 62701, 106909, 44410, 146850],
 value: [ 572011, 2204, 44337, 62701, 106909, 44410, 146850]
 chart.setOption(option)
 return chart
拷贝编码

index.wxml
 view 
 view 
 ec-canvas id="chart" lazyLoad="{{ true }}" /ec-canvas 
 /view 
 /view 
拷贝编码

最终一步

此时假如发现网页页面上并沒有图表,操纵台也沒有任何的出错,那末就很有将会忘掉了一个重要环节:为ec-canvas组件加上父级元素,并设定宽高。

.ec {
 margin-top: 40rpx;
 width: 100%;
 height: 400rpx;
拷贝编码

Uniapp中引入echarts与原生态很相近,完成的基本原理也同样。有需要的小小伙伴能够去库房里自取。


---------

小程序点餐系统

------------