一种比较简单取巧的方式：使用图片代替立体柱状图 可以直接把ui给的柱状图的立体柱体图片下载下来 转换成base64文件 使用symbol去设置柱体 具体可参考echarts使用图片代替立体柱状图 - 掘金 (juejin.cn)
// 进度条
<template>
<div class="six-hundred-percent" :style="styleObj">
<div class="common-title" v-show="height">
<slot name="title"></slot>
</div>
<div class="content enforce-content">
<div id="time-container"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import { echartfontSize} from "@/utils"
export default {
name: 'theCaseTime',
components: {},
props: {
height: {
type: Number
}
},
data () {
return {
chart: null,
chartDatas: [],
option : {
textStyle: {
color: "#c0c3cd",
fontSize: 14
},
animation: true,
toolbox: {
show: false,
feature: {
saveAsImage: {
backgroundColor: "#031245"
},
restore: {}
},
iconStyle: {
borderColor: "#c0c3cd"
}
},
legend: {
top: 5,
itemWidth: 16,
itemHeight: 8,
left: "center",
padding: 0,
textStyle: {
color: "#fff",
fontSize: 14,
padding: [2, 0, 0, 0]
},
data: ['案件数量']
},
color: ["#0b9eff", "#49beff"],
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 40
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true
}
},
},
xAxis: {
alignWithLabel: true,
nameTextStyle: {
color: "#c0c3cd",
padding: [0, 0, -10, 0],
fontSize: 14
},
axisLabel: {
color: "#c0c3cd",
rotate: 30,
fontSize: 14,
interval: 0
},
axisTick: {
lineStyle: {
color: "#384267",
width: 1
},
show: true
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "dashed"
},
show: true
},
data: [],
type: "category"
},
yAxis: {
nameTextStyle: {
color: "#c0c3cd",
padding: [0, 0, -10, 0],
fontSize: 14
},
axisLabel: {
color: "#c0c3cd",
fontSize: 14
},
axisTick: {
lineStyle: {
color: "#384267",
width: 1
},
show: true
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#2597a3",
width: 1
}
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "dashed"
},
show: true
},
name: ""
},
series: [{
name: '案件数量',
tooltip: {
show: true,
},
data: [],
type: "bar",
barMaxWidth: "auto",
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [{
offset: 0,
color: "#63caff"
}, {
offset: 1,
color: "#0b9eff"
}]
}
},
label: {
show: false,
position: "top",
distance: 10,
color: "#fff"
}
}, {
data: [],
tooltip: {
show: false,
},
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolOffset: [-2, "50%"],
symbolSize: [20, 10],
},
{
name: '',
data: [],
tooltip: {
show: false,
},
type: "pictorialBar",
barMaxWidth: "20",
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [20, 10],
z: 2
}],
}
}
},
computed: {
styleObj () {
return {
'height': this.height + 'px'
}
},
// 地区信息
areaInfo () {
return this.$store.state.app.areaInfo
},
},
mounted () {
this.getRectificationRate()
},
methods: {
// 获取接口数据
getDatas (deptId) {
this.getRectificationRate(deptId)
},
// 获取数据
getRectificationRate (deptId) {
// deptId = deptId || this.areaInfo.id
this.$http.get(`/enforce/lawenforcementcensus/caseHappenTimeCensus`)
.then(res => {
if (res.success) {
this.chartDatas = res.data
this.initCahrt(res.data)
}
})
.catch(err => console.log(err))
},
initCahrt(data) {
const chart = echarts.init(document.getElementById('time-container'))
this.option.xAxis.data = data.map(item=>item.timeStr)
this.option.series[0].data = this.option.series[2].data = data.map(item=>item.caseCount)
this.option.series[1].data = data.map(item=>1)
chart.setOption(this.option)
this.chart = chart
window.addEventListener("resize",function(){
chart.resize();
});
}
}
}
</script>
<style lang="scss" scoped>
$url: "~images/module/regulatoryIndex";
.six-hundred-percent {
width: 540px;
overflow: hidden;
transition: height 0.4s;
.content {
padding: 15px 15px 5px;
#time-container {
height: 100%;
width: 100%;
}
}
/deep/ .el-button span {
line-height: 0px;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
</style>
