</view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
export default {
data() {
return {
ec1:{
option:{}
},
}
},
components: {uniEcCanvas},
onLoad() {
this.getdata()
},
methods: {
getdata() {
this.ec1.option = {
title:{
text:'能耗排名',
left: 'center',
top: '0%'
},
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
textStyle: {
color: '#fff',
fontSize: 12,
},
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter:
{b} {a0}:{c0}
},
toolbox: {
show: false,
},
legend: {
show: false,
},
grid: {
left: '10%',
right: '15%',
bottom: '10%',
top: '25%',
containLabel: true
},
yAxis: {
type: 'category',
data: ['区域一','区域二','区域三','区域四','区域五'],
axisLine: {
lineStyle: {
color: '#333'
}
},
axisLabel: {
interval: 3,
rotate: 40,
showMaxLabel: true,
textStyle: {
fontFamily: 'Microsoft YaHei',
fontWeight: 600,
fontSize: 12
}
},
},
xAxis: {
name: '',
nameTextStyle: {
color: "#333"
},
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#333'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#b8b8b8'
}
},
axisLabel: {
textStyle: {
fontWeight: 600
}
}
},
series: [
{
name: '实测单耗',
type: 'bar',
data: [12,23,34,45,56],
barWidth: '30%',
itemStyle: {
normal: {
color: '#4166c0'
},
},
}
],
}
},
}
}
}
</script>
<style></style>