|
|
@@ -1,25 +1,12 @@
|
|
|
<script setup>
|
|
|
- import {
|
|
|
- inject
|
|
|
- } from "vue";
|
|
|
- import html2canvas from 'html2canvas';
|
|
|
- import waterChart from "./waterChart.vue"
|
|
|
- import {
|
|
|
- blobToBase64,
|
|
|
- base64ToBlob
|
|
|
- } from '@/assets/js/blobtobase64';
|
|
|
- const getMapInstance = inject("getMapInstance");
|
|
|
- jt3d = getMapInstance();
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="mainview">
|
|
|
- <div class="header">
|
|
|
- </div>
|
|
|
<div class="middleviewer">
|
|
|
- <waterChart></waterChart>
|
|
|
+ <!-- <waterChart></waterChart> -->
|
|
|
+ <jt-charts :option="mulColumnZZTData" ></jt-charts>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -29,43 +16,124 @@
|
|
|
return {
|
|
|
// viewersName: '', //视角标签名称
|
|
|
// ImgurlList: [], //截图地址列表
|
|
|
- cdata: {
|
|
|
- xData: [],
|
|
|
- yData: [],
|
|
|
- },
|
|
|
+ xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //横坐标
|
|
|
+ yData: [23, 24, 18, 25, 27, 28, 25, 26, 25, 18, 19, 23], //人数数据
|
|
|
+ taskDate: [16, 18, 19, 17, 18, 20, 19, 15, 16, 18, 17, 16],
|
|
|
+ mulColumnZZTData:{}
|
|
|
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- getName() {
|
|
|
+ initEcharts() {
|
|
|
+ // 多列柱状图
|
|
|
+ this.mulColumnZZTData = {
|
|
|
+ xAxis: {
|
|
|
+ data: this.xData,
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: { //提示框组件
|
|
|
+ trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(255,255,255,0.2)",
|
|
|
+ borderColor: "rgba(255,255,255,0.2)",
|
|
|
+ textStyle: { // 提示框浮层的文本样式。
|
|
|
+ color: 'rgba(255,255,255,0.8)',
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图例
|
|
|
+ legend: {
|
|
|
+ data: ["去年灌溉", "今年灌溉"],
|
|
|
+ top: "0%",
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff' //字体颜色
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ color: "#e2e9ff",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255,0.12)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: "bar", //形状为柱状图
|
|
|
+ data: this.yData,
|
|
|
+ itemStyle: {
|
|
|
+ // 修改柱子圆角
|
|
|
+ barBorderRadius: [30, 30, 30, 30],
|
|
|
+ shadowColor: "rgba(84,112,198,1)",
|
|
|
+ shadowBlur: 4,
|
|
|
+ },
|
|
|
+ name: "去年灌溉", // legend属性
|
|
|
+ label: {
|
|
|
+ // 柱状图上方文本标签，默认展示数值信息
|
|
|
+ show: false,
|
|
|
+ position: "top"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar", //形状为柱状图
|
|
|
+ data: this.taskDate,
|
|
|
+ itemStyle: {
|
|
|
+ // 修改柱子圆角
|
|
|
+ barBorderRadius: [30, 30, 30, 30],
|
|
|
+ shadowColor: "rgba(145,204,117,1)",
|
|
|
+ shadowBlur: 4,
|
|
|
+ },
|
|
|
+ name: "今年灌溉", // legend属性
|
|
|
+ label: {
|
|
|
+ // 柱状图上方文本标签，默认展示数值信息
|
|
|
+ show: false,
|
|
|
+ position: "top"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /* getName() {
|
|
|
this.viewersName = document.getElementById("inputValue").value;
|
|
|
- },
|
|
|
+ }, */
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
-
|
|
|
+ this.initEcharts()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .mainview {
|
|
|
- top:10rem;
|
|
|
+/* .mainview {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- }
|
|
|
+ } */
|
|
|
+
|
|
|
.middleviewer {
|
|
|
-
|
|
|
width: 300rem;
|
|
|
height: 100%;
|
|
|
margin-left: 40rem;
|
|
|
}
|
|
|
|
|
|
- .middle::-webkit-scrollbar {
|
|
|
+/* ::-webkit-scrollbar {
|
|
|
width: 0rem;
|
|
|
height: 0rem;
|
|
|
- }
|
|
|
+ } */
|
|
|
</style>
|
Administrator