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>
|