初始化

This commit is contained in:
2025-07-28 14:57:35 +08:00
commit 8fcffec73d
412 changed files with 73935 additions and 0 deletions

View File

@@ -0,0 +1,242 @@
<template>
<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
<canvas type="2d" class="echarts" :canvas-id="canvasId" :id="canvasId" @touchstart="touchStart"
@touchmove="touchMove" @touchend="touchEnd" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
<canvas class="echarts" :canvas-id="canvasId" :id="canvasId" @touchstart="touchStart" @touchmove="touchMove"
@touchend="touchEnd" />
<!-- #endif -->
</template>
<script>
/**
* echartsForUniApp echart兼容uni-app
* @description echart兼容uni-app
* @property {Object} option 图表数据
* @property {String} canvasId 画布id
* @example <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
*/
import WxCanvas from './wx-canvas.js';
import * as echarts from './echarts.min.js';
var chartList = {}
export default {
props: {
canvasId: {
type: String,
default: 'echarts'
},
option: {
type: Object,
default: () => {
return {}
}
},
},
watch: {
option(newValue, oldValue) {
if(newValue.series){
this.initChart(newValue)
}
}
},
data() {
return {
ctx:null
}
},
mounted() {
// Disable prograssive because drawImage doesn't support DOM as parameter
// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
echarts.registerPreprocessor(option => {
if (option && option.series) {
if (option.series.length > 0) {
option.series.forEach(series => {
series.progressive = 0;
});
} else if (typeof option.series === 'object') {
option.series.progressive = 0;
}
}
});
},
methods: {
getCanvasAttr2d() {
return new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this)
query
.select('#' + this.canvasId)
.fields({
node: true,
size: true
})
.exec(res => {
const canvasNode = res[0].node
this.canvasNode = canvasNode
const canvasDpr = uni.getSystemInfoSync().pixelRatio
const canvasWidth = res[0].width
const canvasHeight = res[0].height
this.ctx = canvasNode.getContext('2d')
const canvas = new WxCanvas(this.ctx, this.canvasId, true, canvasNode)
echarts.setCanvasCreator(() => {
return canvas
})
resolve({
canvas,
canvasWidth,
canvasHeight,
canvasDpr
})
})
});
},
getCanvasAttr() {
return new Promise((resolve, reject) => {
this.ctx = uni.createCanvasContext(this.canvasId, this);
var canvas = new WxCanvas(this.ctx, this.canvasId, false);
echarts.setCanvasCreator(() => {
return canvas;
});
const canvasDpr = 1
var query = uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
query.select('#' + this.canvasId).boundingClientRect(res => {
const canvasWidth = res.width
const canvasHeight = res.height
resolve({
canvas,
canvasWidth,
canvasHeight,
canvasDpr
})
}).exec();
});
},
// #ifdef H5
//H5绘制图表
initChart(option) {
this.ctx = uni.createCanvasContext(this.canvasId, this);
chartList[this.canvasId] = echarts.init(document.getElementById(this.canvasId));
chartList[this.canvasId].setOption(option?option:this.option);
},
//H5生成图片
canvasToTempFilePath(opt) {
const base64 = chartList[this.canvasId].getDataURL()
opt.success && opt.success({tempFilePath:base64})
},
// #endif
// #ifndef H5
//绘制图表
async initChart(option) {
// #ifdef MP-WEIXIN || MP-TOUTIAO
const canvasAttr = await this.getCanvasAttr2d();
// #endif
// #ifndef MP-WEIXIN || MP-TOUTIAO
const canvasAttr = await this.getCanvasAttr();
// #endif
const {
canvas,
canvasWidth,
canvasHeight,
canvasDpr
} = canvasAttr
chartList[this.canvasId] = echarts.init(canvas, null, {
width: canvasWidth,
height: canvasHeight,
devicePixelRatio: canvasDpr // new
});
canvas.setChart(chartList[this.canvasId]);
chartList[this.canvasId].setOption(option?option:this.option);
},
//生成图片
canvasToTempFilePath(opt) {
// #ifdef MP-WEIXIN || MP-TOUTIAO
var query = uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
query.select('#' + this.canvasId).fields({ node: true, size: true }).exec(res => {
const canvasNode = res[0].node
opt.canvas = canvasNode
uni.canvasToTempFilePath(opt, this)
})
// #endif
// #ifndef MP-WEIXIN || MP-TOUTIAO
if (!opt.canvasId) {
opt.canvasId = this.canvasId;
}
this.ctx.draw(true, () => {
uni.canvasToTempFilePath(opt, this);
});
// #endif
},
// #endif
touchStart(e) {
if (chartList[this.canvasId] && e.touches.length > 0) {
var touch = e.touches[0];
var handler = chartList[this.canvasId].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 (chartList[this.canvasId] && e.touches.length > 0) {
var touch = e.touches[0];
var handler = chartList[this.canvasId].getZr().handler;
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'change');
}
},
touchEnd(e) {
if (chartList[this.canvasId]) {
const touch = e.changedTouches ? e.changedTouches[0] : {};
var handler = chartList[this.canvasId].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');
}
}
}
}
function wrapTouch(event) {
for (let i = 0; i < event.touches.length; ++i) {
const touch = event.touches[i];
touch.offsetX = touch.x;
touch.offsetY = touch.y;
}
return event;
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,105 @@
export default class WxCanvas {
constructor(ctx, canvasId, isNew, canvasNode) {
this.ctx = ctx;
this.canvasId = canvasId;
this.chart = null;
this.isNew = isNew
if (isNew) {
this.canvasNode = canvasNode;
}
else {
this._initStyle(ctx);
}
// this._initCanvas(zrender, ctx);
this._initEvent();
}
getContext(contextType) {
if (contextType === '2d') {
return this.ctx;
}
}
// canvasToTempFilePath(opt) {
// if (!opt.canvasId) {
// opt.canvasId = this.canvasId;
// }
// return wx.canvasToTempFilePath(opt, this);
// }
setChart(chart) {
this.chart = chart;
}
attachEvent() {
// noop
}
detachEvent() {
// noop
}
_initCanvas(zrender, ctx) {
zrender.util.getContext = function () {
return ctx;
};
zrender.util.$override('measureText', function (text, font) {
ctx.font = font || '12px sans-serif';
return ctx.measureText(text);
});
}
_initStyle(ctx) {
ctx.createRadialGradient = () => {
return 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.touches[0];
this.chart.getZr().handler.dispatch(name.ecName, {
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
});
};
});
}
set width(w) {
if (this.canvasNode) this.canvasNode.width = w
}
set height(h) {
if (this.canvasNode) this.canvasNode.height = h
}
get width() {
if (this.canvasNode)
return this.canvasNode.width
return 0
}
get height() {
if (this.canvasNode)
return this.canvasNode.height
return 0
}
}

View File

@@ -0,0 +1,186 @@
<template>
<view class="uni-section">
<view class="uni-section-header" @click="onClick">
<view class="uni-section-header__decoration" v-if="type" :class="type" />
<svg t="1726135504350" class="icon" v-else-if="signIn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12491" width="32" height="32"><path d="M704 170.666667H320v53.333333a21.333333 21.333333 0 0 1-42.666667 0V170.666667h-42.666666a106.666667 106.666667 0 0 0-106.666667 106.666666v85.333334h768v-85.333334a106.666667 106.666667 0 0 0-106.666667-106.666666h-42.666666v53.333333a21.333333 21.333333 0 0 1-42.666667 0V170.666667z m42.666667-42.666667h42.666666a149.333333 149.333333 0 0 1 149.333334 149.333333v512a149.333333 149.333333 0 0 1-149.333334 149.333334H234.666667a149.333333 149.333333 0 0 1-149.333334-149.333334V277.333333a149.333333 149.333333 0 0 1 149.333334-149.333333h42.666666V96a21.333333 21.333333 0 0 1 42.666667 0V128h384V96a21.333333 21.333333 0 0 1 42.666667 0V128z m149.333333 277.333333H128v384a106.666667 106.666667 0 0 0 106.666667 106.666667h554.666666a106.666667 106.666667 0 0 0 106.666667-106.666667V405.333333zM327.210667 642.304a21.333333 21.333333 0 0 1 28.245333-32l98.048 86.549333a21.333333 21.333333 0 0 0 29.866667-1.642666l179.882666-197.568a21.333333 21.333333 0 0 1 31.552 28.714666l-179.861333 197.568a64 64 0 0 1-89.664 4.906667l-98.069333-86.528z" fill="#f4ea2a" p-id="12492"></path></svg>
<svg t="1726135142690" class="icon" v-else-if="List" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11328" width="32" height="32"><path d="M918.764335 161.280677 811.054238 161.280677l0-20.906253c0-12.507629-10.304119-22.811747-23.687733-22.811747L661.856742 117.562677c-6.96273-27.435506-21.421007-51.628962-40.891366-70.909675-27.841891-27.173613-66.791639-44.277908-109.12793-44.277908-42.589152 0-80.7171 17.104295-109.100838 44.277908-19.750313 19.280713-34.217621 43.474169-40.891366 70.909675L236.326449 117.562677c-13.356522 0-23.398748 10.304119-23.398748 22.811747l0 20.906253L104.928618 161.280677c-21.709992 0-38.940718 17.655172-38.940718 38.308563l0 783.71807c0 21.213299 17.239757 38.308563 38.940718 38.308563l813.835717 0c21.709992 0 39.256795-17.095264 39.256795-38.308563L958.021131 199.598271C958.021131 178.93585 940.474328 161.280677 918.764335 161.280677L918.764335 161.280677zM436.132428 79.245083 436.132428 79.245083c19.217497-19.289743 46.210495-30.713678 75.705018-30.713678 29.512585 0 56.514613 11.432966 75.73211 30.713678 11.125919 10.602134 20.039298 23.642579 25.584196 38.308563L411.081048 117.553647C416.373084 102.887662 425.033601 89.856248 436.132428 79.245083L436.132428 79.245083zM259.698104 163.439033 259.698104 163.439033l504.287715 0 0 72.562307L259.698104 236.001341 259.698104 163.439033 259.698104 163.439033zM879.796525 945.034871 879.796525 945.034871 144.465367 945.034871 144.465367 238.159697l68.462334 0 0 20.662422c0 13.040444 10.042226 22.793686 23.398748 22.793686l551.049087 0c13.383614 0 23.687733-9.753241 23.687733-22.793686l0-20.662422 68.742288 0L879.805556 945.034871 879.796525 945.034871zM281.949943 565.245471 281.949943 565.245471c-21.700961 0-39.247764 16.851433-39.247764 38.561425 0 20.915284 17.546803 38.064732 39.247764 38.064732 21.737084 0 39.256795-17.149449 39.256795-38.064732C321.197707 582.087874 303.677996 565.245471 281.949943 565.245471L281.949943 565.245471zM281.949943 727.140242 281.949943 727.140242c-21.700961 0-39.247764 16.851433-39.247764 38.03764s17.546803 38.03764 39.247764 38.03764c21.737084 0 39.256795-16.851433 39.256795-38.03764S303.677996 727.140242 281.949943 727.140242L281.949943 727.140242zM740.072317 418.540471 740.072317 418.540471 399.39522 418.540471c-13.356522 0-23.66064 10.611165-23.66064 23.091701 0 12.76049 10.304119 23.091701 23.66064 23.091701L740.072317 464.723873c12.823706 0 23.380686-10.331211 23.380686-23.091701C763.453003 429.142605 752.896023 418.540471 740.072317 418.540471L740.072317 418.540471zM281.949943 403.323609 281.949943 403.323609c-21.700961 0-39.247764 17.402311-39.247764 38.308563 0 21.186207 17.546803 38.868472 39.247764 38.868472 21.737084 0 39.256795-17.682265 39.256795-38.868472C321.197707 420.716889 303.677996 403.323609 281.949943 403.323609L281.949943 403.323609zM740.072317 742.08618 740.072317 742.08618 399.39522 742.08618c-13.356522 0-23.66064 10.602134-23.66064 23.091701 0 12.489567 10.304119 22.811747 23.66064 22.811747L740.072317 787.989629c12.823706 0 23.380686-10.331211 23.380686-22.811747C763.453003 752.688315 752.896023 742.08618 740.072317 742.08618L740.072317 742.08618zM740.072317 580.444272 740.072317 580.444272 399.39522 580.444272c-13.356522 0-23.66064 10.349272-23.66064 23.362625 0 12.516659 10.304119 22.567916 23.66064 22.567916L740.072317 626.374813c12.823706 0 23.380686-10.051257 23.380686-22.567916C763.453003 590.793544 752.896023 580.444272 740.072317 580.444272L740.072317 580.444272z" p-id="11329" fill="#f4ea2a"></path></svg>
<slot v-else name="decoration"></slot>
<view class="uni-section-header__content">
<text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
<text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
</view>
<view class="uni-section-header__slot-right">
<slot name="right"></slot>
</view>
</view>
<view class="uni-section-content" :style="{padding: _padding}">
<slot />
</view>
</view>
</template>
<script>
/**
* Section 标题栏
* @description 标题栏
* @property {String} type = [line|circle|square] 标题装饰类型
* @value line 竖线
* @value circle 圆形
* @value square 正方形
* @property {String} title 主标题
* @property {String} titleFontSize 主标题字体大小
* @property {String} titleColor 主标题字体颜色
* @property {String} subTitle 副标题
* @property {String} subTitleFontSize 副标题字体大小
* @property {String} subTitleColor 副标题字体颜色
* @property {String} padding 默认插槽 padding
*/
export default {
name: 'UniSection',
emits:['click'],
props: {
List: {
type: String,
default: ''
},
signIn: {
type: String,
default: ''
},
type: {
type: String,
default: ''
},
title: {
type: String,
required: true,
default: ''
},
titleFontSize: {
type: String,
default: '14px'
},
titleColor:{
type: String,
default: '#333'
},
subTitle: {
type: String,
default: ''
},
subTitleFontSize: {
type: String,
default: '12px'
},
subTitleColor: {
type: String,
default: '#999'
},
padding: {
type: [Boolean, String],
default: false
}
},
computed:{
_padding(){
if(typeof this.padding === 'string'){
return this.padding
}
return this.padding?'10px':''
}
},
watch: {
title(newVal) {
if (uni.report && newVal !== '') {
uni.report('title', newVal)
}
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" >
$uni-primary: #2979ff !default;
.uni-section {
background-color: #fff;
.uni-section-header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 12px 10px;
font-weight: normal;
&__decoration{
margin-right: 6px;
background-color: $uni-primary;
&.line {
width: 4px;
height: 12px;
border-radius: 10px;
}
&.circle {
width: 8px;
height: 8px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
&.square {
width: 8px;
height: 8px;
}
&.signin1 {
background-image: url(/static/images/signin2.png);
background-size: cover;
}
&.signin2 {
background-image: url(/static/images/List.png);
}
}
&__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
color: #333;
.distraction {
flex-direction: row;
align-items: center;
}
&-sub {
margin-top: 2px;
}
}
&__slot-right{
font-size: 14px;
}
}
.uni-section-content{
font-size: 14px;
}
}
</style>