gitadmin
/
taauav_app_front_discard_20240715
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

大屏

master
huxinglu 4 年前
父节点
3e44e8f357
当前提交
6451413f24
共有 7 个文件被更改，包括 335 次插入 和 197 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +1
    -1
      package.json
  2. +0
    -88
      src/components/bar.vue
  3. +0
    -102
      src/components/cake.vue
  4. +119
    -0
      src/views/main/bar.vue
  5. +125
    -0
      src/views/main/cake.vue
  6. +90
    -5
      src/views/main/index.vue
  7. +0
    -1
      src/views/main/transverseBar.vue

+ 1
- 1
package.json 查看文件

{ {
"name": "taauav",
"name": "taauav_front_web",
"version": "1.0.0", "version": "1.0.0",
"description": "A Vue.js project", "description": "A Vue.js project",
"author": "bao", "author": "bao",

+ 0
- 88
src/components/bar.vue 查看文件

<template>
<div class="bar" id="container"></div>
</template>

<script>
import {Chart} from '@antv/g2';

export default {
name: "bar",
data() {
return {
data: []
}
},
mounted() {

this.data = [
{type: '江北新区', value: 130,vote:1},
{type: '玄武区', value: 80,vote:2},
{type: '秦淮区', value: 90,vote:1},
{type: '建邺区', value: 80,vote:2},
{type: '鼓楼区', value: 110,vote:1},
{type: '栖霞区', value: 85,vote:2},
{type: '雨花台', value: 85,vote:1},
{type: '浦口区', value: 120,vote:2},
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 200,
width: 450,
padding:'auto'
});
chart.scale('sales', {
tickInterval: 20
});
chart.axis('type', {
title: null,
tickLine: null,
line: null,
label: {
offset: 10,
textStyle: {
fill: '#ffffff',
fontSize: 12,
fontWeight: 300,
},
}
})
chart.axis('value', {
title: null,
tickLine: null,
line: null,
label: {
offset: 10,
textStyle: {
fill: '#ffffff',
fontSize: 12,
fontWeight: 300,
},
}
})
chart.tooltip(false)
chart.legend(false);
chart.interval().position('type*value').size(20).color('vote', (value) => {
console.log(value)
if(value == 1) {
return 'l(270) 0:#ffffff 1:#48d3d5'
}
return 'l(270) 0:#ffffff 1:#1B86F8'
});

chart.render();
this.chart = chart
let me = this
setTimeout(function () {
me.chart.changeData(me.data)
}, 1000)
},
methods: {}

}
</script>

<style lang="less">
.bar {
}
</style>

+ 0
- 102
src/components/cake.vue 查看文件

<template>
<div class="cake" id="container"></div>
</template>

<script>
import G2 from '@antv/g2';

export default {
name: "cake",
data() {
return {
data: []
}
},
mounted() {
const data = [
{type: 'BOD', value: 19},
{type: 'TP', value: 18},
{type: 'NH', value: 15},
{type: 'NH3', value: 28},
{type: 'COD', value: 36}
];

let max = 0;
data.forEach(function (obj) {
if (obj.value > max) {
max = obj.value;
}
});
// 自定义 other 的图形，增加两条线
G2.Shape.registerShape('interval', 'sliceShape', {
draw(cfg, container) {
const points = cfg.points;
const origin = cfg.origin._origin;
const percent = origin.value / max;
const xWidth = points[2].x - points[1].x;
const width = xWidth * percent;
let path = [];
path.push(['M', points[0].x+0.5, points[0].y]);
path.push(['L', points[1].x+0.5, points[1].y]);
path.push(['L', points[0].x+0.5 + width, points[2].y]);
path.push(['L', points[0].x+0.5 + width, points[3].y]);
path.push('Z');
path = this.parsePath(path);
return container.addShape('path', {
attrs: {
fill: cfg.color,
path
}
});
}
});

const chart = new G2.Chart({
container: 'container',
width: 350,
autoFit: true,
padding: [0,'auto',0,60],
height: 300
});

chart.source(data);
chart.coord('theta', {
radius: 0.8
});
chart.legend({
position: 'right-center',
offsetX: 50,
textStyle: {
fill: '#ffffff',
fontSize: 12,
fontWeight: 300,
}
})
;
chart.intervalStack()
.position('value')
.color('type',['#10BF79','#0A9EBF','#065ABF','#BD2B4A','#BCBF33'])
.shape('sliceShape')
.label('value', {
textStyle: {
fill: '#ffffff',
fontSize: 12,
fontWeight: 300,
},
offset: 40,
formatter: (val, item) => {
return item.point.type + ': ' + val + '%';
}
});

chart.render();
},
methods: {}

}
</script>

<style lang="less">
.cake {
}
</style>

+ 119
- 0
src/views/main/bar.vue 查看文件

<template>
<div class="bar" :id="id"></div>
</template>

<script>
import { Chart } from "@antv/g2";
import { mapGetters } from "vuex";

export default {
name: "bar",
data() {
return {
data: []
};
},
props: {
width: {
type: Number,
default() {
return 0;
}
},
height: {
type: Number,
default() {
return 0;
}
},
id: {
type: String,
default() {
return "";
}
}
},
computed: {
...mapGetters(["fontSize"])
},
mounted() {
this.data = [
{ type: "江北新区", value: 130, vote: 1 },
{ type: "玄武区", value: 80, vote: 2 },
{ type: "秦淮区", value: 90, vote: 1 },
{ type: "建邺区", value: 80, vote: 2 },
{ type: "鼓楼区", value: 110, vote: 1 },
{ type: "栖霞区", value: 85, vote: 2 },
{ type: "雨花台", value: 85, vote: 1 },
{ type: "浦口区", value: 120, vote: 2 }
];

const chart = new Chart({
container: this.id,
autoFit: true,
height: this.height,
width: this.width,
padding: ["auto"]
});
chart.scale("sales", {
tickInterval: 20
});
chart.axis("type", {
title: null,
tickLine: null,
line: null,
label: {
offset: 10,
textStyle: {
fill: "#ffffff",
fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
fontWeight: 300
}
}
});
chart.axis("value", {
title: null,
grid: null,
line: null,
label: {
offset: 10,
textStyle: {
fill: "#ffffff",
fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
fontWeight: 300
}
}
});
chart.tooltip(false);
chart.legend(false);
chart
.interval()
.position("type*value")
.size(this.$root.$options.filters.filterPx(0.21, this.fontSize))
.color("vote", value => {
console.log(value);
if (value == 1) {
return "l(270) 0:rgba(36,177,180,0.00) 1:#4AD9DB";
}
return "l(270) 0:rgba(0,137,255,0.30) 1:rgba(28,137,253,0.99)";
});

chart.render();
this.chart = chart;
let me = this;
setTimeout(function() {
me.chart.changeData(me.data);
}, 1000);
},
methods: {}
};
</script>

<style lang="less">
.bar {
>div{
display: flex;
align-items: center;
}
}
</style>

+ 125
- 0
src/views/main/cake.vue 查看文件

<template>
<div class="cake" :id="id"></div>
</template>

<script>
import G2 from "@antv/g2";
import { mapGetters } from "vuex";

export default {
name: "cake",
data() {
return {
data: []
};
},
props: {
width: {
type: Number,
default() {
return 0;
}
},
height: {
type: Number,
default() {
return 0;
}
},
id: {
type: String,
default() {
return "";
}
}
},
computed: {
...mapGetters(["fontSize"])
},
mounted() {
const data = [
{ type: "BOD", value: 19 },
{ type: "TP", value: 18 },
{ type: "TN", value: 15 },
{ type: "NH3", value: 28 },
{ type: "COD", value: 36 }
];

let max = 0;
data.forEach(function(obj) {
if (obj.value > max) {
max = obj.value;
}
});
// 自定义 other 的图形，增加两条线
G2.Shape.registerShape("interval", "sliceShape", {
draw(cfg, container) {
const points = cfg.points;
const origin = cfg.origin._origin;
const percent = origin.value / max;
const xWidth = points[2].x - points[1].x;
const width = xWidth * percent;
let path = [];
path.push(["M", points[0].x+0.3, points[0].y]);
path.push(["L", points[1].x+0.3, points[1].y]);
path.push(["L", points[0].x+0.3 + width, points[2].y]);
path.push(["L", points[0].x+0.3 + width, points[3].y]);
path.push("Z");
path = this.parsePath(path);
return container.addShape("path", {
attrs: {
fill: cfg.color,
path
}
});
}
});

const chart = new G2.Chart({
container: this.id,
width: this.width,
autoFit: true,
padding: [this.$root.$options.filters.filterPx(0.4,this.fontSize),'auto',this.$root.$options.filters.filterPx(0.2,this.fontSize),this.$root.$options.filters.filterPx(0.3,this.fontSize)],
height: this.height
});

chart.source(data);
chart.coord("theta", {
radius: 0.8
});
chart.legend({
position: "right-center",
offsetX: this.$root.$options.filters.filterPx(1.5,this.fontSize),
textStyle: {
fill: "#ffffff",
fontSize: this.$root.$options.filters.filterPx(0.14,this.fontSize),
fontWeight: 300
}
});
chart
.intervalStack()
.position("value")
.color("type", ["#10BF79", "#0A9EBF", "#065ABF", "#BD2B4A", "#BCBF33"])
.shape("sliceShape")
.label("value", {
textStyle: {
fill: "#ffffff",
fontSize: this.$root.$options.filters.filterPx(0.14,this.fontSize),
fontWeight: 300
},
offset: this.$root.$options.filters.filterPx(0.4,this.fontSize),
formatter: (val, item) => {
return val + "%";
}
});

chart.render();
},
methods: {}
};
</script>

<style lang="less">
.cake {
}
</style>

+ 90
- 5
src/views/main/index.vue 查看文件

</div> </div>
<div>2020-04-20</div> <div>2020-04-20</div>
</div> </div>
<div>
<div>
<img src="../../assets/img/main/orange.png" />
<div>莫愁湖发现严重水质问题</div>
</div>
<div>2020-04-20</div>
</div>
<div>
<div>
<img src="../../assets/img/main/yellow.png" />
<div>固城河河道发现污染排口</div>
</div>
<div>2020-04-20</div>
</div>
</div>
</div>
<div>
<div class="box-header-title">
<div>区属问题河湖统计</div>
</div>
<div>
<div>数量/件</div>
<bar
id="rightBar"
:width="4.48,fontSize | filterPx"
:height="barHeight,fontSize | filterPx"
></bar>
</div>
</div>
<div>
<div class="box-header-title">
<div>河湖水质问题分类统计</div>
</div>
<div>
<cake id="rightPre"
:width="4.42,fontSize | filterPx"
:height="2.174,fontSize | filterPx"></cake>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
import AMap from "AMap"; import AMap from "AMap";
import njBround from "@/assets/js/njBround"; import njBround from "@/assets/js/njBround";
import transverseBar from "@/components/transverseBar";
import transverseBar from "./transverseBar";
import bar from "./bar";
import cake from './cake'
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";


export default { export default {
name: "main-container", name: "main-container",
data() { data() {
return { return {
map: {}
map: {},
barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06
}; };
}, },
created() { created() {
computed: { computed: {
...mapGetters(["fontSize"]) ...mapGetters(["fontSize"])
}, },
components: { transverseBar },
components: { transverseBar, bar,cake},
methods: { methods: {
addBound() { addBound() {
let me = this; let me = this;
> div { > div {
margin-top: 0.21rem; margin-top: 0.21rem;
display: flex; display: flex;
justify-content: center;
justify-content: space-between;
align-items: center; align-items: center;
> div:first-child { > div:first-child {
display: flex; display: flex;
} }
} }
} }
> div:nth-child(2) {
margin-top: 0.204rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 0.178rem;
padding-top: 0.492rem;
> div:first-child {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
position: absolute;
top: 0.2rem;
left: 0.573rem;
}
}
}
> div:last-child {
margin-top: 0.2rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding: 0 0.34rem;
}
}
} }


.box-left { .box-left {
margin-top: 0.2rem; margin-top: 0.2rem;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
> div:last-child { > div:last-child {
// position: relative;
position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0.1rem 0; padding: 0.1rem 0;
} }
.box-right { .box-right {
top: 1.35rem; top: 1.35rem;
> div:first-child {
> div:last-child {
padding: 0rem 0.195rem 0.25rem 0.195rem;
}
}
> div:nth-child(2) {
margin-top: 0.15rem;
> div:last-child {
padding-bottom: 0.178rem;
padding-top: 0.392rem;
}
}
> div:last-child {
margin-top: 0.15rem;
}
} }
} }
} }

src/components/transverseBar.vue → src/views/main/transverseBar.vue 查看文件

.interval() .interval()
.opacity(1) .opacity(1)
.position("type*value") .position("type*value")
.shape('value')
.color("cat", ["#2F858F", '#EFE134', "#FB9A08", "#EB1005"]) .color("cat", ["#2F858F", '#EFE134', "#FB9A08", "#EB1005"])
.size(this.$root.$options.filters.filterPx(0.09,this.fontSize)) .size(this.$root.$options.filters.filterPx(0.09,this.fontSize))
.label("value", { .label("value", {

撰写 预览
正在加载...
取消
保存