root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

暂时提交

feasure-livedata
lld 2026-03-18 19:28:52 +08:00
parent 9f0318bd9e
commit 5d4d8312d0
2 changed files with 346 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
pages/data/index.vue
View File

@ -3,8 +3,12 @@
<qiun-data-charts <qiun-data-charts
type="line" type="line"
:opts="opts" :opts="opts"
background="#fff"
:chartData="chartData" :chartData="chartData"
:canvas2d="true"
canvasId="nMPkeQGNEosMwoWKKNRBZBIEhguMoMWp"
:ontouch="true" :ontouch="true"
:onmovetip="true"
/> />
</view> </view>
</template> </template>
@ -16,66 +20,6 @@ export default {
chartData: {}, chartData: {},
//这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 //这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: { opts: {
timing: "easeOut",
duration: 2000,
rotate: false,
rotateLock: false,
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,15],
fontSize: 13,
fontColor: "#666666",
dataLabel: false,
dataPointShape: false,
dataPointShapeType: "solid",
touchMoveLimit: 60,
enableScroll: true,
enableMarkLine: false,
legend: {
show: true,
position: "top",
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: "#CCCCCC",
calibration: true,
fontColor: "#666666",
fontSize: 13,
lineHeight: 20,
marginTop: 5,
rotateLabel: true,
rotateAngle: 45,
labelCount: 20,
itemCount: 300,
boundaryGap: "center",
splitNumber: 5,
gridColor: "#CCCCCC",
gridType: "solid",
dashLength: 4,
gridEval: 1,
scrollShow: true,
scrollAlign: "left",
scrollColor: "#A6A6A6",
scrollBackgroundColor: "#EFEBEF",
title: "时间",
titleFontSize: 13,
titleOffsetY: 0,
titleOffsetX: 10,
titleFontColor: "#666666",
format: ""
},
yAxis: { yAxis: {
gridType: "dash", gridType: "dash",
dashLength: 2, dashLength: 2,
@ -130,63 +74,7 @@ export default {
} }
] ]
}, },
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow",
linearType: "none",
onShadow: false,
animation: "vertical"
},
tooltip: {
showBox: true,
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: 13,
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: [
{
value: 0,
lineColor: "#DE4A42",
showLabel: false,
labelAlign: "left",
labelOffsetX: 0,
labelOffsetY: 0,
labelPadding: 6,
labelText: "",
labelFontSize: 13,
labelFontColor: "#666666",
labelBgColor: "#DFE8FF",
labelBgOpacity: 0.8
}
]
}
}
} }
}; };
}, },

583
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
View File

@ -21,83 +21,83 @@ const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改 //事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType)=>{ const formatDateTime = (timeStamp, returnType)=>{
var date = new Date(); var date = new Date();
date.setTime(timeStamp * 1000); date.setTime(timeStamp * 1000);
var y = date.getFullYear(); var y = date.getFullYear();
var m = date.getMonth() + 1; var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m; m = m < 10 ? ('0' + m) : m;
var d = date.getDate(); var d = date.getDate();
d = d < 10 ? ('0' + d) : d; d = d < 10 ? ('0' + d) : d;
var h = date.getHours(); var h = date.getHours();
h = h < 10 ? ('0' + h) : h; h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes(); var minute = date.getMinutes();
var second = date.getSeconds(); var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute; minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second; second = second < 10 ? ('0' + second) : second;
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;} if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;} if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
if(returnType == 'h:m'){return h +':' + minute;} if(returnType == 'h:m'){return h +':' + minute;}
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;} if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
return [y, m, d, h, minute, second]; return [y, m, d, h, minute, second];
} }
const cfu = { const cfu = {
//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可 //demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"], "type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"], "range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype" //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"], "categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
//instance为实例变量承载属性，不要删除 //instance为实例变量承载属性，不要删除
"instance":{}, "instance":{},
//option为opts及eopts承载属性，不要删除 //option为opts及eopts承载属性，不要删除
"option":{}, "option":{},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换 //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter":{ "formatter":{
"yAxisDemo1":function(val, index, opts){return val+'元'}, "yAxisDemo1":function(val, index, opts){return val+'元'},
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)}, "yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
"xAxisDemo1":function(val, index, opts){return val+'年';}, "xAxisDemo1":function(val, index, opts){return val+'年';},
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')}, "xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
"seriesDemo1":function(val, index, series, opts){return val+'元'}, "seriesDemo1":function(val, index, series, opts){return val+'元'},
"tooltipDemo1":function(item, category, index, opts){ "tooltipDemo1":function(item, category, index, opts){
if(index==0){ if(index==0){
return '随便用'+item.data+'年' return '随便用'+item.data+'年'
}else{ }else{
return '其他我没改'+item.data+'天' return '其他我没改'+item.data+'天'
} }
}, },
"pieDemo":function(val, index, series, opts){ "pieDemo":function(val, index, series, opts){
if(index !== undefined){ if(index !== undefined){
return series[index].name+'：'+series[index].data+'元' return series[index].name+'：'+series[index].data+'元'
} }
}, },
}, },
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。 //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
"demotype":{ "demotype":{
//我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置 //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
"type": "line", "type": "line",
"color": color, "color": color,
"padding": [15,10,0,15], "padding": [15,10,0,15],
"xAxis": { "xAxis": {
"disableGrid": true, "disableGrid": true,
}, },
"yAxis": { "yAxis": {
"gridType": "dash", "gridType": "dash",
"dashLength": 2, "dashLength": 2,
}, },
"legend": { "legend": {
}, },
"extra": { "extra": {
"line": { "line": {
"type": "curve", "type": "curve",
"width": 2 "width": 2
}, },
} }
}, },
//下面是自定义配置，请添加项目所需的通用配置 //下面是自定义配置，请添加项目所需的通用配置
"pie":{ "pie":{
"type": "pie", "type": "pie",
"color": color, "color": color,
"padding": [5,5,5,5], "padding": [5,5,5,5],
"extra": { "extra": {
"pie": { "pie": {
@ -113,14 +113,14 @@ const cfu = {
}, },
"ring":{ "ring":{
"type": "ring", "type": "ring",
"color": color, "color": color,
"padding": [5,5,5,5], "padding": [5,5,5,5],
"rotate": false, "rotate": false,
"dataLabel": true, "dataLabel": true,
"legend": { "legend": {
"show": true, "show": true,
"position": "right", "position": "right",
"lineHeight": 25, "lineHeight": 25,
}, },
"title": { "title": {
"name": "收益率", "name": "收益率",
@ -147,12 +147,12 @@ const cfu = {
}, },
"rose":{ "rose":{
"type": "rose", "type": "rose",
"color": color, "color": color,
"padding": [5,5,5,5], "padding": [5,5,5,5],
"legend": { "legend": {
"show": true, "show": true,
"position": "left", "position": "left",
"lineHeight": 25, "lineHeight": 25,
}, },
"extra": { "extra": {
"rose": { "rose": {
@ -170,7 +170,7 @@ const cfu = {
}, },
"word":{ "word":{
"type": "word", "type": "word",
"color": color, "color": color,
"extra": { "extra": {
"word": { "word": {
"type": "normal", "type": "normal",
@ -180,7 +180,7 @@ const cfu = {
}, },
"funnel":{ "funnel":{
"type": "funnel", "type": "funnel",
"color": color, "color": color,
"padding": [15,15,0,15], "padding": [15,15,0,15],
"extra": { "extra": {
"funnel": { "funnel": {
@ -196,9 +196,9 @@ const cfu = {
}, },
"map":{ "map":{
"type": "map", "type": "map",
"color": color, "color": color,
"padding": [0,0,0,0], "padding": [0,0,0,0],
"dataLabel": true, "dataLabel": true,
"extra": { "extra": {
"map": { "map": {
"border": true, "border": true,
@ -213,7 +213,7 @@ const cfu = {
}, },
"arcbar":{ "arcbar":{
"type": "arcbar", "type": "arcbar",
"color": color, "color": color,
"title": { "title": {
"name": "百分比", "name": "百分比",
"fontSize": 25, "fontSize": 25,
@ -237,93 +237,192 @@ const cfu = {
}, },
"line":{ "line":{
"type": "line", "type": "line",
"color": color, timing: "easeOut",
duration: 2000,
rotate: false,
rotateLock: false,
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,15],
fontSize: 13,
fontColor: "#666666",
dataLabel: false,
dataPointShape: false,
dataPointShapeType: "solid",
touchMoveLimit: 60,
enableScroll: false,
enableMarkLine: false,
xAxis: {
disableGrid: true,
disabled: false,
axisLine: true,
axisLineColor: "#CCCCCC",
calibration: true,
fontColor: "#666666",
fontSize: 13,
lineHeight: 20,
marginTop: 10,
rotateLabel: true,
rotateAngle: 45,
labelCount: 15,
itemCount: 300,
boundaryGap: "center",
splitNumber: 5,
gridColor: "#CCCCCC",
gridType: "solid",
dashLength: 4,
gridEval: 1,
scrollShow: true,
scrollAlign: "left",
scrollColor: "#A6A6A6",
scrollBackgroundColor: "#EFEBEF",
title: "时间",
titleFontSize: 13,
titleOffsetY: 0,
titleOffsetX: 10,
titleFontColor: "#666666",
format: ""
},
legend: {
show: true,
position: "top",
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
},
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow",
linearType: "none",
onShadow: false,
animation: "vertical"
},
tooltip: {
showBox: true,
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: 13,
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: [
{
value: 0,
lineColor: "#DE4A42",
showLabel: false,
labelAlign: "left",
labelOffsetX: 0,
labelOffsetY: 0,
labelPadding: 6,
labelText: "",
labelFontSize: 13,
labelFontColor: "#666666",
labelBgColor: "#DFE8FF",
labelBgOpacity: 0.8
}
]
}
}
},
"tline":{
"type": "line",
"color": color,
"padding": [15,10,0,15], "padding": [15,10,0,15],
"xAxis": { "xAxis": {
"disableGrid": true, "disableGrid": false,
"boundaryGap":"justify",
}, },
"yAxis": { "yAxis": {
"gridType": "dash", "gridType": "dash",
"dashLength": 2, "dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
}, },
"legend": { "legend": {
}, },
"extra": { "extra": {
"line": { "line": {
"type": "straight", "type": "curve",
"width": 2, "width": 2,
"activeType": "hollow" "activeType": "hollow"
}, },
} }
}, },
"tline":{ "tarea":{
"type": "line", "type": "area",
"color": color, "color": color,
"padding": [15,10,0,15], "padding": [15,10,0,15],
"xAxis": {
"disableGrid": false,
"boundaryGap":"justify",
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"line": {
"type": "curve",
"width": 2,
"activeType": "hollow"
},
}
},
"tarea":{
"type": "area",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
"boundaryGap":"justify",
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"area": {
"type": "curve",
"opacity": 0.2,
"addLine": true,
"width": 2,
"gradient": true,
"activeType": "hollow"
},
}
},
"column":{
"type": "column",
"color": color,
"padding": [15,15,0,5],
"xAxis": { "xAxis": {
"disableGrid": true, "disableGrid": true,
"boundaryGap":"justify",
}, },
"yAxis": { "yAxis": {
"data":[{"min":0}] "gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"area": {
"type": "curve",
"opacity": 0.2,
"addLine": true,
"width": 2,
"gradient": true,
"activeType": "hollow"
},
}
},
"column":{
"type": "column",
"color": color,
"padding": [15,15,0,5],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"data":[{"min":0}]
}, },
"legend": { "legend": {
}, },
@ -336,60 +435,60 @@ const cfu = {
}, },
} }
}, },
"mount":{ "mount":{
"type": "mount", "type": "mount",
"color": color, "color": color,
"padding": [15,15,0,5], "padding": [15,15,0,5],
"xAxis": { "xAxis": {
"disableGrid": true, "disableGrid": true,
}, },
"yAxis": { "yAxis": {
"data":[{"min":0}] "data":[{"min":0}]
}, },
"legend": { "legend": {
}, },
"extra": { "extra": {
"mount": { "mount": {
"type": "mount", "type": "mount",
"widthRatio": 1.5, "widthRatio": 1.5,
}, },
} }
}, },
"bar":{ "bar":{
"type": "bar", "type": "bar",
"color": color, "color": color,
"padding": [15,30,0,5], "padding": [15,30,0,5],
"xAxis": { "xAxis": {
"boundaryGap":"justify", "boundaryGap":"justify",
"disableGrid":false, "disableGrid":false,
"min":0, "min":0,
"axisLine":false "axisLine":false
}, },
"yAxis": { "yAxis": {
}, },
"legend": { "legend": {
}, },
"extra": { "extra": {
"bar": { "bar": {
"type": "group", "type": "group",
"width": 30, "width": 30,
"meterBorde": 1, "meterBorde": 1,
"meterFillColor": "#FFFFFF", "meterFillColor": "#FFFFFF",
"activeBgColor": "#000000", "activeBgColor": "#000000",
"activeBgOpacity": 0.08 "activeBgOpacity": 0.08
}, },
} }
}, },
"area":{ "area":{
"type": "area", "type": "area",
"color": color, "color": color,
"padding": [15,15,0,15], "padding": [15,15,0,15],
"xAxis": { "xAxis": {
"disableGrid": true, "disableGrid": true,
}, },
"yAxis": { "yAxis": {
"gridType": "dash", "gridType": "dash",
"dashLength": 2, "dashLength": 2,
}, },
"legend": { "legend": {
}, },
@ -400,7 +499,7 @@ const cfu = {
"addLine": true, "addLine": true,
"width": 2, "width": 2,
"gradient": false, "gradient": false,
"activeType": "hollow" "activeType": "hollow"
}, },
} }
}, },
@ -408,11 +507,11 @@ const cfu = {
"type": "radar", "type": "radar",
"color": color, "color": color,
"padding": [5,5,5,5], "padding": [5,5,5,5],
"dataLabel": false, "dataLabel": false,
"legend": { "legend": {
"show": true, "show": true,
"position": "right", "position": "right",
"lineHeight": 25, "lineHeight": 25,
}, },
"extra": { "extra": {
"radar": { "radar": {
@ -526,7 +625,7 @@ const cfu = {
"color": color, "color": color,
"padding": [15,15,0,15], "padding": [15,15,0,15],
"xAxis": { "xAxis": {
"disableGrid": true, "disableGrid": true,
}, },
"yAxis": { "yAxis": {
"disabled": false, "disabled": false,
@ -553,53 +652,53 @@ const cfu = {
"type": "scatter", "type": "scatter",
"color":color, "color":color,
"padding":[15,15,0,15], "padding":[15,15,0,15],
"dataLabel":false, "dataLabel":false,
"xAxis": { "xAxis": {
"disableGrid": false, "disableGrid": false,
"gridType":"dash", "gridType":"dash",
"splitNumber":5, "splitNumber":5,
"boundaryGap":"justify", "boundaryGap":"justify",
"min":0 "min":0
}, },
"yAxis": { "yAxis": {
"disableGrid": false, "disableGrid": false,
"gridType":"dash", "gridType":"dash",
}, },
"legend": { "legend": {
}, },
"extra": { "extra": {
"scatter": { "scatter": {
}, },
} }
}, },
"bubble":{ "bubble":{
"type": "bubble", "type": "bubble",
"color":color, "color":color,
"padding":[15,15,0,15], "padding":[15,15,0,15],
"xAxis": { "xAxis": {
"disableGrid": false, "disableGrid": false,
"gridType":"dash", "gridType":"dash",
"splitNumber":5, "splitNumber":5,
"boundaryGap":"justify", "boundaryGap":"justify",
"min":0, "min":0,
"max":250 "max":250
}, },
"yAxis": { "yAxis": {
"disableGrid": false, "disableGrid": false,
"gridType":"dash", "gridType":"dash",
"data":[{ "data":[{
"min":0, "min":0,
"max":150 "max":150
}] }]
}, },
"legend": { "legend": {
}, },
"extra": { "extra": {
"bubble": { "bubble": {
"border":2, "border":2,
"opacity": 0.5, "opacity": 0.5,
}, },
} }
} }
} }