mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
676 lines
13 KiB
JavaScript
676 lines
13 KiB
JavaScript
/*
|
||
* uCharts®
|
||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||
* 复制使用请保留本段注释，感谢支持开源！
|
||
*
|
||
* uCharts®官方网站
|
||
* https://www.uCharts.cn
|
||
*
|
||
* 开源地址:
|
||
* https://gitee.com/uCharts/uCharts
|
||
*
|
||
* uni-app插件市场地址：
|
||
* http://ext.dcloud.net.cn/plugin?id=271
|
||
*
|
||
*/
|
||
|
||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||
const color = [
|
||
'#1890FF',
|
||
'#91CB74',
|
||
'#FAC858',
|
||
'#EE6666',
|
||
'#73C0DE',
|
||
'#3CA272',
|
||
'#FC8452',
|
||
'#9A60B4',
|
||
'#ea7ccc',
|
||
]
|
||
|
||
// 事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
|
||
const formatDateTime = (timeStamp, returnType) => {
|
||
const date = new Date()
|
||
date.setTime(timeStamp * 1000)
|
||
const y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
m = m < 10 ? `0${m}` : m
|
||
let d = date.getDate()
|
||
d = d < 10 ? `0${d}` : d
|
||
let h = date.getHours()
|
||
h = h < 10 ? `0${h}` : h
|
||
let minute = date.getMinutes()
|
||
let second = date.getSeconds()
|
||
minute = minute < 10 ? `0${minute}` : minute
|
||
second = second < 10 ? `0${second}` : second
|
||
if (returnType == 'full') {
|
||
return `${y}-${m}-${d} ${h}:${minute}:${second}`
|
||
}
|
||
if (returnType == 'y-m-d') {
|
||
return `${y}-${m}-${d}`
|
||
}
|
||
if (returnType == 'h:m') {
|
||
return `${h}:${minute}`
|
||
}
|
||
if (returnType == 'h:m:s') {
|
||
return `${h}:${minute}:${second}`
|
||
}
|
||
return [y, m, d, h, minute, second]
|
||
}
|
||
|
||
const cfu = {
|
||
// 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线图',
|
||
'混合图',
|
||
'时间轴折线',
|
||
'时间轴区域',
|
||
'散点图',
|
||
'气泡图',
|
||
'自定义类型',
|
||
],
|
||
// 增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
|
||
// 自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
|
||
categories: [
|
||
'line',
|
||
'column',
|
||
'mount',
|
||
'bar',
|
||
'area',
|
||
'radar',
|
||
'gauge',
|
||
'candle',
|
||
'mix',
|
||
'demotype',
|
||
],
|
||
// instance为实例变量承载属性，不要删除
|
||
instance: {},
|
||
// option为opts及eopts承载属性，不要删除
|
||
option: {},
|
||
// 下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||
formatter: {
|
||
yAxisDemo1(val, index, opts) {
|
||
return `${val}元`
|
||
},
|
||
yAxisDemo2(val, index, opts) {
|
||
return val.toFixed(2)
|
||
},
|
||
xAxisDemo1(val, index, opts) {
|
||
return `${val}年`
|
||
},
|
||
xAxisDemo2(val, index, opts) {
|
||
return formatDateTime(val, 'h:m')
|
||
},
|
||
seriesDemo1(val, index, series, opts) {
|
||
return `${val}元`
|
||
},
|
||
tooltipDemo1(item, category, index, opts) {
|
||
if (index == 0) {
|
||
return `随便用${item.data}年`
|
||
}
|
||
return `其他我没改${item.data}天`
|
||
},
|
||
pieDemo(val, index, series, opts) {
|
||
if (index !== undefined) {
|
||
return `${series[index].name}：${series[index].data}元`
|
||
}
|
||
},
|
||
},
|
||
// 这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
||
demotype: {
|
||
// 我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
|
||
type: 'line',
|
||
color,
|
||
padding: [15, 10, 0, 15],
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
line: {
|
||
type: 'curve',
|
||
width: 2,
|
||
},
|
||
},
|
||
},
|
||
// 下面是自定义配置，请添加项目所需的通用配置
|
||
pie: {
|
||
type: 'pie',
|
||
color,
|
||
padding: [5, 5, 5, 5],
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: true,
|
||
borderWidth: 3,
|
||
borderColor: '#FFFFFF',
|
||
},
|
||
},
|
||
},
|
||
ring: {
|
||
type: 'ring',
|
||
color,
|
||
padding: [5, 5, 5, 5],
|
||
rotate: false,
|
||
dataLabel: true,
|
||
legend: {
|
||
show: true,
|
||
position: 'right',
|
||
lineHeight: 25,
|
||
},
|
||
title: {
|
||
name: '收益率',
|
||
fontSize: 15,
|
||
color: '#666666',
|
||
},
|
||
subtitle: {
|
||
name: '70%',
|
||
fontSize: 25,
|
||
color: '#7cb5ec',
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 30,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: true,
|
||
borderWidth: 3,
|
||
borderColor: '#FFFFFF',
|
||
},
|
||
},
|
||
},
|
||
rose: {
|
||
type: 'rose',
|
||
color,
|
||
padding: [5, 5, 5, 5],
|
||
legend: {
|
||
show: true,
|
||
position: 'left',
|
||
lineHeight: 25,
|
||
},
|
||
extra: {
|
||
rose: {
|
||
type: 'area',
|
||
minRadius: 50,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 2,
|
||
borderColor: '#FFFFFF',
|
||
},
|
||
},
|
||
},
|
||
word: {
|
||
type: 'word',
|
||
color,
|
||
extra: {
|
||
word: {
|
||
type: 'normal',
|
||
autoColors: false,
|
||
},
|
||
},
|
||
},
|
||
funnel: {
|
||
type: 'funnel',
|
||
color,
|
||
padding: [15, 15, 0, 15],
|
||
extra: {
|
||
funnel: {
|
||
activeOpacity: 0.3,
|
||
activeWidth: 10,
|
||
border: true,
|
||
borderWidth: 2,
|
||
borderColor: '#FFFFFF',
|
||
fillOpacity: 1,
|
||
labelAlign: 'right',
|
||
},
|
||
},
|
||
},
|
||
map: {
|
||
type: 'map',
|
||
color,
|
||
padding: [0, 0, 0, 0],
|
||
dataLabel: true,
|
||
extra: {
|
||
map: {
|
||
border: true,
|
||
borderWidth: 1,
|
||
borderColor: '#666666',
|
||
fillOpacity: 0.6,
|
||
activeBorderColor: '#F04864',
|
||
activeFillColor: '#FACC14',
|
||
activeFillOpacity: 1,
|
||
},
|
||
},
|
||
},
|
||
arcbar: {
|
||
type: 'arcbar',
|
||
color,
|
||
title: {
|
||
name: '百分比',
|
||
fontSize: 25,
|
||
color: '#00FF00',
|
||
},
|
||
subtitle: {
|
||
name: '默认标题',
|
||
fontSize: 15,
|
||
color: '#666666',
|
||
},
|
||
extra: {
|
||
arcbar: {
|
||
type: 'default',
|
||
width: 12,
|
||
backgroundColor: '#E9E9E9',
|
||
startAngle: 0.75,
|
||
endAngle: 0.25,
|
||
gap: 2,
|
||
},
|
||
},
|
||
},
|
||
line: {
|
||
type: 'line',
|
||
color,
|
||
padding: [15, 10, 0, 15],
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
line: {
|
||
type: 'straight',
|
||
width: 2,
|
||
activeType: 'hollow',
|
||
},
|
||
},
|
||
},
|
||
tline: {
|
||
type: 'line',
|
||
color,
|
||
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,
|
||
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,
|
||
padding: [15, 15, 0, 5],
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
data: [{ min: 0 }],
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: 30,
|
||
activeBgColor: '#000000',
|
||
activeBgOpacity: 0.08,
|
||
},
|
||
},
|
||
},
|
||
mount: {
|
||
type: 'mount',
|
||
color,
|
||
padding: [15, 15, 0, 5],
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
data: [{ min: 0 }],
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
mount: {
|
||
type: 'mount',
|
||
widthRatio: 1.5,
|
||
},
|
||
},
|
||
},
|
||
bar: {
|
||
type: 'bar',
|
||
color,
|
||
padding: [15, 30, 0, 5],
|
||
xAxis: {
|
||
boundaryGap: 'justify',
|
||
disableGrid: false,
|
||
min: 0,
|
||
axisLine: false,
|
||
},
|
||
yAxis: {},
|
||
legend: {},
|
||
extra: {
|
||
bar: {
|
||
type: 'group',
|
||
width: 30,
|
||
meterBorde: 1,
|
||
meterFillColor: '#FFFFFF',
|
||
activeBgColor: '#000000',
|
||
activeBgOpacity: 0.08,
|
||
},
|
||
},
|
||
},
|
||
area: {
|
||
type: 'area',
|
||
color,
|
||
padding: [15, 15, 0, 15],
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
area: {
|
||
type: 'straight',
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: false,
|
||
activeType: 'hollow',
|
||
},
|
||
},
|
||
},
|
||
radar: {
|
||
type: 'radar',
|
||
color,
|
||
padding: [5, 5, 5, 5],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: true,
|
||
position: 'right',
|
||
lineHeight: 25,
|
||
},
|
||
extra: {
|
||
radar: {
|
||
gridType: 'radar',
|
||
gridColor: '#CCCCCC',
|
||
gridCount: 3,
|
||
opacity: 0.2,
|
||
max: 200,
|
||
labelShow: true,
|
||
},
|
||
},
|
||
},
|
||
gauge: {
|
||
type: 'gauge',
|
||
color,
|
||
title: {
|
||
name: '66Km/H',
|
||
fontSize: 25,
|
||
color: '#2fc25b',
|
||
offsetY: 50,
|
||
},
|
||
subtitle: {
|
||
name: '实时速度',
|
||
fontSize: 15,
|
||
color: '#1890ff',
|
||
offsetY: -50,
|
||
},
|
||
extra: {
|
||
gauge: {
|
||
type: 'default',
|
||
width: 30,
|
||
labelColor: '#666666',
|
||
startAngle: 0.75,
|
||
endAngle: 0.25,
|
||
startNumber: 0,
|
||
endNumber: 100,
|
||
labelFormat: '',
|
||
splitLine: {
|
||
fixRadius: 0,
|
||
splitNumber: 10,
|
||
width: 30,
|
||
color: '#FFFFFF',
|
||
childNumber: 5,
|
||
childWidth: 12,
|
||
},
|
||
pointer: {
|
||
width: 24,
|
||
color: 'auto',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
candle: {
|
||
type: 'candle',
|
||
color,
|
||
padding: [15, 15, 0, 15],
|
||
enableScroll: true,
|
||
enableMarkLine: true,
|
||
dataLabel: false,
|
||
xAxis: {
|
||
labelCount: 4,
|
||
itemCount: 40,
|
||
disableGrid: true,
|
||
gridColor: '#CCCCCC',
|
||
gridType: 'solid',
|
||
dashLength: 4,
|
||
scrollShow: true,
|
||
scrollAlign: 'left',
|
||
scrollColor: '#A6A6A6',
|
||
scrollBackgroundColor: '#EFEBEF',
|
||
},
|
||
yAxis: {},
|
||
legend: {},
|
||
extra: {
|
||
candle: {
|
||
color: {
|
||
upLine: '#f04864',
|
||
upFill: '#f04864',
|
||
downLine: '#2fc25b',
|
||
downFill: '#2fc25b',
|
||
},
|
||
average: {
|
||
show: true,
|
||
name: ['MA5', 'MA10', 'MA30'],
|
||
day: [5, 10, 20],
|
||
color: ['#1890ff', '#2fc25b', '#facc14'],
|
||
},
|
||
},
|
||
markLine: {
|
||
type: 'dash',
|
||
dashLength: 5,
|
||
data: [
|
||
{
|
||
value: 2150,
|
||
lineColor: '#f04864',
|
||
showLabel: true,
|
||
},
|
||
{
|
||
value: 2350,
|
||
lineColor: '#f04864',
|
||
showLabel: true,
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
mix: {
|
||
type: 'mix',
|
||
color,
|
||
padding: [15, 15, 0, 15],
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
disabled: false,
|
||
disableGrid: false,
|
||
splitNumber: 5,
|
||
gridType: 'dash',
|
||
dashLength: 4,
|
||
gridColor: '#CCCCCC',
|
||
padding: 10,
|
||
showTitle: true,
|
||
data: [],
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
mix: {
|
||
column: {
|
||
width: 20,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
scatter: {
|
||
type: 'scatter',
|
||
color,
|
||
padding: [15, 15, 0, 15],
|
||
dataLabel: false,
|
||
xAxis: {
|
||
disableGrid: false,
|
||
gridType: 'dash',
|
||
splitNumber: 5,
|
||
boundaryGap: 'justify',
|
||
min: 0,
|
||
},
|
||
yAxis: {
|
||
disableGrid: false,
|
||
gridType: 'dash',
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
scatter: {},
|
||
},
|
||
},
|
||
bubble: {
|
||
type: 'bubble',
|
||
color,
|
||
padding: [15, 15, 0, 15],
|
||
xAxis: {
|
||
disableGrid: false,
|
||
gridType: 'dash',
|
||
splitNumber: 5,
|
||
boundaryGap: 'justify',
|
||
min: 0,
|
||
max: 250,
|
||
},
|
||
yAxis: {
|
||
disableGrid: false,
|
||
gridType: 'dash',
|
||
data: [
|
||
{
|
||
min: 0,
|
||
max: 150,
|
||
},
|
||
],
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
bubble: {
|
||
border: 2,
|
||
opacity: 0.5,
|
||
},
|
||
},
|
||
},
|
||
}
|
||
|
||
export default cfu
|