113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div style="height:100%;width:100%" :id="echartsId"></div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import { on } from "element-plus/lib/utils";
|
||
|
|
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
echartsId:{
|
||
|
|
type:String,
|
||
|
|
default:'moreBarId'
|
||
|
|
},
|
||
|
|
data:{
|
||
|
|
type:Object,
|
||
|
|
default:{
|
||
|
|
xData:[],
|
||
|
|
color:[],
|
||
|
|
list:[]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
watch(()=>props.data,val=>{
|
||
|
|
nextTick(()=>{ init(val) })
|
||
|
|
},{immediate:true,deep:true})
|
||
|
|
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
function init (val) {
|
||
|
|
let color = val.color;
|
||
|
|
let list = val.list
|
||
|
|
let total = 0
|
||
|
|
let series = list.map((item ,idx)=>{
|
||
|
|
let obj = {
|
||
|
|
type: "bar",
|
||
|
|
stack:'total',
|
||
|
|
name:item.label,
|
||
|
|
data:item.val,
|
||
|
|
barGap:'80%',
|
||
|
|
barWidth: "30px",
|
||
|
|
itemStyle:{normal: { color: color[idx] }}
|
||
|
|
}
|
||
|
|
if(item.label == '总数'){
|
||
|
|
obj.stack = ''
|
||
|
|
obj.z = -1
|
||
|
|
obj.barGap = '-100%'
|
||
|
|
obj.label = { normal:{show:true,position:'top',color:'#EB00FF'} }
|
||
|
|
}
|
||
|
|
return obj;
|
||
|
|
})
|
||
|
|
chartFn(series)
|
||
|
|
}
|
||
|
|
|
||
|
|
function chartFn(series) {
|
||
|
|
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||
|
|
var option = {
|
||
|
|
grid: {
|
||
|
|
top: "30%",
|
||
|
|
right: "2%",
|
||
|
|
left: "2%",
|
||
|
|
bottom: "3%",
|
||
|
|
containLabel:true
|
||
|
|
},
|
||
|
|
legend:{
|
||
|
|
data:props.data.list.map(v=>{return v.label}),
|
||
|
|
textStyle: { color: "#fff"},
|
||
|
|
icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
|
||
|
|
itemWidth:16,
|
||
|
|
itemHeight:8,
|
||
|
|
itemGap:10
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
lineStyle: { color: "#ddd" }
|
||
|
|
},
|
||
|
|
backgroundColor: "rgba(255,255,255,1)",
|
||
|
|
padding: [5, 10],
|
||
|
|
textStyle: { color: "#7588E4" },
|
||
|
|
extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
data:props.data.xData,
|
||
|
|
axisTick: { show: false },
|
||
|
|
axisLine: { show: false },
|
||
|
|
axisLabel: { color: "#fff",magin:20 },
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
splitLine: {
|
||
|
|
show:true ,
|
||
|
|
lineStyle: {
|
||
|
|
type:'dashed',
|
||
|
|
color: "rgba(14,95,255,0.5)"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: { show: false },
|
||
|
|
axisLine: { show: false },
|
||
|
|
axisLabel: { color: "#fff" },
|
||
|
|
},
|
||
|
|
series:series
|
||
|
|
};
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
window.addEventListener('resize',function(){
|
||
|
|
myChart.resize();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
</style>
|