uniapp中使用ucharts组件开发流程
我是在uniapp使用echarts后发现在安卓手机app上不显示,所以使用ucharts来代替echarts
在这里导入到hbuilderX里选择你的项目并确定
导入成功后你会发现你的目录下会多这个组件文件
然后在项目中使用
先上一下我的实体图我这里是折线图
html
<view class="todayCar">
<qiun-data-charts class="charts" type="line" :opts="opts" :chartData="chartData" />
</view>
js
opts: {
grid: {
top: 10,
},
color: ['#164CFF'],
dataLabel: false,
dataPointShape: false,
padding: [30, 30, 10, 10],
xAxis: {
axisLineColor: '#fff',
labelCount: 6,
dashLength: 4,
gridEval: 1,
},
yAxis: {
data: [
{
axisLineColor: '#fff',
},
],
},
legend: {
show: false,
},
},
chartData: {
},
//模拟数据
let _Item = {
categories: this.info.hours.map(v => `${
v.time}时`), // [‘01时’,‘02时’,‘03时’,......]
series: [
{
name: '测试',
data: this.info.hours.map(v => v.num), // [100,200,300,.....]
},
],
};
this.chartData = _Item;
css
.todayCar {
width: 100%;
height: 584rpx;
background: #ffffff;
border-radius: 16rpx;
.charts {
width: 100%;
height: 100%;
background: #ffffff;
}
}
基本上就这些
其他的一些参数我放在下面了自己研究一下(我也是慢慢试出来的)
chartData: {
},
canvasId: '',
opts: {
"type": "line",
"canvasId": new Date().getTime(),
"canvas2d": false,
"background": "none",
"animation": true,
"timing": "easeOut",
"duration": 1000,
"color": [
"#47C5FF",
"#FFCD30",
"#3DF366"
],
"padding": [
20,
20,
10,
5
],
"rotate": false,
"errorReload": true,
"fontSize": 12,
"fontColor": "#999999",
"enableScroll": false,
"touchMoveLimit": 60,
"enableMarkLine": false,
"dataLabel": false,
"dataPointShape": false,
"dataPointShapeType": "solid",
"xAxis": {
"disabled": false,
"axisLine": false,
"axisLineColor": "#EEEEEE",
"calibration": false,
"fontColor": "#999999",
"fontSize": 12,
"rotateLabel": false,
"labelCount": 10,
"boundaryGap": "justify",
"disableGrid": true,
"gridColor": "#CCCCCC",
"gridType": "dash",
"dashLength": 4,
"gridEval": 1
},
"yAxis": {
"disabled": false,
"disableGrid": false,
"splitNumber": 4,
"gridType": "solid",
"dashLength": 2,
"gridColor": "#CCCCCC",
"padding": 10,
"showTitle": false,
"data": [
{
"position": "left",
"disabled": false,
"axisLine": true,
"axisLineColor": "#fff",
"calibration": false,
"fontColor": "#999999",
"fontSize": 12,
"textAlign": "right",
"title": "",
"titleFontSize": 13,
"titleOffsetY": 0,
"titleOffsetX": 0,
"titleFontColor": "#666666",
"min": null,
"max": null,
"tofix": 2,
"unit": "",
"format": ""
}
]
},
"legend": {
"show": true,
"position": "bottom",
"float": "center",
"padding": 5,
"margin": 5,
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"fontSize": 12,
"fontColor": "#999999",
"lineHeight": 20,
"hiddenColor": "#CECECE",
"itemGap": 10
},
"extra": {
"tooltip": {
"showBox": true,
"showArrow": true,
"showCategory": false,
"borderWidth": 0,
"borderRadius": 5,
"borderColor": "#000000",
"borderOpacity": 0.7,
"bgColor": "#000000",
"bgOpacity": 0.7,
"gridType": "solid",
"dashLength": 4,
"gridColor": "#CCCCCC",
"fontColor": "#FFFFFF",
"splitLine": true,
"horizentalLine": false,
"xAxisLabel": false,
"yAxisLabel": false,
"labelBgColor": "#FFFFFF",
"labelBgOpacity": 0.7,
"labelFontColor": "#666666"
},
"markLine": {
"type": "solid",
"dashLength": 4,
"data": []
}
}
},
感谢你的阅读 希望一键三连 感谢~