149 lines
3.2 KiB
Vue
149 lines
3.2 KiB
Vue
<template>
|
||
<div class="bigscreen-echarts-bar">
|
||
<div id="chartBar" :style="styles"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "echartsBar",
|
||
props: {
|
||
styles: {
|
||
type: String
|
||
},
|
||
colorList: {
|
||
type: [Array, String],
|
||
default: ""
|
||
},
|
||
option: {
|
||
stype: Array,
|
||
default: []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null
|
||
};
|
||
},
|
||
created() {
|
||
this.chart = null;
|
||
},
|
||
mounted() {
|
||
this.drawLine();
|
||
},
|
||
methods: {
|
||
drawLine() {
|
||
if (!this.chart) {
|
||
this.chart = echarts.init(document.getElementById("chartBar"));
|
||
}
|
||
|
||
const option = {
|
||
color: ["#3398DB"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow"
|
||
}
|
||
},
|
||
grid: {
|
||
left: "20",
|
||
right: "20",
|
||
bottom: "25",
|
||
top: 15,
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
magicType: { show: true, type: ["line", "bar"] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["报警总数", "未处理", "已处理"],
|
||
axisTick: {
|
||
alignWithLabel: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
margin: 10,
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
margin: 10,
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: "数量：",
|
||
type: "bar",
|
||
barWidth: "40%",
|
||
data: this.option,
|
||
itemStyle: {
|
||
//通常情况下：
|
||
normal: {
|
||
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
|
||
color: function(params) {
|
||
var colorList = [
|
||
"#00FCFF",
|
||
"#FF2F60",
|
||
"#25F094"
|
||
];
|
||
return colorList[params.dataIndex];
|
||
}
|
||
},
|
||
//鼠标悬停时：
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
this.chart.setOption(option);
|
||
}
|
||
},
|
||
watch: {
|
||
option(val, oldVal) {
|
||
this.chart = null;
|
||
this.drawLine();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.bigscreen-echarts-bar {
|
||
height: 100%;
|
||
}
|
||
</style>
|