You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
11 KiB
301 lines
11 KiB
"use strict";
|
|
var __assign = (this && this.__assign) || function () {
|
|
__assign = Object.assign || function(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
function step(op) {
|
|
if (f) throw new TypeError("Generator is already executing.");
|
|
while (_) try {
|
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
switch (op[0]) {
|
|
case 0: case 1: t = op; break;
|
|
case 4: _.label++; return { value: op[1], done: false };
|
|
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
default:
|
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
if (t[2]) _.ops.pop();
|
|
_.trys.pop(); continue;
|
|
}
|
|
op = body.call(thisArg, _);
|
|
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
}
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var index_js_1 = require("../../miniprogram_npm/dai-mp/mixins/computed-component/index.js");
|
|
var tools_1 = require("../../utils/tools");
|
|
var app = getApp();
|
|
var systemInfo = wx.getSystemInfoSync();
|
|
var radio = systemInfo.windowWidth / 750;
|
|
var isIos = systemInfo.platform === "ios";
|
|
var fontFamily = isIos ? "sans-serif" : "PingFang SC";
|
|
var fontSize = 20 * radio;
|
|
var chart = null;
|
|
var canvas = null;
|
|
var srcData = [];
|
|
var textShapeList = [];
|
|
var addTextShape = function () {
|
|
if (textShapeList.length > 0) {
|
|
textShapeList.forEach(function (item) {
|
|
item.remove(true);
|
|
});
|
|
textShapeList = [];
|
|
}
|
|
var canvas = chart.get("canvas");
|
|
var group = canvas.addGroup();
|
|
var shapes = {};
|
|
function addFn(list) {
|
|
var listLength = list.length;
|
|
list.forEach(function (obj, index) {
|
|
if (listLength > 7 && index > 0 && index < listLength - 1) {
|
|
if (index % Math.ceil(listLength / 5) != 0) {
|
|
return;
|
|
}
|
|
}
|
|
var offsetX = 6 * radio;
|
|
var offsetY = 1 * radio;
|
|
var point = chart.getPosition(obj);
|
|
var text = group.addShape("text", {
|
|
attrs: {
|
|
x: obj.type === "支持" ? point.x + 2 * offsetX : point.x - offsetX,
|
|
y: point.y + offsetY,
|
|
text: obj.value,
|
|
textAlign: "center",
|
|
textBaseline: "bottom",
|
|
fill: "#333",
|
|
fontWeight: 500,
|
|
fontFamily: fontFamily,
|
|
fontSize: fontSize,
|
|
},
|
|
});
|
|
textShapeList.push(text);
|
|
});
|
|
}
|
|
srcData.sort(function (a, b) {
|
|
return new Date(a.date).getTime() - new Date(b.date).getTime();
|
|
});
|
|
var supData = srcData.filter(function (item) { return item.type == "支持"; });
|
|
var oppData = srcData.filter(function (item) { return item.type == "反对"; });
|
|
addFn(supData);
|
|
addFn(oppData);
|
|
};
|
|
var onInitChart = function (F2, config) {
|
|
F2.Global.fontFamily = fontFamily;
|
|
F2.Global.fontSize = fontSize;
|
|
chart = new F2.Chart(__assign({ pixelRatio: radio }, config));
|
|
var supColor = "#0C4A9D";
|
|
var oppColor = "#CB3B30";
|
|
chart.source(srcData, {
|
|
date: {
|
|
range: [0, 1],
|
|
type: "timeCat",
|
|
mask: "MM-DD",
|
|
},
|
|
value: {},
|
|
});
|
|
chart.axis("date", {
|
|
line: {
|
|
lineWidth: 1 * radio,
|
|
stroke: "#E7EEEE",
|
|
},
|
|
label: {
|
|
fontWeight: 500,
|
|
fontSize: fontSize,
|
|
fill: "#B5B7BF",
|
|
textBaseline: "middle",
|
|
},
|
|
labelOffset: 25 * radio,
|
|
country: {
|
|
range: [0.1, 0.9],
|
|
},
|
|
grid: null,
|
|
});
|
|
chart.axis("value", {
|
|
line: {
|
|
lineWidth: 1 * radio,
|
|
stroke: "#E7EEEE",
|
|
},
|
|
labelOffset: 20 * radio,
|
|
label: {
|
|
fontWeight: 500,
|
|
fontSize: fontSize,
|
|
fill: "#B5B7BF",
|
|
},
|
|
});
|
|
chart.legend({
|
|
position: "bottom",
|
|
align: "center",
|
|
offsetY: -30 * radio,
|
|
custom: true,
|
|
nameStyle: {
|
|
fill: "#999",
|
|
fontWeight: 500,
|
|
fontSize: fontSize,
|
|
},
|
|
itemWidth: 150 * radio,
|
|
wordSpace: 25 * radio,
|
|
items: [
|
|
{
|
|
name: "支持",
|
|
marker: function (x, y, r, ctx) {
|
|
ctx.lineWidth = 10 * radio;
|
|
ctx.strokeStyle = supColor;
|
|
ctx.moveTo(x - r - 15 * radio, y);
|
|
ctx.lineTo(x + r + 15 * radio, y);
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
},
|
|
},
|
|
{
|
|
name: "反对",
|
|
marker: function (x, y, r, ctx) {
|
|
ctx.lineWidth = 10 * radio;
|
|
ctx.strokeStyle = oppColor;
|
|
ctx.moveTo(x - r - 15 * radio, y);
|
|
ctx.lineTo(x + r + 15 * radio, y);
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
chart
|
|
.line()
|
|
.position("date*value")
|
|
.color("type", function (type) {
|
|
if (type === "支持") {
|
|
return supColor;
|
|
}
|
|
return oppColor;
|
|
})
|
|
.style("type", {
|
|
lineWidth: 1,
|
|
})
|
|
.animate();
|
|
chart.render();
|
|
addTextShape();
|
|
return chart;
|
|
};
|
|
Component({
|
|
behaviors: [index_js_1.default],
|
|
properties: {
|
|
canvasId: {
|
|
type: String,
|
|
value: "canvas",
|
|
},
|
|
srcData: {
|
|
type: Array,
|
|
value: [],
|
|
},
|
|
},
|
|
data: {
|
|
iniLoaded: false,
|
|
opts: {
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
onInitChart: onInitChart,
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
srcData: function (arr) {
|
|
if (Array.isArray(arr) && arr.length > 0) {
|
|
this.updateData(arr);
|
|
}
|
|
},
|
|
},
|
|
lifetimes: {
|
|
ready: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0: return [4, tools_1.nextTick(100)];
|
|
case 1:
|
|
_a.sent();
|
|
this.init([
|
|
{ value: 0, type: "支持", date: "0000-01-01" },
|
|
{ value: 0, type: "反对", date: "0000-01-01" },
|
|
]);
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
detached: function () { },
|
|
},
|
|
pageLifetimes: {
|
|
show: function () { },
|
|
hide: function () { },
|
|
},
|
|
methods: {
|
|
init: function (data) {
|
|
if (data === void 0) { data = []; }
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var _a, width, height, opts;
|
|
return __generator(this, function (_b) {
|
|
switch (_b.label) {
|
|
case 0: return [4, tools_1.getNodeRect("chart", this)];
|
|
case 1:
|
|
_a = _b.sent(), width = _a.width, height = _a.height;
|
|
opts = this.data.opts;
|
|
opts.width = width;
|
|
opts.height = height;
|
|
this.setData({
|
|
opts: opts,
|
|
});
|
|
srcData = data;
|
|
this.setData({
|
|
iniLoaded: true,
|
|
});
|
|
console.log("折线图组件初始化完毕");
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
updateData: function (data) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0:
|
|
if (!(!this.data.iniLoaded || !chart)) return [3, 2];
|
|
return [4, tools_1.nextTick(100)];
|
|
case 1:
|
|
_a.sent();
|
|
return [3, 0];
|
|
case 2:
|
|
chart.changeData(data);
|
|
srcData = data;
|
|
addTextShape();
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
});
|
|
|