uni-app 横屏查看折线图
2023-05-22 本文已影响0人
八重代
横屏的方式
1、直接控制手机屏幕显示方向，让手机屏幕方向变成横屏
onLoad(){
//解除屏幕锁定，然后锁定屏幕方向未横屏
plus.screen.unlockOrientation();
plus.screen.lockOrientation('landscape-primary');
},
onUnload() {
plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
},
使用这种方法，在横屏切换成竖屏的时候会导致页面显示错乱，没有找到具体好的方法解决，所以没有使用这种方法
2、手机屏幕方向还是竖屏，将页面旋转90度变成横屏显示
我采用的就是第二种方法
uni-app使用折线图可以使用echarts和ucharts两种方式
1、使用echarts
<template>
<view class="content-container">
<view class="landscape_echarts">
<view class="bar-div">
<u-icon size="30" name="arrow-left" color="#333333" class="back-icon" @click="back()"></u-icon>
<text :style="[{'padding-left': cWidth-180+'rpx'},]">监测曲线</text>
</view>
<view class="line"></view>
<view class="no-chart" v-if="!ifChart">
暂无监测曲线
</view>
<line-chart class="landscape" :option="option" id="myChart" v-if="ifChart">
</line-chart>
</view>
</view>
<!-- <view class="wrap">
<line-chart :option="option" style="height: 600rpx;width: 100vh;"></line-chart>
</view> -->
</template>
<script>
import lineChart from "@/components/lineChart.vue"
export default {
components: {
lineChart
},
data() {
return {
option: {},
cWidth: '',
cHeight: '', //画布的宽高
Width: '',
Height: '', //画布的宽高
ifChart: true,
seriesData:[
{
name:'销售量',
unit: '个',
xData: ["2012", "2013", "2014", "2015", "2016", "2017"],
yData:[35, 8, 25, 37, 4, 20]
}
]
}
},
onLoad(options) {
const res = uni.getSystemInfoSync();
this.Width = res.windowHeight - 20;
this.Height = res.windowWidth;
this.cWidth = res.windowHeight - 40; //uni.upx2px(750)
this.cHeight = res.windowWidth - 90; //设置宽高uni.upx2px(500)uni.upx2px(res.windowWidth) + 100
console.log(this.cWidth);
if (this.cWidth <= 700) {
this.number = 5;
}
let dataObj = JSON.parse(decodeURIComponent(options.data));
console.log(dataObj)
this.setOption(this.seriesData)
},
methods: {
setOption(seriesData) {
let that = this;
//如果是多条线则需要处理一下数据
let seriesArr = [];
for (var i = 0; i < seriesData.seriesData.length; i++) {
if (i > that.colorArr.length - 1) {
// 当类型超过自定义颜色数量随机生成颜色
var a = Math.random(); // 调⽤静态对象⽅法抛出随机数a
var b = a.toString(16); // 把a转换为16进制的字符串
console.log(b.length); // 15
/* 进制的问题，为什么不是16（就像⼗进制为什么只有9⽽没有10） */
var c = b.substr(-6); // 截取字符串后六位
var color = "#" + Math.random().toString(16).substr(-6); // 加上'#'串联成⼀⾏代码
that.colorArr.push(color);
}
seriesArr.push({
name: seriesData.seriesData[i].equipName,
smooth: true, // 是否平滑
type: 'line',
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
connectNulls: true, // 是否连接空数据
data: seriesData.seriesData[i].data
})
}
this.option = {
color: ['#FFC933', '#26BDEB', '#2A4AF0', '#8E59F7'],
tooltip: {
trigger: 'axis',
triggerOn: 'mousemove|click',
formatter(a) {
let list = [];
let listItem = '';
let timeData = '';
if (a[0].axisValueLabel.indexOf(":") > 0 || a[0].axisValueLabel.indexOf("-") > 0) {
timeData=a[0].axisValueLabel.split(" ")[0] + a[0].axisValueLabel.split(" ")[1];
} else {
let date = that.formatDate(parseInt(a[0].axisValueLabel))
timeData = date.split(" ")[0] + date.split(" ")[1];
}
let top =
`<div style='height: 28px;line-height: 28px;box-sizing: border-box;border-bottom: 1px solid #f2f2f2; font-family: PingFangSC-Semibold;font-size: 16px;color: rgba(0,0,0,.9);font-weight: 600;'>${timeData}</div>`
for (var i = 0; i < a.length; i++) {
list.push(
'<span style="display: inline-block;padding: 2px 0;font-size: 14px;color: rgba(0,0,0,0.70);" >' +
'<div style="display:inline-block;width:8px;height:8px;background:' +
a[i].color +
';border-radius: 50%;"><div style="margin-top:2px;margin-left: 2px;width:4px;height:4px;background:#fff;border-radius: 50%;"></div></div><span style="width:15px; display:inline-block;">' +
'</span><span style="font-family: SegoeUI;">' +
a[i].seriesName+
'<span>    <span style="font-family: PingFangSC-Regular;">' +
a[i].data +
'</span></span>'
)
}
listItem = top + list.join('<br/>')
return '<div>' + listItem + '</div>'
}
},
legend: {
data: [seriesData[0].name],
type: 'plain', //plain scroll
icon: "rect",
orient: "horizontal", //朝向 horizontal vertical
left: 40, //位置 left top bottom right
top: 0,
// width: "10", //大小
// height: "4"
itemGap: 12,
itemWidth: 10,
itemHeight: 4,
textStyle: {
opacity: 0.7,
fontFamily: "PingFangSC-Regular",
fontSize: 12,
color: "#000000",
fontWeight: 400
},
selected: {
// 'Email': false
}
},
grid: {
show: false,
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0.2)",
type: 'solid'
}
},
axisTick: {
length: 6,
lineStyle: {
color: "rgba(0,0,0,0.3)",
type: 'solid'
}
},
axisLabel: {
margin: 12,
color: 'rgba(0,0,0,0.4)',
fontFamily: "PingFangSC-Medium",
fontSize: 12,
align: 'center',
fontWeight: 500,
formatter: function(value) {
if (value.indexOf(":") > 0 || value.indexOf("-") > 0) {
return value.split(" ")[0] + " \n" + value.split(" ")[1];
} else {
let date = that.formatDate(parseInt(value))
return date.split(" ")[0] + " \n" + date.split(" ")[1];
}
},
},
data: seriesData[0].xData
},
yAxis: [{
name: seriesData[0].name + seriesData[0].unit,
nameLocation: "end",
nameGap: 12,
nameTextStyle: {
fontFamily: "PingFangSC-Regular",
fontSize: 10,
color: "rgba(0,0,0,.7)",
fontWeight: "normal",
},
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.4)',
fontFamily: "PingFangSC-Medium",
fontSize: 12,
align: 'right'
}
}, {
name: seriesData.length>1?seriesData[1].name + seriesData[1].unit:'',
nameLocation: "end",
show: seriesData.length>1,
nameGap: 12,
nameTextStyle: {
fontFamily: "PingFangSC-Regular",
fontSize: 10,
color: "rgba(0,0,0,.7)",
fontWeight: "normal",
},
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.4)',
fontFamily: "PingFangSC-Medium",
fontSize: 12,
align: 'left'
}
}, ],
axisPointer: { // hover或click 示意线样式
lineStyle: {
color: 'rgba(42,74,240,1)',
type: 'solid'
}
},
series: [{
name: seriesData[0].name,
smooth: true, // 是否平滑
type: 'line',
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
connectNulls: true, // 是否连接空数据
data: seriesData[0].yData//多条数据这里应该是seriesArr
},
{
name: seriesData.length>1?seriesData[1].name:'',
smooth: true, // 是否平滑
type: 'line',
yAxisIndex: 1,
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
connectNulls: true, // 是否连接空数据
data: seriesData.length>1?seriesData[1].yData:[]
},
]
};
},
back() {
// uni.redirectTo({
// url: '/pages/warn/kongbai',
// })
uni.navigateBack({
delta: 1
})
},
formatDate(time) {
var date = new Date(parseFloat(time));
var year = date.getFullYear();
/* 在日期格式中，月份是从0开始的，因此要加0
* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
* */
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接
var currentdate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
return currentdate;
},
getDay(n) {
let date = new Date();
if (n == 0 || n == 1 || n == 7) {
date.setDate(date.getDate() - n);
} else if (n == 30) {
date.setMonth(date.getMonth() - 1);
}
var YY = date.getFullYear() + "-";
var MM =
(date.getMonth() + 1 < 10 ?
"0" + (date.getMonth() + 1) :
date.getMonth() + 1) + "-";
var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var mm =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var ss =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
let dateTime = YY + MM + DD + " " + hh + ":" + mm + ":" + ss;
return new Date(dateTime).getTime();
},
}
}
</script>
<style scoped lang="scss">
.content-container {
width: 100%;
height: 100vh;
position: relative;
background: #fff;
overflow: hidden;
}
.landscape_echarts {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.vertical_echarts {
width: 100%;
background-color: #fff;
}
.landscape {
width: 100vh;
height: 600rpx;
position: relative;
left: 50rpx;
overflow: hidden;
}
.line {
width: 100vh;
height: 20rpx;
left: 20rpx;
position: relative;
background: #F3F3F3;
}
.bar-div {
// width: 120rpx;
// height: 40rpx;
// width: 90rpx;
display: flex;
align-items: center;
position: relative;
left: 60rpx;
padding-bottom: 20rpx;
text {
display: inline-block;
white-space: nowrap;
}
}
.no-chart {
width: 100vh;
height: 600rpx;
position: relative;
left: 50rpx;
overflow: hidden;
font-size: 30rpx;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
lineChart.vue
<template>
<view>
<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
</view>
</template>
<script>
export default {
name: 'Echarts',
props: {
option: {
type: Object,
required: true
}
}
}
</script>
<script module="echarts" lang="renderjs">
import * as echarts from '@/common/js/echarts.min.js';
export default {
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
/**
* 初始化echarts
*/
init() {
this.chart = echarts.init(this.$el)
this.update(this.option)
},
/**
* 监测数据更新
* @param {Object} option
*/
update(option) {
if (this.chart) {
// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
if (option) {
// tooltip
if (option.tooltip) {
// 判断是否设置tooltip的位置
if (option.tooltip.positionStatus) {
option.tooltip.position = this.tooltipPosition()
}
// 判断是否格式化tooltip
// if (option.tooltip.formatterStatus) {
// option.tooltip.formatter = this.toFunction(option.tooltip.formatterStatus)
// }
if (option.tooltip.formatterStatus) {
option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option
.tooltip.formatFloat2, option.tooltip.formatThousands,option.tooltip.formatFunClue)
}
}
// if (option.xAxis[0].data.length >= 5) {
// option.xAxis[0].axisLabel.formatter = function formatter(params) {
// if (params > 5) {
// return params;
// }
// var maxLength = 4;
// //判断长度，超出使用...代替
// if (params && params.length > maxLength) {
// return params.substring(0, maxLength - 1) + '...';
// } else {
// return params;
// }
// }
// } else if(option.xAxis[0].data.length === 1){
// option.xAxis[0].axisLabel.formatter = function formatter(params) {
// return params
// }
// } else {
// option.xAxis[0].axisLabel.formatter = function formatter(params) {
// if (params > 5) {
// return params;
// }
// var maxLength = 6;
// //判断长度，超出使用...代替
// if (params && params.length > maxLength) {
// return params.substring(0, maxLength - 1) + '...';
// } else {
// return params;
// }
// }
// }
// 设置新的option
// this.option.tooltip.formatter =e=>{
// this.$emit('tooltipData',e)
// }
this.chart.setOption(option, option.notMerge)
}
}
},
/**
* 设置tooltip的位置，防止超出画布
*/
tooltipPosition() {
return (point, params, dom, rect, size) => {
//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
let x = point[0]
let y = point[1]
let viewWidth = size.viewSize[0]
let viewHeight = size.viewSize[1]
let boxWidth = size.contentSize[0]
let boxHeight = size.contentSize[1]
let posX = 0 //x坐标位置
let posY = 0 //y坐标位置
if (x < boxWidth) { //左边放不开
posX = 5
} else { //左边放的下
posX = x - boxWidth
}
if (y < boxHeight) { //上边放不开
posY = 5
} else { //上边放得下
posY = y - boxHeight
}
return [posX, posY]
}
},
// toFunction(e){
// return eval('('+e+')')
// },
/**
* tooltip格式化
* @param {Object} unit 数值后的单位
* @param {Object} formatFloat2 是否保留两位小数
* @param {Object} formatThousands 是否添加千分位
*/
tooltipFormatter(unit, formatFloat2, formatThousands,formatFunClue) {
return params => {
let result = ''
unit = unit ? unit : ''
for (let i in params) {
if (i == 0) {
result += params[i].axisValueLabel
}
let value = '--'
if (params[i].data !== null) {
value = params[i].data
// 保留两位小数
if (formatFloat2) {
value = this.formatFloat2(value)
}
// 添加千分位
if (formatThousands) {
value = this.formatThousands(value)
}
if(formatFunClue){
this.$emit('tooltipData',params)
return ''
}
}
// #ifdef H5
result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
// #endif
// #ifdef APP-PLUS
result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
// #endif
}
return result
}
},
/**
* 保留两位小数
* @param {Object} value
*/
formatFloat2(value) {
let temp = Math.round(parseFloat(value) * 100) / 100
let xsd = temp.toString().split('.')
if (xsd.length === 1) {
temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
return temp
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
temp = temp.toString() + '0'
}
return temp
}
},
/**
* 添加千分位
* @param {Object} value
*/
formatThousands(value) {
if (value === undefined || value === null) {
value = ''
}
if (!isNaN(value)) {
value = value + ''
}
let re = /\d{1,3}(?=(\d{3})+$)/g
let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
return s1.replace(re, '$&,') + s2
})
return n1
}
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
2、使用ucharts
<template>
<!-- <page-meta :root-font-size="fontsize+'px'"></page-meta> -->
<view class="wrap">
<!-- 左边状态栏部分 -->
<!-- <view class="left">
<view style="width: 100rpx;height: 100%;"></view>
</view> -->
<!-- 左边状态栏部分 -->
<!-- 右边图标部分 -->
<view class="right" :style="[{height: Width+'px'},{width: Height+'px'}]">
<!--动态设置html字体大小-->
<view style="padding: 40rpx 20rpx 0 20rpx; position: relative;" v-if="!show">
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA"
@touchend="moveLineA" disable-scroll=true
:style="[{height: cWidth+'px'},{width: cHeight+'px'}]"></canvas>
<!-- 画布，图表的HTML部分-->
</view>
<view v-if="show" :style="[{height: cHeight+'px'},{width: cWidth+'px'}]" class="flex-jb">暂无监测曲线</view>
<view class="bg-f1" style="width: 28rpx;height: 100%;"></view>
<!-- 头部开始 -->
<view style="status-bar-div">
<view class="status-bar" :style="[{height: Width+'px'},]">
<u-icon size="42" name="arrow-left" color="#333333" class="back-icon" @click="back()"></u-icon>
<view :style="[{'padding-top': cWidth-180+'rpx'},]">
<text class="text-333 font-28 font-bold">监测曲线</text>
</view>
</view>
</view>
<!-- 头部结束 -->
</view>
<!-- 右边图表部分 -->
</view>
</template>
<script>
import uCharts from '../../components/u-charts.js'
var that; //用于全局使用this
var canvaLineA = null; //uCharts实例
export default {
data() {
return {
title: 'Hello',
fontsize: 12,
show: false,
cWidth: '',
cHeight: '', //画布的宽高
Width: '',
Height: '', //画布的宽高
yName1: '',
yName2: '',
number: 7,
yName: '甲烷浓度(VOL),温度(°C)',
yAxis: 'ch4_value,temperature',
item: {},
chartsData: { //数据
xAxis: ["2012", "2013", "2014", "2015", "2016", "2017"],
seriesData: [{
name: "成交量A",
data: [35, 8, 25, 37, 4, 20]
}, {
name: "成交量B",
data: [70, 40, 65, 100, 44, 68]
}]
}
}
},
onLoad(options) {
// let fontSize = '100px';
// const res = uni.getSystemInfoSync();
// if (res.screenWidth < 750) { //根据屏幕宽度进行适配
// fontSize = 100 * (res.screenWidth / 750) + 'px';
// }
// this.fontsize = fontSize;
// console.log(res.screenWidth)
console.log(options.data)
this.item = JSON.parse(decodeURIComponent(options.data));
console.log(this.item)
uni.showLoading({
title: "加载中..."
})
setTimeout(function() {
//plus.screen.unlockOrientation();
//plus.screen.lockOrientation('landscape-primary');
//uni.hideLoading();
}, 1000)
const res = uni.getSystemInfoSync();
console.log(res)
this.Width = res.windowHeight - 20;
this.Height = res.windowWidth;
this.cWidth = res.windowHeight - 40; //uni.upx2px(750)
this.cHeight = res.windowWidth - 90; //设置宽高uni.upx2px(500)uni.upx2px(res.windowWidth) + 100
console.log(this.cWidth);
if (this.cWidth <= 700) {
this.number = 5;
}
console.log(this.cWidth <= 700)
that = this //声明this
that.getData(this.chartsData);
},
mounted() {
},
onUnload() {
// let ctx = uni.createCanvasContext('canvasLineA', this);
// ctx.draw()
//plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
this.cHeight = 0;
this.cWidth = 0;
canvaLineA = null;
console.log(22222);
},
// onBackPress(e) {
// this.back();
// console.log(e)
// return true;
// },
methods: {
back() {
// uni.redirectTo({
// url: '/pages/warn/kongbai',
// })
uni.navigateBack({
delta: 1
})
},
//获取数据
getData() {
let chartData = res.data.curveData;
let arr = [];
for (var i = 0; i < chartData.seriesData.length; i++) {
let max1 = 0;
//Number(Math.max(...chartData.seriesData[i].data)) + Number(10);
max1 = Math.ceil(Math.max.apply(null, chartData.seriesData[i].data) / 5) * 5;
let position = 'left';
if (i == 1) {
position = 'right'
}
let obj = {
gridType: 'dash',
gridColor: '#CCCCCC',
calibration: true,
position: position,
title: chartData.seriesData[i].name,
max: max1,
splitNumber: Math.ceil(Math.max.apply(null, chartData.seriesData[i].data) / 5),
titleFontSize: 12,
}
arr.push(obj);
}
chartData.xAxis = chartData.xAxis.map((item, index) => {
item = item.slice(5, 19)
//item = item.split(" ")[0] + "\r" + item.split(" ")[1];
console.log(item)
return item
})
console.log(arr)
//let num = 10 ** (Math.min.apply(null, chartData.seriesData[0].data).toString().length - 2);
let max = Math.ceil(Math.max.apply(null, chartData.seriesData[0].data) / 5) * 5;
let min = Math.floor(Math.min.apply(null, chartData.seriesData[0].data) / 5) * 5;
if (chartData.seriesData.length == 1) {
that.showLineA("canvasLineA", chartData, arr, max, min); //触发执行函数
} else {
//两条y轴的情况
that.showLineA2("canvasLineA", chartData, arr, max, min); //触发执行函数
}
},
showLineA(canvasId, chartData, arr, max, min) {
console.log(that.number)
let xAxisObj = {};
// if (that.number == 7) {
// } else {
// xAxisObj = { //X轴配置
// labelCount: 5,
// itemCount: 5,
// gridColor: '#CCCCCC', //X轴网格颜色
// gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
// //dashLength: 12, //X轴网格为虚线时，单段虚线长度
// scrollShow: true
// }
// }
xAxisObj = { //X轴配置
//labelCount:6,
itemCount: 5,
gridColor: '#CCCCCC', //X轴网格颜色
gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
//dashLength: 12, //X轴网格为虚线时，单段虚线长度
scrollShow: true
}
canvaLineA = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
$this: that, //指针
canvasId: canvasId, //id
type: 'line', //类型
colors: ['#facc14', '#f04864', '#90ed7d'], //每一条的颜色
fontSize: 10, //字体大小
padding: [15, 15, 0, 15], //空白区域值
legend: { //图例相关配置
show: true,
padding: 5,
lineHeight: 11,
margin: 0,
},
tooltip: 'axis',
formatter: val => {
clickIndex = val[0].dataIndex
return 'tooltip'
},
pixelRatio: 1,
dataLabel: true, //显示数据标签内容值
rotate: true, //横屏显示
categories: chartData.xAxis, //数据类别
series: chartData.seriesData, //数据列表
animation: true,
//enableScroll: true, //开启图表拖拽功能
xAxis: xAxisObj,
yAxis: {
data: [{
disabled: false,
gridType: 'dash',
gridColor: '#CCCCCC',
calibration: true,
position: 'left',
splitNumber: 5,
title: chartData.seriesData[0].name,
min: min,
max: max,
titleFontSize: 9,
format: (val) => {
return val.toFixed(0)
}
}],
showTitle: true,
},
width: that.cHeight, //canvas宽度，单位为px
height: that.cWidth, //canvas高度，单位为px
extra: { //扩展配置
line: {
type: 'curve' //曲线 curve曲线，straight直线
}
}
});
},
showLineA2(canvasId, chartData, arr, max, min) {
console.log(that.number)
let xAxisObj = {};
// if (that.number == 7) {
// } else {
// xAxisObj = { //X轴配置
// labelCount: 5,
// itemCount: 5,
// gridColor: '#CCCCCC', //X轴网格颜色
// gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
// //dashLength: 12, //X轴网格为虚线时，单段虚线长度
// scrollShow: true
// }
// }
xAxisObj = { //X轴配置
//labelCount:6,
itemCount: 5,
gridColor: '#CCCCCC', //X轴网格颜色
gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
//dashLength: 12, //X轴网格为虚线时，单段虚线长度
scrollShow: true
}
canvaLineA = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
$this: that, //指针
canvasId: canvasId, //id
type: 'line', //类型
colors: ['#facc14', '#f04864', '#90ed7d'], //每一条的颜色
fontSize: 10, //字体大小
padding: [15, 15, 0, 15], //空白区域值
legend: { //图例相关配置
show: true,
padding: 5,
lineHeight: 11,
margin: 0,
},
tooltip: 'axis',
formatter: val => {
clickIndex = val[0].dataIndex
return 'tooltip'
},
pixelRatio: 1,
dataLabel: true, //显示数据标签内容值
rotate: true, //横屏显示
categories: chartData.xAxis, //数据类别
series: chartData.seriesData, //数据列表
animation: true,
//enableScroll: true, //开启图表拖拽功能
xAxis: xAxisObj,
yAxis: {
data: [{
disabled: false,
gridType: 'dash',
gridColor: '#CCCCCC',
calibration: true,
position: 'left',
splitNumber: 5,
title: chartData.seriesData[1].name,
titleFontSize: 9,
format: (val) => {
return val.toFixed(0)
}
},
{
disabled: false,
gridType: 'dash',
gridColor: '#CCCCCC',
calibration: true,
position: 'right',
splitNumber: 5,
title: chartData.seriesData[0].name,
min: min,
max: max,
titleFontSize: 9,
format: (val) => {
return val.toFixed(0)
}
}
],
showTitle: true,
},
width: that.cHeight, //canvas宽度，单位为px
height: that.cWidth, //canvas高度，单位为px
extra: { //扩展配置
line: {
type: 'curve' //曲线 curve曲线，straight直线
}
}
});
},
moveLineA(e) {
canvaLineA.showToolTip(e, { //详情框
format: function(item, category) {
console.log(category + ' ' + item.name + ':' + item.data)
return category + ' ' + item.name + ':' + item.data
}
});
},
}
}
</script>
<style>
</style>
<style scoped lang="scss">
/deep/ page {
overflow: hidden;
}
.wrap {
display: flex;
overflow: hidden;
// position: fixed;
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
// background-color: #3F536E;
// -moz-transform: rotate(90deg);
// -webkit-transform: rotate(90deg);
// position: static;
}
.flex-jb {
display: flex;
justify-content: center;
align-items: center;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.container {}
.charts {
// background-color: #FFFFFF;
// -moz-transform: rotate(90deg);
// -webkit-transform: rotate(90deg);
}
.status-bar-div {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.status-bar {
height: 40rpx;
width: 90rpx;
display: flex;
flex-direction: column;
background-color: #FFFFFF;
align-items: center;
padding: 60rpx 4rpx 0 5rpx;
// justify-content: center;
view {
// height: 600px;
text-align: center;
vertical-align: middle;
text {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
width: 100%;
text-align: center;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
}
}
}
.back-icon {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.right {
// overflow: hidden;
display: flex;
}
.left-word {
font-size: 24rpx;
color: #facc14;
text-align: center;
z-index: 10;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
width: 200px;
height: 20px;
// border: 1px solid red;
position: absolute;
top: 110rpx;
right: -176rpx;
text {
display: inline-block;
vertical-align: middle;
}
}
.right-word {
position: absolute;
bottom: 20rpx;
right: -40rpx;
font-size: 24rpx;
color: #f04864;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
</style>
