|
|
@@ -0,0 +1,95 @@
|
|
|
+<template>
|
|
|
+ <div id="top-right">
|
|
|
+ <div id="chart" class="" style="height:450px;margin:40px 0 0 0"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import echarts from 'echarts/lib/echarts';
|
|
|
+import 'echarts/lib/chart/bar';
|
|
|
+import 'echarts/lib/chart/pie';
|
|
|
+import 'echarts/lib/chart/line';
|
|
|
+import 'echarts/lib/component/title';
|
|
|
+import 'echarts/lib/component/legend';
|
|
|
+import 'echarts/lib/component/toolbox';
|
|
|
+import 'echarts/lib/component/markPoint';
|
|
|
+import 'echarts/lib/component/tooltip';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions } = createNamespacedHelpers('news');
|
|
|
+// const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
|
|
|
+export default {
|
|
|
+ name: 'top-right',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: () => {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['query']),
|
|
|
+ // ...personalRoom(['countRoom']),
|
|
|
+ async init() {
|
|
|
+ let res = await this.query();
|
|
|
+ console.log(res.data);
|
|
|
+
|
|
|
+ // let rooms = await this.countRoom();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ let arr = res.data.filter(f => f.status != '3');
|
|
|
+ console.log(arr);
|
|
|
+
|
|
|
+ let s1 = res.data.filter(f => f.status == '1'); //达成意向
|
|
|
+ console.log(s1);
|
|
|
+ let s2 = res.data.filter(f => f.status == '2'); //对接完成
|
|
|
+ console.log(s2);
|
|
|
+
|
|
|
+ let s3 = res.data.filter(f => f.status == '0'); //正在洽谈
|
|
|
+ this.myChart = echarts.init(document.getElementById('chart'));
|
|
|
+ const option = {
|
|
|
+ title: { text: '交易情况', left: 'center' },
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ legend: {
|
|
|
+ data: ['正在洽谈', '达成意向', '对接完成'],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['正在洽谈', '达成意向', '对接完成'],
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '交易情况',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ data: [
|
|
|
+ { name: '正在洽谈', value: s3.length, itemStyle: { color: '#7cb5ec' } },
|
|
|
+ { name: '达成意向', value: s1.length, itemStyle: { color: '#ffa94b' } },
|
|
|
+ { name: '对接完成', value: s2.length, itemStyle: { color: '#346da4' } },
|
|
|
+ ],
|
|
|
+ animationType: 'scale',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['top-right']),
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped></style>
|
