<template>
<view style="background-color: #F3F0F0;">
<view class="container">
<view v-for="(item,index) in lists" :key="index" class="items">
<view class="item-top">
{{item.type}}
</view>
<view class="item-content">
<view class="text">
<view class="text_one">
<view class="value">
{{item.value}}
</view>
<view class="unit">
{{item.unit}}
</view>
</view>
<view class="text_two">收入金额</view>
<view class="text_three">
<image src="../../static/previous_year.png" mode="" class="previous_logo"></image>
<view>
{{item.previous_year_value}}
</view>
<view>
{{item.previous_year_unit}}
</view>
<!-- v-if判断与上一年同期增长率 -->
<view v-if="item.value-item.previous_year_value<0" class="comparison down">
<image src="../../static/down.png" mode=""></image>
<view>{{(((item.value - item.previous_year_value)/item.previous_year_value)* 100).toFixed(2) + '%'}}</view>
</view>
<view v-else class="comparison up">
<image src="../../static/up.png" mode=""></image>
<view>{{(((item.value - item.previous_year_value)/item.previous_year_value)* 100).toFixed(2) + '%'}}</view>
</view>
</view>
</view>
<image src="../../static/notecase.png" class="notecase"></image>
</view>
</view>
</view>
<view class="canvas_wrapper">
<view class="title">
{{"每月收入"}}
</view>
<canvas canvas-id="canvas1" id="canvas1" class="charts" @touchstart="touchLineA"></canvas>
</view>
<view class="canvas_wrapper">
<view class="title">
{{"目的地城市收入"}}
</view>
<canvas canvas-id="canvas2" id="canvas2" class="charts" disable-scroll=true @touchstart="touchColumnA" @touchmove="moveColumnA" @touchend="touchEndColumnA"></canvas>
</view>
<view class="canvas_wrapper">
<view class="title">
{{"客源省份消费TOP10"}}
</view>
<canvas canvas-id="canvas3" id="canvas3" class="charts" @touchstart="touchColumnB"></canvas>
</view>
<view class="canvas_wrapper">
<view class="title">
{{"行业消费占比"}}
</view>
<view style="display: flex; position: relative;">
<canvas canvas-id="canvas4" id="canvas4" class="charts" @touchstart="touchRingA"></canvas>
<canvas canvas-id="canvas5" id="canvas5" class="charts" @touchstart="touchRingB"></canvas>
<view class="ring_tag">
<view class="ring_tag_row">
<view class="rows row_1"></view><view class="tag_text">住</view>
<view class="rows row_2"></view><view class="tag_text">其他</view>
<view class="rows row_3"></view><view class="tag_text">吃</view>
<view class="rows row_4"></view><view class="tag_text">娱</view>
</view>
<view class="ring_tag_row">
<view class="rows row_5"></view><view class="tag_text">游</view>
<view class="rows row_6"></view><view class="tag_text">综合</view>
<view class="rows row_7"></view><view class="tag_text">行</view>
<view class="rows row_8"></view><view class="tag_text">购</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import uCharts from "../../common/u-charts/u-charts.js";
import _source from "../../mock/source.js"
var _self;
var lineA = null;
var columnA = null;
var columnB = null;
var ringA = null;
var ringB = null;
export default {
data() {
return {
cWidth:'',
cHeight:'',
chalfwidth: '',
lists: [],
canvasData1: {},
canvasData2: {},
canvasData3: {},
canvasData4: {},
canvasData5: {}
};
},
onLoad() {
// uni.request({
// url: "",
// success: res => {
// console.log(res)
// }
// })
//请求获得的list数据赋值给data里面的lists
this.lists = _source.source.list
//请求获得的canvas画布的参数
this.canvasData1 = _source.source.canvas1_line
this.canvasData2 = _source.source.canvas2_column
this.canvasData3 = _source.source.canvas3_column
this.canvasData4 = _source.source.canvas4_ring
this.canvasData5 = _source.source.canvas5_ring
_self = this;
this.cWidth=uni.upx2px(650);
this.cHeight=uni.upx2px(430);
// this.chalfWidth=uni.upx2px(650/2);
// this.chalfHeight=uni.upx2px(400/2);
_self.showLine("canvas1", this.canvasData1);
_self.showColumnA("canvas2", this.canvasData2);
_self.showColumnB("canvas3", this.canvasData3);
_self.showRingA("canvas4", this.canvasData4);
_self.showRingB("canvas5", this.canvasData5);
},
methods: {
//执行showCanva画图
//画布1
showLine(id, canvasData1) {//画布id以及画画的数据
lineA = new uCharts({
$this: _self, //new的实例内使用图表，必须传入this实例
canvasId: id, //先拿静态的template里的一个canvas标签id试试，实际上用参数
type: "line", //图表类型（pie、line、column、area、ring、radar、arcbar、gauge、candle、bar、mix、rose、word）
legend: canvasData1.legend, //图例设置
fontSize: canvasData1.fontSize, //字体大小，默认13px
// pixelRatio: 1, //像素比，默认为1
width: _self.cWidth,
height: _self.cHeight, //宽高，要与样式中的width和height相等，否则会造成大小与预期不符合
animation: true, //是否动画展示
categories: canvasData1.categories, //数据类别（饼图、圆环图不需要）
series: canvasData1.series, //数据列表
dataLabel: false,//是否显示数据内容
dataPointShape: false, //是否显示数据点的标记
enableScroll: false, //图片可拖拽滚动
xAxis: {
disableGrid: true, //是否绘制绘制x轴网格
axisLine: false, //是否显示坐标轴线
},
yAxis: {
disableGrid: true,
showTitle: true,
data: [
{
axisLine: false, //这个写法和文档有些不同，y轴去轴不去数
title: canvasData1.yAxis.title
}
]
},
extra: {
line: {
type: "curve"
}
}
})
},
//showshowToolTip方法（点击提示数值）
touchLineA(e) {
lineA.showToolTip(e, {
format: function (i, category) {
return i.name + "-" +category + ': ' + i.data
}
});
},
//画布2
showColumnA(id, canvasData2) {//画布id以及画画的数据
columnA = new uCharts({
$this: _self,
canvasId: id,
type: "column",
legend: {
show: false
},
enableScroll: true,
fontSize: canvasData2.fontSize,
width: _self.cWidth,
height: _self.cHeight,
animation: true,
categories: canvasData2.categories,
series: canvasData2.series,
dataLabel: false,
xAxis: {
disableGrid: true, //是否绘制绘制x轴网格
axisLine: false, //是否显示坐标轴线
scrollShow: true,
scrollAlign: canvasData2.xAxis.scrollAlign,
itemCount: canvasData2.xAxis.itemCount
},
yAxis: {
disableGrid: true,
splitNumber: canvasData2.yAxis.splitNumber,
showTitle: true,
data: [
{
title: canvasData2.yAxis.title,
min: canvasData2.yAxis.min,
max: canvasData2.yAxis.max,
axisLine: false, //这个写法和文档有些不同，y轴去轴不去数
}
]
},
extra: {
column: {
width: 10
}
}
})
},
//scrollStart...方法（滚动条）
touchColumnA(e){
columnA.scrollStart(e);
columnA.showToolTip(e, {
format: function (i, category) {
return category + ': ' + i.data
}
});
},
moveColumnA(e) {
columnA.scroll(e);
},
touchEndColumnA(e) {
columnA.scrollEnd(e);
},
//画布3
showColumnB(id, canvasData3) {//画布id以及画画的数据
columnB = new uCharts({
$this: _self,
canvasId: id,
type: "column",
legend: {
show: false
},
enableScroll: false,
fontSize: canvasData3.fontSize,
width: _self.cWidth,
height: _self.cHeight,
animation: true,
categories: canvasData3.categories,
series: canvasData3.series,
dataLabel: false,
rotate:true,
xAxis: {
disableGrid: true, //是否绘制绘制x轴网格
axisLine: false, //是否显示坐标轴线
rotateLabel: true, //x轴字体rota
},
yAxis: {
disableGrid: true,
data: [
{
disabled: true, //去轴去数
// axisLine: false, //这个写法和文档有些不同，y轴去轴不去数
}
]
},
extra: {
column: {
type: "group",
width: 10
}
}
})
},
touchColumnB(e) {
columnB.showToolTip(e, {
format: function (i, category) {
return category + ': ' + (i.data.value?i.data.value:i.data) + '%'
}
});
},
//画布4
showRingA(id, canvasData4) {//画布id以及画画的数据
ringA = new uCharts({
$this: _self,
canvasId: id,
type: "ring",
legend: {
show: false,
// itemGap: 50, //横向，控制图例“分几行”
// padding: 1,
// lineHeight: 30 //设置“行间距”
}, //图例设置
// fontSize: 7, //字体大小，默认13px
width: 170,
height: 150,
// width: _self.chalfWidth,
// height: _self.chalfHeight, //宽高，要与样式中的width和height相等，否则会造成大小与预期不符合
animation: true, //是否动画展示
title: canvasData4.title,
dataLabel: false,
series: canvasData4.series, //数据列表
extra: {
pie: {
offsetAngle: -45,
ringWidth: 10,
labelWidth:5
}
}
})
},
showRingB(id, canvasData5) {//画布id以及画画的数据
ringB = new uCharts({
$this: _self,
canvasId: id,
type: "ring",
legend: {
show: false,
// itemGap: 50, //横向，控制图例“分几行”
// padding: 1,
// lineHeight: 30 //设置“行间距”
}, //图例设置
// fontSize: 7, //字体大小，默认13px
width: 170,
height: 150, //宽高，要与样式中的width和height相等，否则会造成大小与预期不符合
// width: _self.chalfWidth,
// height: _self.chalfHeight,
animation: true, //是否动画展示
title: canvasData5.title,
dataLabel: false,
series: canvasData5.series, //数据列表
extra: {
pie: {
offsetAngle: -45,
ringWidth: 10,
labelWidth:5
}
}
})
},
touchRingA(e){
ringA.showToolTip(e, {
format: function (item) {
return item.name + ':' + item.data + '%'
}
});
},
touchRingB(e){
ringB.showToolTip(e, {
format: function (item) {
return item.name + ':' + item.data + '%'
}
});
},
}
}
</script>
<style scoped lang="scss">
@import "./income.scss";
.charts{
width: 650upx;
height:430upx;
position: relative;
bottom: 0;
}
</style>
问题：主要是环形图的问题，环形图其实是两个canvas，（我觉得应该有其他的插件可以在一个canvas上画若干个图，uchart文档上有个混合图，混合的是柱形、折线等，没瞄到扇形的混合，就没细看）。
问题之一就是适配的问题，因为uchart需要注意canvas的宽高，一个canvas还好，通过这个插件自带的upx单位可以自适应，但因为这是两个canvas（圆环形）（flex布局排的），所以当手机特别小的时候，会出现不对称的情况（我已经尽可能的让他符合大部分屏幕了）（以前看视频，看到过media这个东西可以自适应屏幕，不知道管不管用，有机会专门去学一下）
第二个问题，还是环形图，因为他的标签只能展示在当前canvas上，所以我把这两个环形图的标签隐藏掉了，然后用绝对布局+view标签写的下方的标签，这样的问题就是，不能在json里面动颜色、数量了，否则会对应不上。
需求：
横向的柱状图，x轴的字不能横向（只能超范围让他倾斜（rotate）），y轴的数值也没法随着横向转过来。
环形图：里面的内容展示图片（title，subtitle（这两个是uchart的api，设置里面内容的））
折线图： 单条线加粗
等未来，当我厉害了，看看能不能改下源码实现需求
2742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
