215 lines
4.6 KiB
Vue
215 lines
4.6 KiB
Vue
<template>
|
|
<div>
|
|
<div id="circlecz" style="width: 1000px; height: 100%"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { ref, onMounted, watch, defineProps } from "vue";
|
|
const props = defineProps({
|
|
data: { type: Array }
|
|
});
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
lineChartFn();
|
|
}
|
|
);
|
|
function lineChartFn() {
|
|
var chartDom = document.getElementById("circlecz");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
option = {
|
|
legend: {
|
|
type: "plain",
|
|
show: true,
|
|
right: 0,
|
|
textStyle: {
|
|
color: "#ddd"
|
|
},
|
|
data: [
|
|
{
|
|
name: "对讲机"
|
|
},
|
|
{ name: "警务终端" },
|
|
{ name: "执法记录仪" }
|
|
]
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
grid: {
|
|
top: "25%",
|
|
right: "3%",
|
|
left: "5%",
|
|
bottom: "12%"
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: props.data.map((item) => item.ssbm),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.12)"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#e2e9ff",
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
// name: '单位：万元',
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
color: "#e2e9ff"
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,1)"
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.12)"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "对讲机",
|
|
type: "bar",
|
|
data: props.data.map((item) => item.djj),
|
|
barWidth: "30px",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(0,244,255,1)" // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(0,77,167,1)" // 100% 处的颜色
|
|
}
|
|
],
|
|
false
|
|
),
|
|
barBorderRadius: [30, 30, 30, 30],
|
|
shadowColor: "rgba(0,160,221,1)",
|
|
shadowBlur: 4
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: "警务终端",
|
|
type: "bar",
|
|
data: props.data.map((item) => item.jwzd),
|
|
barWidth: "30px",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(121, 88, 238, 1)" // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(79, 2, 135, 1)" // 100% 处的颜色
|
|
}
|
|
],
|
|
false
|
|
),
|
|
barBorderRadius: [30, 30, 30, 30],
|
|
shadowColor: "rgba(0,160,221,1)",
|
|
shadowBlur: 4
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: "执法记录仪",
|
|
type: "bar",
|
|
data: props.data.map((item) => item.zfjly),
|
|
barWidth: "30px",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
|
|
}
|
|
],
|
|
false
|
|
),
|
|
barBorderRadius: [30, 30, 30, 30],
|
|
shadowColor: "rgba(0,160,221,1)",
|
|
shadowBlur: 4
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
},
|
|
position: "top"
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
window.onresize = function () {
|
|
myChart.resize();
|
|
};
|
|
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
}
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dd {
|
|
color: rgba(79, 2, 135, 0.326);
|
|
}
|
|
</style>
|