70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
||
<div>
|
||
<view class="project-overview"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||
|
||
export default {
|
||
props: {
|
||
optionData: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
option: {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['规划中工程', '筹备中工程', '在建中工程', '完工工程'],
|
||
// 字体占用空间过大，旋转45度
|
||
axisLabel: {
|
||
rotate: 45
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
data: this.optionData,
|
||
type: 'bar',
|
||
barWidth: '10px',
|
||
// 设置柱状图颜色-渐变色 90deg, #00D9FF 0%, #0490F4 100%
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#00D9FF' },
|
||
{ offset: 1, color: '#0490F4' }
|
||
]),
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
}
|
||
}
|
||
]
|
||
},
|
||
myChart: null
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('🚀 ~ mounted ~ this.optionData:', this.optionData)
|
||
this.init()
|
||
},
|
||
methods: {
|
||
async init() {
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef.init(echarts)
|
||
chart.setOption(this.option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.project-overview {
|
||
height: 300px;
|
||
}
|
||
</style>
|