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.
122 lines
2.9 KiB
122 lines
2.9 KiB
<template>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// props: ['chartData'],
|
|
data() {
|
|
return {
|
|
chartData: {},
|
|
//这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
opts: {
|
|
"type": "gauge",
|
|
"canvasId": "",
|
|
"canvas2d": false,
|
|
"background": "none",
|
|
"animation": true,
|
|
"timing": "easeOut",
|
|
"duration": 1000,
|
|
"color": [
|
|
"#1890FF",
|
|
"#91CB74",
|
|
"#FAC858",
|
|
"#EE6666",
|
|
"#73C0DE",
|
|
"#3CA272",
|
|
"#FC8452",
|
|
"#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
"rotate": false,
|
|
"errorReload": true,
|
|
"fontSize": 10, //刻度字体大小
|
|
"fontColor": "#666666",
|
|
"enableScroll": false,
|
|
"touchMoveLimit": 60,
|
|
"enableMarkLine": false,
|
|
"dataLabel": true,
|
|
"dataPointShape": true,
|
|
"dataPointShapeType": "solid",
|
|
"tapLegend": true,
|
|
"title": {
|
|
"name": "40%",
|
|
"fontSize": 40,
|
|
"color": "rgba(0, 0, 0, 0.8)",
|
|
"offsetX": 0,
|
|
"offsetY": 0
|
|
},
|
|
"subtitle": {
|
|
"name": "通过率",
|
|
"fontSize": 14,
|
|
"color": "#333",
|
|
"offsetX": 0,
|
|
"offsetY": 8, //调整纵向距离
|
|
},
|
|
"extra": {
|
|
"gauge": {
|
|
"type": "default",
|
|
"width": 10, //环形宽度
|
|
"labelColor": "#91B1EC",
|
|
"labelOffset": 8, //label标注与环形的距离
|
|
"startAngle": 0.75,
|
|
"endAngle": 0.25,
|
|
"startNumber": 0,
|
|
"endNumber": 100,
|
|
"format": "",
|
|
"splitLine": {
|
|
"fixRadius": 0,
|
|
"splitNumber": 4, //分割段数
|
|
"width": 30,
|
|
"color": "transparent", //去掉分割线
|
|
"childNumber": 5,
|
|
"childWidth": 12
|
|
},
|
|
"pointer": {
|
|
"width": 0,
|
|
"color": "rgba(134, 153, 187, 1)"
|
|
},
|
|
"labelFormat": ""
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getServerData();
|
|
},
|
|
methods: {
|
|
getServerData() {
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
this.chartData = {
|
|
categories: [{
|
|
"value": 0.2,
|
|
"color": "#3776FF"
|
|
},
|
|
{
|
|
"value": 1,
|
|
"color": "#D7E4FF"
|
|
}
|
|
],
|
|
series: [{
|
|
"name": "测试通过率",
|
|
"data": '80%'
|
|
}]
|
|
}
|
|
}, 500);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 370rpx;
|
|
height: 368rpx;
|
|
}
|
|
</style>
|