|
|
<template> <view class="charts-box"> <qiun-data-charts type="column" :opts="opts" :chartData="chartData" /> </view></template>
<script>export default { data() { return { chartData: {}, //这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: { timing: "easeOut", duration: 1000, rotate: false, rotateLock: false, color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], padding: [15,15,0,5], fontSize: 12, fontColor: "#1989FA", dataLabel: true, dataPointShape: true, dataPointShapeType: "solid", touchMoveLimit: 60, enableScroll: false, enableMarkLine: false, legend: { show: false, position: "bottom", float: "center", padding: 5, margin: 5, backgroundColor: "rgba(0,0,0,0)", borderColor: "rgba(0,0,0,0)", borderWidth: 0, fontSize: 13, fontColor: "#666666", lineHeight: 11, hiddenColor: "#CECECE", itemGap: 10, }, xAxis: { disableGrid: true, disabled: false, axisLine: true, axisLineColor: "#E8E9EC", calibration: false, fontColor: "#686B73", fontSize: 8, lineHeight: 20, marginTop: 0, rotateLabel: false, rotateAngle: 45, itemCount: 5, boundaryGap: "center", splitNumber: 5, gridColor: "#CCCCCC", gridType: "solid", dashLength: 4, gridEval: 1, scrollShow: false, scrollAlign: "left", scrollColor: "#A6A6A6", scrollBackgroundColor: "#EFEBEF", title: "", titleFontSize: 13, titleOffsetY: 0, titleOffsetX: 0, titleFontColor: "#666666", }, yAxis: { data: [ { min: 0, format: "yAxisDemo1", }, ], disabled: true, disableGrid: false, splitNumber: 5, gridType: "dash", dashLength: 8, gridColor: "#E8E9EC", padding: 10, showTitle: false, }, extra: { column: { type: "group", width: 9, activeBgColor: "#000000", activeBgOpacity: 0.08, seriesGap: 2, categoryGap: 3, barBorderCircle: false, linearType: "none", linearOpacity: 1, colorStop: 0, meterBorder: 1, meterFillColor: "#FFFFFF", labelPosition: "outside", }, tooltip: { showBox: false, showArrow: true, showCategory: false, borderWidth: 0, borderRadius: 0, borderColor: "#000000", borderOpacity: 0.7, bgColor: "#000000", bgOpacity: 0.7, gridType: "solid", dashLength: 4, gridColor: "#CCCCCC", boxPadding: 3, fontSize: 12, lineHeight: 20, fontColor: "#FFFFFF", legendShow: true, legendShape: "auto", splitLine: true, horizentalLine: false, xAxisLabel: false, yAxisLabel: false, labelBgColor: "#FFFFFF", labelBgOpacity: 0.7, labelFontColor: "#666666", }, markLine: { type: "solid", dashLength: 4, data: [] } } } }; }, mounted() { this.getServerData(); }, methods: { getServerData() { //模拟从服务器获取数据时的延时
setTimeout(() => { //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = { categories: ["科目一","科目二","科目三道路","科目三理论",], series: [ { name: "目标值", data: [35,36,31,33,], format: "yAxisDemo1", } ] }; this.chartData = JSON.parse(JSON.stringify(res)); }, 500); }, }};</script>
<style scoped> /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ .charts-box { width: 100%; height: 100%; }</style>
|
