first:
Download what uCharts needs
The required pages are imported on demand:
import uCharts from '@/components/u-charts/u-charts.js';
text:
Introducing a histogram
(1).html part: mainly pay attention to the canvas attribute and id not to write wrong
<view class="qiun-charts">
<div style="display: flex;align-items: center; margin-left: 10px; margin-top: 10px;">
<div style="display: flex; justify-content: left; align-items: center; flex-wrap: nowrap;">
<div
style="width: 10px; height: 10px; border-radius: 50%; background-color: #16f5e6; margin-right: 2px;">
</div>
<div>现金流量分析</div>
</div>
</div>
<canvas :canvas2d="true" canvas-id="canvasMix" id="canvasMix" class="charts" @touchstart="touchMix"
@touchmove="moveMix" @touchend="touchEndMix"></canvas>
</view>
(2) To draw a histogram, follow the showMix public method below
<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _selfMix;
var canvaMix = null;
var canvasIncome = null;
var canvasTax = null;
export default {
data() {
return {
//提前定义好变量
cWidthMix: 750, //混合曲线宽度
cHeightMix: 500, //混合图高度
pixelRatio: 1,
drawLineBarDataX: [], //定义X轴
drawBar1DataY1: [], //现金流量分析-数据
drawBar1DataY2: [], //现金流量分析-数据
}
},
methods: {
//绘制混合曲线
showMix(canvasId, chartData) {
canvaMix = new uCharts({
$this: _selfMix,
canvasId: canvasId,
type: 'column',
fontSize: 11,
legend: true,
background: '#FFFFFF',
color: ['#1890FF', '#16f5e6'],
pixelRatio: _selfMix.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: true,
enableScroll: true,//开启图表拖拽功能
scrollAlign:'left',//图表滚动条起始位置
padding: [15, 15, 15, 10],
xAxis: {
disableGrid: true,
type: 'grid',
gridType: 'dash',
itemCount: 10,
scrollShow: false,
scrollAlign: 'left'
},
yAxis: {
title: '万元',
disableGrid: true,
gridType: 'dash',
splitNumber: 5,
min: 0,
max: 180,
format: (val) => {
return val.toFixed(0)
}
},
width: _selfMix.cWidthMix * _selfMix.pixelRatio,
height: _selfMix.cHeightMix * _selfMix.pixelRatio,
dataLabel: false,
dataPointShape: true,
extra: {
bar: {
type: "group",
width: 20,
meterBorde: 1,
meterFillColor: "#FFFFFF",
activeBgColor: "#000000",
activeBgOpacity: 0.08,
linearType: "custom",
barBorderCircle: true,
seriesGap: 2,
categoryGap: 2
}
},
});
},
//数据引入
getServerDataNetPresent() {
let Mix = {
categories: this.drawLineBarDataX,
"series": [{
"name": "当期预测的净现值(元)",
"data": this.drawBar2DataY1,
"type": "column",
"color": '#1890FF',
"width": 10
}, {
"name": "当期预测的累计净现值(元)",
"data": this.drawBar2DataY2,
"type": "column",
"color": '#16f5e6',
"barWidth": 10
}]
};
_selfMix.showMix("canvasNetPresentValue", Mix);
},
},
onLoad(options) {
_selfMix = this;
this.cWidthMix = uni.upx2px(750);
this.cHeightMix = uni.upx2px(500);
setTimeout(() => {
this.getServerData();
}, 1000)
},
}
Effect:
Introducing a Line Chart
<view class="qiun-charts" style="margin-top: 20px;">
<div style="display: flex; align-items: center; margin-left: 10px; margin-top: 10px;">
<div
style="width: 10px; height: 10px; border-radius: 50%; background-color: #16f5e6; margin-right: 2px;">
</div>
<div>收入分析</div>
</div>
<canvas :canvas2d="true" canvas-id="canvasIncome" id="canvasIncome" class="charts" disable-scroll=true
@touchstart="touchIncome"></canvas>
</view>
Then write js:
<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _selfMix;
var canvaMix = null;
var canvasIncome = null;
var canvasTax = null;
export default {
data() {
return {
//提前定义好变量
cWidthMix: 750, //混合曲线宽度
cHeightMix: 500, //混合图高度
pixelRatio: 1,
drawLineBarDataX: [], //定义X轴
drawLine1DataY1: [], //收入分析
drawLine1DataY2: [], //各类补贴
}
},
methods: {
showLineIncome(canvasId, chartData) {
canvasIncome = new uCharts({
$this: _selfMix,
canvasId: canvasId,
type: 'line',
fontSize: 11,
legend: true,
dataLabel: false,
dataPointShape: true,
background: '#FFFFFF',
color: ['#1890FF', '#16f5e6'],
pixelRatio: _selfMix.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: true,
enableScroll: true,//开启图表拖拽功能
scrollAlign:'left',//图表滚动条起始位置
padding: [15, 15, 15, 10],
xAxis: {
disableGrid: true,
type: 'grid',
gridType: 'dash',
itemCount: 10,
scrollShow: false,
scrollAlign: 'left'
},
yAxis: {
title: '万元',
disableGrid: false,
gridType: 'dash',
splitNumber: 5,
min: 0,
max: 50,
format: (val) => {
return val.toFixed(0)
}
},
width: _selfMix.cWidthMix * _selfMix.pixelRatio,
height: _selfMix.cHeightMix * _selfMix.pixelRatio,
dataLabel: false,
dataPointShape: true,
extra: {
line: {
type: 'straight'
}
}
});
},
//数据引入
getServerDataInconme() {
let LineA = {
categories: this.drawLineBarDataX,
series: [{
data: this.drawLine1DataY1,
name: '年发电收入'
},
{
data: this.drawLine1DataY2,
name: '各类补贴收入小计'
},
]
};
this.showLineIncome("canvasIncome", LineA);
},
},
onLoad(options) {
_selfMix = this;
this.cWidthMix = uni.upx2px(750);
this.cHeightMix = uni.upx2px(500);
setTimeout(() => {
this.getServerData();
}, 1000)
},
}
Effect:
Introducing a circular arc
<view class="demo-layout bg-purple-light">
<view>
<span style="vertical-align: middle;">回报率</span>
</view>
<view class="qiun-columns">
<view class="content">
<canvas canvas-id="canvasRingRight" id="canvasRingRight" class="canvas"></canvas>
</view>
</view>
</view>
<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _selfMix;
var canvaMix = null;
var canvasIncome = null;
var canvasTax = null;
export default {
data() {
return {
//提前定义好变量
cWidth: 100, //圆弧1宽度
cHeight: 100, //圆弧1高度
pixelRatio: 1,
Arcbar3: {
//图表数据
series: [{
data: 0.76, //数据显示
color: "#66FFFF",
name: "%" //下方文字
}],
},
}
},
methods: {
//绘制圆形进度条
showRing(canvasId, chartData, id) {
new uCharts({
$this: _selfMix,
canvasId: canvasId,
type: 'arcbar',
fontSize: 11,
title: {
name: Math.round(chartData.series[0].data * 100), //显示的文字百分比
color: chartData.series[0].color, //环形图的颜色
fontSize: 24 * _selfMix.pixelRatio //字体大小
},
subtitle: {
name: chartData.series[0].name, //显示文字
color: id === 1 ? '#6699ff' : id === 2 ? '#66CCFF' : id === 3 ? '#66FFFF' : id === 4 ?
'#CC9900' : '#FFCC33', //文字颜色
fontSize: 16 * this.pixelRatio //字体大小
},
extra: {
arcbar: {
type: 'default', //整圆类型进度条图 default圆弧、 circle 整圆
width: _selfMix.arcbarWidth * _selfMix.pixelRatio, //圆弧的宽度
startAngle: 0.75, //整圆类型只需配置起始角度即可,
endAngle: 0.25,
gap: 2,
linearType: "custom",
backgroundColor: '#ccc', //环形图的剩余百分比颜色
}
},
background: '#fff',
pixelRatio: _selfMix.pixelRatio,
series: chartData.series,
animation: false,
width: 100 * _selfMix.pixelRatio,
height: 100 * _selfMix.pixelRatio,
dataLabel: true
});
},
},
onLoad(options) {
_selfMix = this;
this.cWidthMix = uni.upx2px(750);
this.cHeightMix = uni.upx2px(500);
},
onShow() {
setTimeout(() => {
this.showRing("canvasRingRight", this.Arcbar3, 3);
}, 900)
},
}
Effect:
pie chart
Subsequent charts are similar, draw inferences about other cases from one instance