119 lines
2.6 KiB
Vue
119 lines
2.6 KiB
Vue
<template>
|
|
<div style="height:100%;width:100%" :id="echartsId"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import "echarts-gl";
|
|
import { ref, watch ,defineProps,nextTick } from "vue";
|
|
const props = defineProps({
|
|
echartsId:{
|
|
type:String,
|
|
default:'barId'
|
|
},
|
|
color:{
|
|
type:String,
|
|
default:'#0072ff'
|
|
},
|
|
data:{
|
|
type:Array,
|
|
default:[]
|
|
}
|
|
});
|
|
watch(()=>props.data,val=>{
|
|
nextTick(()=>{ handleDate(val) })
|
|
},{immediate:true,deep:true})
|
|
|
|
const handleDate = (val)=>{
|
|
let newArray = val.map(v=>{
|
|
let obj = {
|
|
value: v.value,
|
|
name: v.label,
|
|
}
|
|
if(v.color) obj.itemStyle = { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: v.color[0] }, { offset: 1, color: v.color[1] } ])}
|
|
return obj
|
|
})
|
|
initChart(newArray)
|
|
}
|
|
|
|
const initChart = (data) => {
|
|
var myChart = echarts.init(document.getElementById(props.echartsId));
|
|
const option = {
|
|
backgroundColor: "transparent",
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
backgroundColor: "rgba(0,0,0,0.7)",
|
|
borderColor: "#0C2E5A",
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
legend: {
|
|
top: "middle",
|
|
right: "5%",
|
|
orient: "vertical",
|
|
itemGap: 20,
|
|
textStyle: {
|
|
color: props.color,
|
|
fontSize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 15,
|
|
icon: "roundRect",
|
|
formatter: function (name) {
|
|
const data = option.series[0].data;
|
|
const target = data.find((item) => item.label === name);
|
|
if (target) {
|
|
return `${name} ${target.value} ${( (target.value / 50) * 100 ).toFixed(0)}%`;
|
|
}
|
|
return name;
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["40%", "75%"],
|
|
center: ["30%", "50%"],
|
|
startAngle: 90,
|
|
zlevel: 10,
|
|
itemStyle: {},
|
|
selectedMode: "single",
|
|
selectedOffset: 30,
|
|
animation: true,
|
|
animationType: "scale",
|
|
animationEasing: "elasticOut",
|
|
label: { show: false },
|
|
labelLine: { show: false },
|
|
|
|
data: data,
|
|
zlevel: 10,
|
|
emphasis: {
|
|
scale: true,
|
|
scaleSize: 10,
|
|
itemStyle: {
|
|
shadowBlur: 30,
|
|
shadowColor: "rgba(0,0,0,0.6)"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.echartsBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |