You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.2 KiB
102 lines
2.2 KiB
<template>
|
|
<div class="box-bg">
|
|
<div :style="{ width: '92%', height: '94%',margin: 'auto 3% auto 5%' }" id="statistics"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import * as echarts from "echarts";
|
|
|
|
export default defineComponent({
|
|
name: "statistics",
|
|
data() {
|
|
return {
|
|
myCharts: {},
|
|
carOfInLists: [],
|
|
carOfOutLists: [],
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
// 绘制图表
|
|
this.getOptions();
|
|
},
|
|
|
|
methods: {
|
|
// 绘制图表
|
|
getOptions() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
let statistics = document.getElementById("statistics");
|
|
statistics.removeAttribute("_echarts_instance_");
|
|
let myChart1 = echarts.init(statistics);
|
|
|
|
myChart1.setOption({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0",
|
|
right: "6%",
|
|
top: "20%",
|
|
bottom: "0",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
data: ["2016", "2017", "2018", "2019", "2020"],
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
show: false,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [300, 150, 180, 120, 200],
|
|
type: "bar",
|
|
barCategoryGap: "50%",
|
|
showBackground: true,
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: "#83bff6" },
|
|
{ offset: 0.5, color: "#188df0" },
|
|
{ offset: 1, color: "#188df0" },
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.box-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.statistics {
|
|
width: 1440rem;
|
|
height: 1110rem;
|
|
}
|
|
</style>
|
|
|