|
@@ -1,219 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="Ds1br3">
|
|
|
- <div class="box">
|
|
|
- <div class="title">
|
|
|
- <div class="text">近半年高新区车购税缴纳数据</div>
|
|
|
- <div class="border"></div>
|
|
|
- </div>
|
|
|
- <div class="datas">
|
|
|
- <dv-charts :option="option" style="width: 100; height: 100%" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- name: "Ds1br3",
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- option: {
|
|
|
- title: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 35,
|
|
|
- left: 60,
|
|
|
- right: 60,
|
|
|
- bottom: 35,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: [""],
|
|
|
- axisLine: {
|
|
|
- style: {
|
|
|
- stroke: "#2E3F44",
|
|
|
- lineWidth: 1,
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- style: {
|
|
|
- fill: "#FFFFFF",
|
|
|
- fontSize: 10,
|
|
|
- fontFamily: "苹方简R",
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- name: "缴税金额(万元)",
|
|
|
- data: "value",
|
|
|
- min: 0,
|
|
|
- max: 300,
|
|
|
- nameTextStyle: {
|
|
|
- fill: "#00E0DB",
|
|
|
- fontSize: 10,
|
|
|
- fontFamily: "苹方简R",
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- style: {
|
|
|
- fill: "#fff",
|
|
|
- fontSize: 10,
|
|
|
- fontFamily: "苹方简R",
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- style: {
|
|
|
- stroke: "#2E3F44",
|
|
|
- lineWidth: 1,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "缴税笔数(笔)",
|
|
|
- data: "value",
|
|
|
- min: 0,
|
|
|
- max: 1000,
|
|
|
- position: "right",
|
|
|
- nameTextStyle: {
|
|
|
- fill: "#F7B500",
|
|
|
- fontSize: 10,
|
|
|
- fontFamily: "苹方简R",
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- style: {
|
|
|
- fill: "#fff",
|
|
|
- fontSize: 10,
|
|
|
- fontFamily: "苹方简R",
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "缴税金额(万元)",
|
|
|
- data: [0],
|
|
|
- type: "line",
|
|
|
- lineStyle: {
|
|
|
- lineWidth: 3,
|
|
|
- stroke: "#00E0DB",
|
|
|
- },
|
|
|
- linePoint: {
|
|
|
- style: {
|
|
|
- fill: "#fff",
|
|
|
- lineWidth: 12,
|
|
|
- stroke: "#00E0DB",
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "缴税笔数(笔)",
|
|
|
- data: [0],
|
|
|
- type: "line",
|
|
|
- lineStyle: {
|
|
|
- lineWidth: 3,
|
|
|
- stroke: "#F7B500",
|
|
|
- },
|
|
|
- linePoint: {
|
|
|
- style: {
|
|
|
- fill: "#fff",
|
|
|
- lineWidth: 12,
|
|
|
- stroke: "#F7B500",
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- setTimeout(() => {
|
|
|
- this.getDatas();
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- getDatas() {
|
|
|
- let month = ["1月", "2月", "3月", "4月", "5月", "6月"];
|
|
|
- let money = [80, 50, 60, 80, 30, 90];
|
|
|
- let num = [0, 99, 200, 40, 10, 0];
|
|
|
- this.updateDatas(month, money, num);
|
|
|
- },
|
|
|
- updateDatas(month, money, num) {
|
|
|
- let datas = this.option;
|
|
|
- datas.xAxis.data = month;
|
|
|
- datas.series[0].data = money;
|
|
|
- datas.series[1].data = num;
|
|
|
- this.option = { ...datas };
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.Ds1br3 {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- font-family: "苹方简R";
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-bottom: 10px;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- background-image: linear-gradient(to left, #0825b7 0%, #01b3ff00 100%);
|
|
|
-
|
|
|
- .text {
|
|
|
- width: max-content;
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 22px;
|
|
|
- color: #00edff;
|
|
|
- }
|
|
|
-
|
|
|
- .border {
|
|
|
- margin-left: 15px;
|
|
|
- width: 3px;
|
|
|
- height: 15px;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .datas {
|
|
|
- margin-bottom: 20px;
|
|
|
- width: 100%;
|
|
|
- height: 0;
|
|
|
- flex: 1;
|
|
|
- background-image: url("@/assets/dataScreen1/bottom-lr-bg.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|