uniapp 图表 插件 qiun-data-charts
<view class="charts-box">
<!-- 开启onmovetip后，同时开启canvas2d模式（需要传canvasId），否则在小程序端会很卡。-->
<qiun-data-charts
type="line"
:canvas2d="true"
:canvasId="canvasId"
:chartData="chartData"
background="none"
:ontouch="true"
:onmovetip="true"
:animation="false"
:opts="lineOpts"
tooltipFormat="tooltipIncome"
/>
</view>
data(){
return {
chartData: {},
canvasId: '',
lineOpts: {
"type": "line",
"canvasId": new Date().getTime(),
"canvas2d": false,
"background": "none",
"animation": true,
"timing": "easeOut",
"duration": 1000,
"color": [
"#47C5FF",
"#FFCD30",
"#3DF366"
],
"padding": [
20,
20,
10,
5
],
"rotate": false,
"errorReload": true,
"fontSize": 12,
"fontColor": "#999999",
"enableScroll": false,
"touchMoveLimit": 60,
"enableMarkLine": false,
"dataLabel": false,
"dataPointShape": false,
"dataPointShapeType": "solid",
"xAxis": {
"disabled": false,
"axisLine": false,
"axisLineColor": "#EEEEEE",
"calibration": false,
"fontColor": "#999999",
"fontSize": 12,
"rotateLabel": false,
"labelCount": 10,
"boundaryGap": "justify",
"disableGrid": true,
"gridColor": "#CCCCCC",
"gridType": "dash",
"dashLength": 4,
"gridEval": 1
},
"yAxis": {
"disabled": false,
"disableGrid": false,
"splitNumber": 4,
"gridType": "solid",
"dashLength": 2,
"gridColor": "#CCCCCC",
"padding": 10,
"showTitle": false,
"data": [
{
"position": "left",
"disabled": false,
"axisLine": true,
"axisLineColor": "#fff",
"calibration": false,
"fontColor": "#999999",
"fontSize": 12,
"textAlign": "right",
"title": "",
"titleFontSize": 13,
"titleOffsetY": 0,
"titleOffsetX": 0,
"titleFontColor": "#666666",
"min": null,
"max": null,
"tofix": 2,
"unit": "",
"format": ""
}
]
},
"legend": {
"show": true,
"position": "bottom",
"float": "center",
"padding": 5,
"margin": 5,
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"fontSize": 12,
"fontColor": "#999999",
"lineHeight": 20,
"hiddenColor": "#CECECE",
"itemGap": 10
},
"extra": {
"tooltip": {
"showBox": true,
"showArrow": true,
"showCategory": false,
"borderWidth": 0,
"borderRadius": 5,
"borderColor": "#000000",
"borderOpacity": 0.7,
"bgColor": "#000000",
"bgOpacity": 0.7,
"gridType": "solid",
"dashLength": 4,
"gridColor": "#CCCCCC",
"fontColor": "#FFFFFF",
"splitLine": true,
"horizentalLine": false,
"xAxisLabel": false,
"yAxisLabel": false,
"labelBgColor": "#FFFFFF",
"labelBgOpacity": 0.7,
"labelFontColor": "#666666"
},
"markLine": {
"type": "solid",
"dashLength": 4,
"data": []
}
}
},
}
}
onLoad() {
this.canvasId = this.randomString();
}
methods： {
// 生成32位随机字符串
randomString() {
let len = 32;
let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
let maxPos = chars.length;
let result = '';
for (let i = 0; i < len; i++) {
result += chars.charAt(Math.floor(Math.random() * maxPos));
}
return result;
}
}