198 lines
4.1 KiB
Vue
198 lines
4.1 KiB
Vue
<template>
|
||
<view style="width:100%; height:150rpx">
|
||
<l-echart ref="chartRef"></l-echart>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||
export default {
|
||
name: "bar",
|
||
props: {
|
||
apiData: {
|
||
type: Object, // 定义 props 类型
|
||
default: null // 默认值
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听 message 的变化
|
||
apiData(val) {
|
||
// console.log('父组件传递的值发生变化：', val);
|
||
this.init(val);
|
||
}
|
||
},
|
||
methods: {
|
||
async init(data) {
|
||
let option = {
|
||
title: {
|
||
show: false,
|
||
text: 'SOC准确度',
|
||
textStyle: {
|
||
color: '#FFFFFF'
|
||
},
|
||
left: '300px',
|
||
top: '300'
|
||
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
formatter: "{b} <br> {c}%"
|
||
|
||
},
|
||
legend: {
|
||
show: false,
|
||
icon: "circle",
|
||
bottom: '43%',
|
||
left: '20%',
|
||
itemWidth: 7,
|
||
itemHeight: 7,
|
||
itemGap: 40,
|
||
textStyle: {
|
||
color: '#89A7AF',
|
||
},
|
||
data: [{
|
||
name: 'SOC准确度'
|
||
},
|
||
// {
|
||
// name: '危化品'
|
||
// },
|
||
]
|
||
},
|
||
xAxis: [{
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
position: 'right', // 将Y轴标签设置到最右边
|
||
offset: -3,
|
||
type: 'category',
|
||
data: ['SOC'],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(136, 169, 205, 1)',
|
||
}
|
||
}
|
||
|
||
}],
|
||
series: [{
|
||
name: 'SOC准确度',
|
||
type: 'bar',
|
||
barWidth: 16,
|
||
label: {
|
||
normal: {
|
||
borderWidth: 10,
|
||
distance: 20,
|
||
align: 'center',
|
||
verticalAlign: 'middle',
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%',
|
||
color: '#fff'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: '#55ffff'
|
||
},
|
||
data: [{
|
||
value: data.socAccuracy,
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
type: 'bar',
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#55ffff' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#55ffff' // 100% 处的颜色
|
||
}],
|
||
globalCoord: false, // 缺省为 false
|
||
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
},
|
||
// {
|
||
// name: '危化品',
|
||
// type: 'bar',
|
||
// barWidth: 16,
|
||
// stack: '危货种类占比',
|
||
// itemStyle: {
|
||
// color: '#00ff7f'
|
||
// },
|
||
// label: {
|
||
// normal: {
|
||
// borderWidth: 10,
|
||
// distance: 20,
|
||
// align: 'center',
|
||
// verticalAlign: 'middle',
|
||
// // borderRadius: 1,
|
||
// // borderColor: '#00ff7f',
|
||
// // backgroundColor: '#00ff7f',
|
||
// show: true,
|
||
// position: 'top',
|
||
// formatter: '90%',
|
||
// color: '#fff'
|
||
// }
|
||
// },
|
||
// data: [{
|
||
// value: 30,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: {
|
||
// type: 'bar',
|
||
// colorStops: [{
|
||
// offset: 0,
|
||
// color: '#00ff7f' // 0% 处的颜色
|
||
// }, {
|
||
// offset: 1,
|
||
// color: '#00ff7f' // 100% 处的颜色
|
||
// }],
|
||
// globalCoord: false, // 缺省为 false
|
||
|
||
// }
|
||
// }
|
||
// }
|
||
// }]
|
||
// },
|
||
]
|
||
}
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef.init(echarts);
|
||
chart.setOption(option)
|
||
// 监听窗口大小改变事件，并调用resize方法
|
||
window.onresize = function() {
|
||
myChart.resize();
|
||
};
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
|
||
</style> |