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.
1226 lines
36 KiB
1226 lines
36 KiB
<template> |
|
<view class="qiun-columns"> |
|
<view class="qiun-padding" style="font-size: 32rpx;"> |
|
<text>{{tips}}</text> |
|
</view> |
|
<view class="qiun-padding"> |
|
<view class="qiun-tip" @tap="changeData()">更新柱状图数据</view> |
|
</view> |
|
<view class="qiun-title-bar" style="background-color: #E5FDC3;"> |
|
<view class="qiun-title-dot-light">柱状图</view> |
|
</view> |
|
<view class="qiun-charts" style="background-color: #E5FDC3;"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" style="background-color: #E5FDC3;" :width="cWidth*pixelRatio" |
|
:height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchIt($event,'canvasColumn')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" style="background-color: #E5FDC3;" @touchstart="touchIt($event,'canvasColumn')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">温度计式图表</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasColumnMeter" id="canvasColumnMeter" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchIt($event,'canvasColumnMeter')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasColumnMeter" id="canvasColumnMeter" class="charts" @touchstart="touchIt($event,'canvasColumnMeter')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">混合图（单坐标系支持画点、线、面、柱）</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasMix" id="canvasMix" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" |
|
@touchend="touchEndMix"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" |
|
@touchend="touchEndMix"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt qiun-rows"> |
|
<view class="qiun-title-dot-light">K线图（蜡烛图）</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchCandle" @touchmove="moveCandle" |
|
@touchend="touchEndCandle"></canvas> |
|
<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 --> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle" |
|
@touchmove="moveCandle" @touchend="touchEndCandle"></canvas> |
|
<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 --> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-padding"> |
|
<view class="qiun-tip" @tap="changeGaugeData()">更新仪表盘数据</view> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">仪表盘</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">圆弧进度图</view> |
|
</view> |
|
<view class="qiun-charts3"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3" :style="{'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth3*(pixelRatio-1)/2+'px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas> |
|
<canvas canvas-id="canvasArcbar2" id="canvasArcbar2" class="charts3" :style="{'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':cWidth3-cWidth3*(pixelRatio-1)/2+'px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas> |
|
<canvas canvas-id="canvasArcbar3" id="canvasArcbar3" class="charts3" :style="{'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':cWidth3*2-cWidth3*(pixelRatio-1)/2+'px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas> |
|
<canvas canvas-id="canvasArcbar2" id="canvasArcbar2" class="charts3" style="margin-left: 250rpx;"></canvas> |
|
<canvas canvas-id="canvasArcbar3" id="canvasArcbar3" class="charts3" style="margin-left: 500rpx;"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">漏斗图</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasFunnel" id="canvasFunnel" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasFunnel')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasFunnel" id="canvasFunnel" class="charts" @touchstart="touchPie($event,'canvasFunnel')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">折线图一（可横向拖拽带滚动条）</view> |
|
<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 --> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" |
|
@touchend="touchEndLineA"></canvas> |
|
<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 --> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA" |
|
@touchmove="moveLineA" @touchend="touchEndLineA"></canvas> |
|
<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 --> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">折线图二（横屏图表）</view> |
|
</view> |
|
<view class="qiun-charts-rotate"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts-rotate" :style="{'width':cWidth2*pixelRatio+'px','height':cHeight2*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth2*(pixelRatio-1)/2+'px','margin-top':-cHeight2*(pixelRatio-1)/2+'px'}" |
|
@touchstart="touchIt($event,'canvasLineB')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts-rotate" @touchstart="touchIt($event,'canvasLineB')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">区域图</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchIt($event,'canvasArea')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchIt($event,'canvasArea')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">饼状图</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasPie')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie($event,'canvasPie')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">环形图</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasRing" id="canvasRing" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasRing')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchPie($event,'canvasRing')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
|
<view class="qiun-title-dot-light">雷达图</view> |
|
</view> |
|
<view class="qiun-charts"> |
|
<!--#ifdef MP-ALIPAY --> |
|
<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasRadar')"></canvas> |
|
<!--#endif--> |
|
<!--#ifndef MP-ALIPAY --> |
|
<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" @touchstart="touchPie($event,'canvasRadar')"></canvas> |
|
<!--#endif--> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import uCharts from '../../../components/u-charts/u-charts.js'; |
|
var _self; |
|
var canvasObj = {}; |
|
|
|
export default { |
|
data() { |
|
return { |
|
cWidth: '', |
|
cHeight: '', |
|
cWidth2: '', //横屏图表 |
|
cHeight2: '', //横屏图表 |
|
cWidth3: '', //圆弧进度图 |
|
cHeight3: '', //圆弧进度图 |
|
arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致 |
|
gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致 |
|
tips: '', |
|
pixelRatio: 1, |
|
serverData: '', |
|
itemCount: 30, //x轴单屏数据密度 |
|
sliderMax: 50 |
|
} |
|
}, |
|
onLoad() { |
|
_self = this; |
|
//#ifdef MP-ALIPAY |
|
uni.getSystemInfo({ |
|
success: function(res) { |
|
if (res.pixelRatio > 1) { |
|
//正常这里给2就行，如果pixelRatio=3性能会降低一点 |
|
//_self.pixelRatio =res.pixelRatio; |
|
_self.pixelRatio = 2; |
|
} |
|
} |
|
}); |
|
//#endif |
|
this.cWidth = uni.upx2px(750); |
|
this.cHeight = uni.upx2px(500); |
|
this.cWidth2 = uni.upx2px(700); |
|
this.cHeight2 = uni.upx2px(1100); |
|
this.cWidth3 = uni.upx2px(250); |
|
this.cHeight3 = uni.upx2px(250); |
|
this.arcbarWidth = uni.upx2px(24); |
|
this.gaugeWidth = uni.upx2px(30); |
|
|
|
//this.fillData(Data); |
|
}, |
|
onReady() { |
|
this.getServerData(); |
|
}, |
|
methods: { |
|
getServerData() { |
|
uni.showLoading({ |
|
title: "正在加载数据..." |
|
}) |
|
uni.request({ |
|
url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json', |
|
data: {}, |
|
success: function(res) { |
|
_self.fillData(res.data); |
|
}, |
|
fail: () => { |
|
_self.tips = "网络错误，小程序端请检查合法域名"; |
|
}, |
|
complete() { |
|
uni.hideLoading(); |
|
} |
|
}); |
|
}, |
|
fillData(data) { |
|
this.serverData = data; |
|
this.tips = data.tips; |
|
this.sliderMax = data.Candle.categories.length; |
|
let Column = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let ColumnMeter = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let LineA = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let LineB = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let Area = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let Pie = { |
|
series: [] |
|
}; |
|
let Ring = { |
|
series: [] |
|
}; |
|
let Funnel = { |
|
series: [] |
|
}; |
|
let Radar = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let Arcbar1 = { |
|
series: [] |
|
}; |
|
let Arcbar2 = { |
|
series: [] |
|
}; |
|
let Arcbar3 = { |
|
series: [] |
|
}; |
|
let Gauge = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let Candle = { |
|
categories: [], |
|
series: [] |
|
}; |
|
let Mix = { |
|
categories: [], |
|
series: [] |
|
}; |
|
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去 |
|
Column.categories = data.Column.categories; |
|
//这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据 |
|
Column.series = data.Column.series; |
|
ColumnMeter.categories = data.ColumnMeter.categories; |
|
//这里的series数据,如果为Meter，series[0]定义为外层数据，series[1]定义为内层数据 |
|
ColumnMeter.series = data.ColumnMeter.series; |
|
LineA.categories = data.LineA.categories; |
|
LineA.series = data.LineA.series; |
|
LineB.categories = data.LineB.categories; |
|
LineB.series = data.LineB.series; |
|
Area.categories = data.Area.categories; |
|
Area.series = data.Area.series; |
|
Pie.series = data.Pie.series; |
|
Ring.series = data.Ring.series; |
|
Funnel.series = data.Pie.series; |
|
//自定义文案示例，需设置format字段 |
|
for (let i = 0; i < Ring.series.length; i++) { |
|
Ring.series[i].format = () => { |
|
return Ring.series[i].name + Ring.series[i].data |
|
}; |
|
} |
|
Radar.categories = data.Radar.categories; |
|
Radar.series = data.Radar.series; |
|
Arcbar1.series = data.Arcbar1.series; |
|
Arcbar2.series = data.Arcbar2.series; |
|
Arcbar3.series = data.Arcbar3.series; |
|
Gauge.categories = data.Gauge.categories; |
|
Gauge.series = data.Gauge.series; |
|
Candle.categories = data.Candle.categories; |
|
Candle.series = data.Candle.series; |
|
Mix.categories = data.Mix.categories; |
|
Mix.series = data.Mix.series; |
|
this.showColumn("canvasColumn", Column); |
|
this.showColumnMeter("canvasColumnMeter", ColumnMeter); |
|
this.showLineA("canvasLineA", LineA); |
|
this.showLineB("canvasLineB", LineB); |
|
this.showArea("canvasArea", Area); |
|
this.showPie("canvasPie", Pie); |
|
this.showRing("canvasRing", Ring); |
|
this.showFunnel("canvasFunnel", Funnel); |
|
this.showRadar("canvasRadar", Radar); |
|
this.showArcbar("canvasArcbar1", Arcbar1); |
|
this.showArcbar2("canvasArcbar2", Arcbar2); |
|
this.showArcbar3("canvasArcbar3", Arcbar3); |
|
this.showGauge("canvasGauge", Gauge); |
|
this.showCandle("canvasCandle", Candle); |
|
this.showMix("canvasMix", Mix); |
|
}, |
|
showColumn(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'column', |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 0, |
|
}, |
|
fontSize: 11, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
animation: false, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
xAxis: { |
|
disableGrid: true, |
|
}, |
|
yAxis: { |
|
format: (val) => { |
|
return val.toFixed(0) + '元' |
|
} |
|
}, |
|
dataLabel: true, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
extra: { |
|
column: { |
|
type: 'group', |
|
width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length |
|
} |
|
} |
|
}); |
|
}, |
|
showColumnMeter(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'column', |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 0, |
|
}, |
|
fontSize: 11, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
animation: false, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
xAxis: { |
|
disableGrid: true, |
|
}, |
|
yAxis: { |
|
//disabled:true |
|
}, |
|
dataLabel: true, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
extra: { |
|
column: { |
|
type: 'meter', |
|
width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length, |
|
meter: { |
|
border: 4, |
|
fillColor: '#E5FDC3' |
|
} |
|
} |
|
} |
|
}); |
|
|
|
}, |
|
showLineA(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'line', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 5, |
|
}, |
|
dataLabel: false, |
|
dataPointShape: false, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
animation: false, |
|
enableScroll: true, //开启图表拖拽功能 |
|
xAxis: { |
|
disableGrid: false, |
|
type: 'grid', |
|
gridType: 'dash', |
|
itemCount: 4, |
|
scrollShow: true, |
|
scrollAlign: 'left', |
|
//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF |
|
//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6 |
|
}, |
|
yAxis: { |
|
//disabled:true |
|
gridType: 'dash', |
|
splitNumber: 8, |
|
min: 10, |
|
max: 180, |
|
format: (val) => { |
|
return val.toFixed(0) + '元' |
|
} //如不写此方法，Y轴刻度默认保留两位小数 |
|
}, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
dataLabel: true, |
|
dataPointShape: true, |
|
extra: { |
|
lineStyle: 'straight' |
|
}, |
|
}); |
|
|
|
}, |
|
showLineB(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'line', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 5, |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
rotate: true, //开启图表横屏 |
|
// #ifdef MP-ALIPAY |
|
rotateLock: true, //百度及支付宝需要锁定旋转 |
|
// #endif |
|
categories: chartData.categories, |
|
animation: false, |
|
series: chartData.series, |
|
xAxis: { |
|
disableGrid: true, |
|
}, |
|
yAxis: { |
|
//disabled:true |
|
}, |
|
width: _self.cWidth2 * _self.pixelRatio, |
|
height: _self.cHeight2 * _self.pixelRatio, |
|
dataLabel: true, |
|
dataPointShape: true, |
|
extra: { |
|
lineStyle: 'curve' |
|
}, |
|
}); |
|
}, |
|
showArea(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'area', |
|
fontSize: 11, |
|
padding: [0, 15, 10, 15], |
|
legend: { |
|
show: true, |
|
position: 'top', |
|
float: 'center', |
|
itemGap: 30, |
|
padding: 5, |
|
lineHeight: 18, |
|
margin: 0, |
|
}, |
|
dataLabel: false, |
|
dataPointShape: true, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
animation: false, |
|
xAxis: { |
|
type: 'grid', |
|
gridColor: '#CCCCCC', |
|
gridType: 'dash', |
|
dashLength: 8, |
|
boundaryGap: 'justify' //两端不留白配置 |
|
}, |
|
yAxis: { |
|
gridType: 'dash', |
|
gridColor: '#CCCCCC', |
|
dashLength: 8, |
|
splitNumber: 5, |
|
}, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
extra: { |
|
area: { |
|
type: 'curve', |
|
opacity: 0.2, |
|
addLine: true, |
|
width: 2 |
|
} |
|
} |
|
}); |
|
}, |
|
showPie(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'pie', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 0, |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
series: chartData.series, |
|
animation: false, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
dataLabel: true, |
|
extra: { |
|
pie: { |
|
lableWidth: 15 |
|
} |
|
}, |
|
}); |
|
}, |
|
showRing(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'ring', |
|
fontSize: 11, |
|
padding: [5, 5, 5, 5], |
|
legend: { |
|
show: true, |
|
position: 'right', |
|
float: 'center', |
|
itemGap: 10, |
|
padding: 5, |
|
lineHeight: 26, |
|
margin: 5, |
|
//backgroundColor:'rgba(41,198,90,0.2)', |
|
//borderColor :'rgba(41,198,90,0.5)', |
|
borderWidth: 1 |
|
}, |
|
title: { |
|
name: '70%', |
|
color: '#7cb5ec', |
|
fontSize: 25 * _self.pixelRatio, |
|
}, |
|
subtitle: { |
|
name: '收益率', |
|
color: '#666666', |
|
fontSize: 15 * _self.pixelRatio, |
|
}, |
|
extra: { |
|
pie: { |
|
lableWidth: 15, |
|
ringWidth: 40 * _self.pixelRatio, //圆环的宽度 |
|
offsetAngle: 0 //圆环的角度 |
|
} |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
series: chartData.series, |
|
animation: false, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
disablePieStroke: true, |
|
dataLabel: true, |
|
}); |
|
|
|
}, |
|
showFunnel(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'funnel', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 0, |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
series: chartData.series, |
|
animation: false, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
dataLabel: true, |
|
extra: { |
|
funnel: { |
|
border: true, |
|
borderWidth: 2, |
|
borderColor: '#FFFFFF' |
|
} |
|
}, |
|
}); |
|
}, |
|
showRadar(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'radar', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 0, |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
animation: false, |
|
dataLabel: true, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
extra: { |
|
radar: { |
|
max: 200 //雷达数值的最大值 |
|
} |
|
} |
|
}); |
|
}, |
|
showArcbar(canvasId, chartData) { |
|
new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'arcbar', |
|
fontSize: 11, |
|
title: { |
|
name: Math.round(chartData.series[0].data * 100) + '%', |
|
color: chartData.series[0].color, |
|
fontSize: 25 * _self.pixelRatio |
|
}, |
|
subtitle: { |
|
name: chartData.series[0].name, |
|
color: '#666666', |
|
fontSize: 15 * _self.pixelRatio |
|
}, |
|
extra: { |
|
arcbar: { |
|
type: 'default', |
|
width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度 |
|
} |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
series: chartData.series, |
|
animation: false, |
|
width: _self.cWidth3 * _self.pixelRatio, |
|
height: _self.cHeight3 * _self.pixelRatio, |
|
dataLabel: true, |
|
}); |
|
|
|
}, |
|
showArcbar2(canvasId, chartData) { |
|
new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'arcbar', |
|
fontSize: 11, |
|
title: { |
|
name: Math.round(chartData.series[0].data * 100) + '%', |
|
color: chartData.series[0].color, |
|
fontSize: 25 * _self.pixelRatio |
|
}, |
|
subtitle: { |
|
name: chartData.series[0].name, |
|
color: '#666666', |
|
fontSize: 15 * _self.pixelRatio |
|
}, |
|
extra: { |
|
arcbar: { |
|
type: 'default', |
|
width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度 |
|
backgroundColor: '#ffe3e8', |
|
startAngle: 1.25, |
|
endAngle: 0.75 |
|
} |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
series: chartData.series, |
|
animation: false, |
|
width: _self.cWidth3 * _self.pixelRatio, |
|
height: _self.cHeight3 * _self.pixelRatio, |
|
dataLabel: true, |
|
}); |
|
|
|
}, |
|
showArcbar3(canvasId, chartData) { |
|
new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'arcbar', |
|
fontSize: 11, |
|
title: { |
|
name: Math.round(chartData.series[0].data * 100) + '%', |
|
color: chartData.series[0].color, |
|
fontSize: 25 * _self.pixelRatio |
|
}, |
|
subtitle: { |
|
name: chartData.series[0].name, |
|
color: '#666666', |
|
fontSize: 15 * _self.pixelRatio |
|
}, |
|
extra: { |
|
arcbar: { |
|
type: 'circle', //整圆类型进度条图 |
|
width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度 |
|
startAngle: 0.5 //整圆类型只需配置起始角度即可 |
|
} |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
series: chartData.series, |
|
animation: false, |
|
width: _self.cWidth3 * _self.pixelRatio, |
|
height: _self.cHeight3 * _self.pixelRatio, |
|
dataLabel: true, |
|
}); |
|
|
|
}, |
|
showGauge(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'gauge', |
|
fontSize: 11, |
|
title: { |
|
name: Math.round(chartData.series[0].data * 100) + '%', |
|
color: chartData.categories[1].color, |
|
fontSize: 25 * _self.pixelRatio, |
|
offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离 |
|
}, |
|
subtitle: { |
|
name: chartData.series[0].name, |
|
color: '#666666', |
|
fontSize: 15 * _self.pixelRatio, |
|
offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离 |
|
}, |
|
extra: { |
|
gauge: { |
|
type: 'default', |
|
width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度 |
|
startAngle: 0.75, |
|
endAngle: 0.25, |
|
startNumber: 0, |
|
endNumber: 100, |
|
splitLine: { |
|
fixRadius: 0, |
|
splitNumber: 10, |
|
width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度 |
|
color: '#FFFFFF', |
|
childNumber: 5, |
|
childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度 |
|
}, |
|
pointer: { |
|
width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度 |
|
color: 'auto' |
|
} |
|
} |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
animation: true, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
dataLabel: true, |
|
}); |
|
}, |
|
changeGaugeData() { |
|
let series = [{ |
|
name: "完成率", |
|
data: Math.random() |
|
}]; //这里是随机数据，生产环境请从服务器获取，注意series数据类型为数组 |
|
//这里我借用之前的categories数据，判断一下新数据的title.color，没有写死在程序里，以便于自定义 |
|
let newTitleColor; |
|
for (let i = 0; i < _self.serverData.Gauge.categories.length; i++) { |
|
if (series[0].data <= _self.serverData.Gauge.categories[i].value) { |
|
newTitleColor = _self.serverData.Gauge.categories[i].color; |
|
break; |
|
} |
|
} |
|
|
|
canvasObj['canvasGauge'].updateData({ |
|
series: series, //这里给了新数值 |
|
categories: _self.serverData.Gauge.categories, |
|
title: { |
|
name: Math.round(series[0].data * 100) + '%', |
|
color: newTitleColor, |
|
fontSize: 25 * _self.pixelRatio, |
|
offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离 |
|
}, |
|
subtitle: { |
|
name: '更新数据', |
|
color: '#666666', |
|
fontSize: 15 * _self.pixelRatio, |
|
offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离 |
|
} |
|
}); |
|
}, |
|
showCandle(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'candle', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 8, |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
enableMarkLine: true, |
|
/***需要开启标记线***/ |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
animation: true, |
|
enableScroll: true, //开启图表拖拽功能 |
|
xAxis: { |
|
disableGrid: true, //不绘制X轴网格线 |
|
labelCount: 4, //X轴文案数量 |
|
//type:'grid', |
|
//gridType:'dash', |
|
itemCount: _self.itemCount, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个 |
|
scrollShow: true, //新增是否显示滚动条，默认false |
|
scrollAlign: 'right', |
|
//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF |
|
//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6 |
|
}, |
|
yAxis: { |
|
//disabled:true |
|
gridType: 'dash', |
|
splitNumber: 5, |
|
format: (val) => { |
|
return val.toFixed(0) |
|
} |
|
}, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
dataLabel: false, |
|
dataPointShape: true, |
|
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'] |
|
} |
|
}, |
|
tooltip: { |
|
bgColor: '#000000', |
|
bgOpacity: 0.7, |
|
gridType: 'dash', |
|
dashLength: 5, |
|
gridColor: '#1890ff', |
|
fontColor: '#FFFFFF', |
|
horizentalLine: true, |
|
xAxisLabel: true, |
|
yAxisLabel: true, |
|
labelBgColor: '#DFE8FF', |
|
labelBgOpacity: 0.95, |
|
labelAlign: 'left', |
|
labelFontColor: '#666666' |
|
}, |
|
markLine: { |
|
type: 'dash', |
|
dashLength: 5, |
|
data: [{ |
|
value: 2150, |
|
lineColor: '#f04864', |
|
showLabel: true |
|
}, { |
|
value: 2350, |
|
lineColor: '#f04864', |
|
showLabel: true |
|
}] |
|
} |
|
} |
|
}); |
|
}, |
|
touchCandle(e) { |
|
canvasObj['canvasCandle'].scrollStart(e); |
|
}, |
|
moveCandle(e) { |
|
canvasObj['canvasCandle'].scroll(e); |
|
}, |
|
touchEndCandle(e) { |
|
canvasObj['canvasCandle'].scrollEnd(e); |
|
//下面是toolTip事件，如果滚动后不需要显示，可不填写 |
|
canvasObj['canvasCandle'].showToolTip(e, { |
|
format: function(item, category) { |
|
return category + ' ' + item.name + ':' + item.data |
|
} |
|
}); |
|
}, |
|
changeData() { |
|
canvasObj['canvasColumn'].updateData({ |
|
series: _self.serverData.ColumnB.series, |
|
categories: _self.serverData.ColumnB.categories |
|
}); |
|
}, |
|
touchLineA(e) { |
|
canvasObj['canvasLineA'].scrollStart(e); |
|
}, |
|
moveLineA(e) { |
|
canvasObj['canvasLineA'].scroll(e); |
|
}, |
|
touchEndLineA(e) { |
|
canvasObj['canvasLineA'].scrollEnd(e); |
|
//下面是toolTip事件，如果滚动后不需要显示，可不填写 |
|
canvasObj['canvasLineA'].showToolTip(e, { |
|
format: function(item, category) { |
|
return category + ' ' + item.name + ':' + item.data |
|
} |
|
}); |
|
}, |
|
showMix(canvasId, chartData) { |
|
canvasObj[canvasId] = new uCharts({ |
|
$this: _self, |
|
canvasId: canvasId, |
|
type: 'mix', |
|
fontSize: 11, |
|
padding: [15, 15, 0, 15], |
|
legend: { |
|
show: true, |
|
padding: 5, |
|
lineHeight: 11, |
|
margin: 6, |
|
}, |
|
background: '#FFFFFF', |
|
pixelRatio: _self.pixelRatio, |
|
categories: chartData.categories, |
|
series: chartData.series, |
|
animation: false, |
|
enableScroll: true, //开启图表拖拽功能 |
|
xAxis: { |
|
disableGrid: false, |
|
type: 'grid', |
|
gridType: 'dash', |
|
itemCount: 4, |
|
scrollShow: true, |
|
scrollAlign: 'left', |
|
}, |
|
yAxis: { |
|
gridType: 'dash', |
|
dashLength: 4, |
|
splitNumber: 5, |
|
min: 10, |
|
max: 180, |
|
format: (val) => { |
|
return val.toFixed(0) |
|
} |
|
}, |
|
width: _self.cWidth * _self.pixelRatio, |
|
height: _self.cHeight * _self.pixelRatio, |
|
dataLabel: true, |
|
dataPointShape: true, |
|
extra: { |
|
column: { |
|
width: 20 * _self.pixelRatio |
|
}, |
|
tooltip: { |
|
bgColor: '#000000', |
|
bgOpacity: 0.7, |
|
gridType: 'dash', |
|
dashLength: 8, |
|
gridColor: '#1890ff', |
|
fontColor: '#FFFFFF', |
|
horizentalLine: true, |
|
xAxisLabel: true, |
|
yAxisLabel: true, |
|
labelBgColor: '#DFE8FF', |
|
labelBgOpacity: 0.95, |
|
labelAlign: 'left', |
|
labelFontColor: '#666666' |
|
} |
|
}, |
|
}); |
|
}, |
|
touchMix(e) { |
|
canvasObj['canvasMix'].scrollStart(e); |
|
}, |
|
moveMix(e) { |
|
canvasObj['canvasMix'].scroll(e); |
|
}, |
|
touchEndMix(e) { |
|
canvasObj['canvasMix'].scrollEnd(e); |
|
canvasObj['canvasMix'].touchLegend(e); |
|
//下面是toolTip事件，如果滚动后不需要显示，可不填写 |
|
canvasObj['canvasMix'].showToolTip(e, { |
|
format: function(item, category) { |
|
return category + ' ' + item.name + ':' + item.data |
|
} |
|
}); |
|
}, |
|
touchIt(e, id) { |
|
canvasObj[id].touchLegend(e, { |
|
animation: false |
|
}); |
|
canvasObj[id].showToolTip(e, { |
|
format: function(item, category) { |
|
if (typeof item.data === 'object') { |
|
return category + ' ' + item.name + ':' + item.data.value |
|
} else { |
|
return category + ' ' + item.name + ':' + item.data |
|
} |
|
} |
|
}); |
|
}, |
|
touchPie(e, id) { |
|
canvasObj[id].showToolTip(e, { |
|
format: function(item) { |
|
return item.name + ':' + item.data |
|
} |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
page { |
|
background: #fff; |
|
/* width: 750rpx; */ |
|
/* width: 100%; */ |
|
overflow-x: hidden; |
|
} |
|
|
|
.qiun-padding { |
|
padding: 2%; |
|
width: 96%; |
|
} |
|
|
|
.qiun-wrap { |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.qiun-rows { |
|
display: flex; |
|
flex-direction: row !important; |
|
} |
|
|
|
.qiun-columns { |
|
display: flex; |
|
flex-direction: column !important; |
|
} |
|
|
|
.qiun-common-mt { |
|
margin-top: 10rpx; |
|
} |
|
|
|
.qiun-bg-white { |
|
background: #FFFFFF; |
|
} |
|
|
|
.qiun-title-bar { |
|
width: 96%; |
|
padding: 10rpx 2%; |
|
flex-wrap: nowrap; |
|
} |
|
|
|
.qiun-title-dot-light { |
|
border-left: 10rpx solid #0ea391; |
|
padding-left: 10rpx; |
|
font-size: 32rpx; |
|
color: #000000 |
|
} |
|
|
|
/* 通用样式 */ |
|
.qiun-charts { |
|
/* width: 750rpx; */ |
|
/* width:100%; */ |
|
height: 500rpx; |
|
background-color: #FFFFFF; |
|
} |
|
|
|
.charts { |
|
/* width: 750rpx; */ |
|
width:100%; |
|
height: 500rpx; |
|
background-color: #FFFFFF; |
|
} |
|
|
|
/* 横屏样式 */ |
|
.qiun-charts-rotate { |
|
width: 700rpx; |
|
height: 1100rpx; |
|
background-color: #FFFFFF; |
|
padding: 25rpx; |
|
} |
|
|
|
.charts-rotate { |
|
width: 700rpx; |
|
height: 1100rpx; |
|
background-color: #FFFFFF; |
|
} |
|
|
|
/* 圆弧进度样式 */ |
|
.qiun-charts3 { |
|
/* width: 750rpx; |
|
width:100%; */ |
|
height: 250rpx; |
|
background-color: #FFFFFF; |
|
position: relative; |
|
} |
|
|
|
.charts3 { |
|
position: absolute; |
|
width: 250rpx; |
|
height: 250rpx; |
|
background-color: #FFFFFF; |
|
} |
|
|
|
.qiun-tip { |
|
display: block; |
|
width: auto; |
|
overflow: hidden; |
|
padding: 15rpx; |
|
height: 30rpx; |
|
line-height: 30rpx; |
|
margin: 10rpx; |
|
background: #ff9933; |
|
font-size: 30rpx; |
|
border-radius: 8rpx; |
|
justify-content: center; |
|
text-align: center; |
|
border: 1px solid #dc7004; |
|
color: #FFFFFF; |
|
} |
|
</style>
|
|
|