165 lines
3.2 KiB
Vue
165 lines
3.2 KiB
Vue
<template>
|
|
<Card title="责任单位分析">
|
|
<div class="leftBox">
|
|
<div id="echartsLeftBottom" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { onMounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
function draw() {
|
|
let chartDom = document.getElementById("echartsLeftBottom");
|
|
if (chartDom) {
|
|
chartDom.removeAttribute("_echarts_instance_");
|
|
}
|
|
let echartsTest = echarts.init(document.getElementById("echartsLeftBottom"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
borderRadius: 5,
|
|
borderWidth: 5,
|
|
formatter: function (params) {
|
|
let dot =
|
|
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
|
|
return params[0].name + "<br>" + params[0].value;
|
|
}
|
|
},
|
|
grid: {
|
|
left: "4%",
|
|
right: "4%",
|
|
bottom: "5%",
|
|
top: "15%",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
show: true,
|
|
data: ['责任单位','责任单位','责任单位','责任单位','责任单位','责任单位','责任单位'],
|
|
triggerEvent: true,
|
|
axisTick: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "red"
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#193c81"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
rotate: 0,
|
|
interval: 0,
|
|
textStyle: {
|
|
padding: [0, 0, 0, 0],
|
|
fontSize: 12,
|
|
color: "#fff"
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: "隐患数",
|
|
triggerEvent: true,
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
padding: [0, 0, 10, 0]
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#193c81"
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#193c81"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 12
|
|
}
|
|
}
|
|
},
|
|
// color: ["#e54035"],
|
|
series: [
|
|
{
|
|
name: "数量",
|
|
// barMinHeight: 10,
|
|
barWidth: 80,
|
|
type: "pictorialBar",
|
|
barCategoryGap: "5%",
|
|
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
|
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
|
itemStyle: {
|
|
normal: {
|
|
//barBorderRadius: 5,
|
|
//渐变色
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: "rgba(130, 251, 234, 0)"
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: "rgba(130, 251, 234, 1)"
|
|
}
|
|
])
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 12
|
|
}
|
|
}
|
|
},
|
|
data: [100,200,300,100,20,60,120],
|
|
z: 10
|
|
},
|
|
{
|
|
name: "hill",
|
|
type: "bar",
|
|
barWidth: "60%",
|
|
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(11,47,68,.8)"
|
|
}
|
|
},
|
|
// data: 200,
|
|
z: 9
|
|
}
|
|
]
|
|
};
|
|
echartsTest.setOption(option);
|
|
}
|
|
onMounted(() => {
|
|
draw();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.leftBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |