From c04569e75ef0c526f7f08169cc5724c83005d250 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 30 九月 2021 20:11:39 +0800
Subject: [PATCH] 地图组件及图表模块跳转方法添加
---
src/components/charts/histogramAlternating.vue | 686 +++++++++++++++++++++++++++++----------------------------
1 files changed, 349 insertions(+), 337 deletions(-)
diff --git a/src/components/charts/histogramAlternating.vue b/src/components/charts/histogramAlternating.vue
index f02eccf..1b25c18 100644
--- a/src/components/charts/histogramAlternating.vue
+++ b/src/components/charts/histogramAlternating.vue
@@ -1,354 +1,366 @@
<template>
- <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating">
- <div class="echarts-content" ref="alternating">
+ <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating" @click="toParentPage">
+ <div class="echarts-content" ref="alternating">
- </div>
- <div class="titleShow">
- <span><i></i><span class="textTitle">鍛婅鏈烘埧鎬绘暟:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
- <span><i></i><span class="textTitle">鍛婅鏈烘埧鏁版瘮渚�:</span><span class="textValue">{{ gjjfsbl }}</span></span>
- </div>
- </div>
+ </div>
+ <div class="titleShow">
+ <span><i></i><span class="textTitle">鍛婅鏈烘埧鎬绘暟:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
+ <span><i></i><span class="textTitle">鍛婅鏈烘埧鏁版瘮渚�:</span><span class="textValue">{{ gjjfsbl }}</span></span>
+ </div>
+ </div>
</template>
<script>
import * as echarts from 'echarts';
// 浜ゆ祦ABC 椤甸潰
export default {
- name: "histogramAlternating",
- chart: "",
- chartData:{},
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- name: {
- type: String,
- default: ""
- },
- top: {
- type: Number,
- default: 15,
- },
- bottom: {
- type: Number,
- default: 60
- },
- space: {
- type: Number,
- default: 4
- },
- },
- data() {
- return {
- gjjfzs:0,
- gjjfsbl:0,
- userId:""
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- setData(data) {
- let self = this;
- if(data){
- self.$options.chartData = data;
- self.gjjfzs = data.gjjfzs;
- self.gjjfsbl = data.gjjfsbl;
- self.optionSet(self.$options.chartData);
- }else{
- self.$axios({
- method:"get",
- url:"/powerAlarm/acABC",
- params:{
- userId:self.userId
- }
- }).then(res=>{
- if(res.data.code == 1){
- let result = res.data.data[0];
- let zsObj = res.data.data[1];
- let dataList = [];
- let dataName = [];
- for (const key in result) {
- dataName.push(key);
- dataList.push(result[key]);
- }
- self.$options.chartData.dataList = dataList;
- self.$options.chartData.dataName = dataName;
- self.$options.chartData.gjjfzs = zsObj.鍛婅鏈烘埧鎬绘暟;
- self.$options.chartData.gjjfsbl = zsObj.鍛婅鏈烘埧鏁版瘮渚� + "%";
- self.optionSet(self.$options.chartData);
- console.log(res)
- }
- })
- }
- },
- optionSet(data){
- const CubeLeft = echarts.graphic.extendShape({
- shape: {
- x: 0,
- y: 0
- },
- buildPath: function(ctx, shape) {
- const xAxisPoint = shape.xAxisPoint
- const c0 = [shape.x - 10, shape.y]
- const c1 = [shape.x + 10, shape.y]
- const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
- const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
- ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
- ctx.stroke();
- }
- })
- const CubeRight = echarts.graphic.extendShape({
- shape: {
- x: 0,
- y: 0
- },
- buildPath: function(ctx, shape) {
- const xAxisPoint = shape.xAxisPoint
- const c1 = [shape.x + 11, shape.y]
- const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
- const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
- const c4 = [shape.x + 8 + 8, shape.y - 10]
- ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
- ctx.stroke();
- }
- })
- const CubeTop = echarts.graphic.extendShape({
- shape: {
- x: 0,
- y: 0
- },
- buildPath: function(ctx, shape) {
- const c1 = [shape.x - 10, shape.y - 1]
- const c2 = [shape.x + 10, shape.y - 1]
- const c3 = [shape.x + 15, shape.y - 9]
- const c4 = [shape.x - 5, shape.y - 9]
- ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
- ctx.stroke();
- }
- })
- echarts.graphic.registerShape('CubeLeft', CubeLeft)
- echarts.graphic.registerShape('CubeRight', CubeRight)
- echarts.graphic.registerShape('CubeTop', CubeTop)
+ name: "histogramAlternating",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ name: {
+ type: String,
+ default: ""
+ },
+ top: {
+ type: Number,
+ default: 15,
+ },
+ bottom: {
+ type: Number,
+ default: 60
+ },
+ space: {
+ type: Number,
+ default: 4
+ },
+ },
+ data() {
+ return {
+ gjjfzs: 0,
+ gjjfsbl: 0,
+ userId: ""
+ }
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫簮瀹炴椂鍛婅",
+ name: "powerRealtimeInfo",
+ src: "#/powerRealtimeInfo",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ setData(data) {
+ let self = this;
+ if (data) {
+ self.$options.chartData = data;
+ self.gjjfzs = data.gjjfzs;
+ self.gjjfsbl = data.gjjfsbl;
+ self.optionSet(self.$options.chartData);
+ } else {
+ self.$axios({
+ method: "get",
+ url: "/powerAlarm/acABC",
+ params: {
+ userId: self.userId
+ }
+ }).then(res => {
+ if (res.data.code == 1) {
+ let result = res.data.data[0];
+ let zsObj = res.data.data[1];
+ let dataList = [];
+ let dataName = [];
+ for (const key in result) {
+ dataName.push(key);
+ dataList.push(result[key]);
+ }
+ self.$options.chartData.dataList = dataList;
+ self.$options.chartData.dataName = dataName;
+ self.$options.chartData.gjjfzs = zsObj.鍛婅鏈烘埧鎬绘暟;
+ self.$options.chartData.gjjfsbl = zsObj.鍛婅鏈烘埧鏁版瘮渚� + "%";
+ self.optionSet(self.$options.chartData);
+ console.log(res)
+ }
+ })
+ }
+ },
+ optionSet(data) {
+ const CubeLeft = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint
+ const c0 = [shape.x - 10, shape.y]
+ const c1 = [shape.x + 10, shape.y]
+ const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
+ const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
+ ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
+ ctx.stroke();
+ }
+ })
+ const CubeRight = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint
+ const c1 = [shape.x + 11, shape.y]
+ const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
+ const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
+ const c4 = [shape.x + 8 + 8, shape.y - 10]
+ ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+ ctx.stroke();
+ }
+ })
+ const CubeTop = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0
+ },
+ buildPath: function (ctx, shape) {
+ const c1 = [shape.x - 10, shape.y - 1]
+ const c2 = [shape.x + 10, shape.y - 1]
+ const c3 = [shape.x + 15, shape.y - 9]
+ const c4 = [shape.x - 5, shape.y - 9]
+ ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+ ctx.stroke();
+ }
+ })
+ echarts.graphic.registerShape('CubeLeft', CubeLeft)
+ echarts.graphic.registerShape('CubeRight', CubeRight)
+ echarts.graphic.registerShape('CubeTop', CubeTop)
- let option = {
- // backgroundColor: "rgba(72, 84, 96,1.0)",
- xAxis: {
- type: 'category',
- data: data.dataName,
- show: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff'
- }
- },
- offset: 0,
- axisTick: {
- show: false,
- },
- axisLabel: {
- fontSize: 12
- }
- },
- yAxis: {
- type: 'value',
- show: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: 'white'
- }
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- fontSize: 12
- },
- },
- series: [{
- type: 'custom',
- renderItem: (params, api) => {
- console.log(14777, api.style().aaa)
- const location = api.coord([api.value(0), api.value(1)])
- return {
- type: 'group',
- children: [{
- type: 'CubeLeft',
- shape: {
- api,
- xValue: api.value(0),
- yValue: api.value(1),
- x: location[0],
- y: location[1],
- xAxisPoint: api.coord([api.value(0), 0])
- },
- style: {
- fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: "#0077EA"//api.style().fill
- },
- {
- offset: 1,
- color: "#451DD3"//'rgba(210, 218, 226,1.0)'
- }
- ])
- }
- },
- {
- type: 'CubeRight',
- shape: {
- api,
- xValue: api.value(0),
- yValue: api.value(1),
- x: location[0],
- y: location[1],
- xAxisPoint: api.coord([api.value(0), 0])
- },
- style: {
- fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
- offset: 0,
- color: "#2663DA"//api.style().fill
- },
- {
- offset: 1,
- color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
- }
- ])
- }
- },
- {
- type: 'CubeTop',
- shape: {
- api,
- xValue: api.value(0),
- yValue: api.value(1),
- x: location[0],
- y: location[1],
- xAxisPoint: api.coord([api.value(0), 0])
- },
- style: {
- fill: "#00b6ee",
- }
- }
- ]
- }
- },
- data: data.dataList
- },
- {
- type: 'bar',
- name: '浜ゆ祦ABC',
- tooltip: {
- show: true,
- position: 'top'
- },
- barWidth: 24.5,
- markPoint: {
- itemStyle:{
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
- offset: 0,
- color: "#0077EA" // 0% 澶勭殑棰滆壊
- }, {
- offset: 1,
- color: "#451DD3" // 100% 澶勭殑棰滆壊
- }], false),
- borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
- offset: 0,
- color: "rgba(190,215,253,0.4)", // 0% 澶勭殑棰滆壊 BED7FD
- }, {
- offset: 1,
- color: "rgba(90,100,248,0.4)", // 100% 澶勭殑棰滆壊 5A64F8
- }], false),
- },
- data:function(){
- let thisArr = data.dataList.map((item,index)=>{
- let opt = {
- value:item,
- xAxis:index,
- yAxis:item// !=0?item + 2 : item//妞渾鐨勫潗鏍�
- }
- return opt;
- })
- return thisArr;
- }()
- },
- barGap: 0,
- itemStyle: {
- color: 'transparent'
- },
- data: data.dataList
- }
+ let option = {
+ // backgroundColor: "rgba(72, 84, 96,1.0)",
+ xAxis: {
+ type: 'category',
+ data: data.dataName,
+ show: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ offset: 0,
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ fontSize: 12
+ }
+ },
+ yAxis: {
+ type: 'value',
+ show: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: 'white'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ fontSize: 12
+ },
+ },
+ series: [{
+ type: 'custom',
+ renderItem: (params, api) => {
+ console.log(14777, api.style().aaa)
+ const location = api.coord([api.value(0), api.value(1)])
+ return {
+ type: 'group',
+ children: [{
+ type: 'CubeLeft',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: "#0077EA"//api.style().fill
+ },
+ {
+ offset: 1,
+ color: "#451DD3"//'rgba(210, 218, 226,1.0)'
+ }
+ ])
+ }
+ },
+ {
+ type: 'CubeRight',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: "#2663DA"//api.style().fill
+ },
+ {
+ offset: 1,
+ color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
+ }
+ ])
+ }
+ },
+ {
+ type: 'CubeTop',
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0])
+ },
+ style: {
+ fill: "#00b6ee",
+ }
+ }
+ ]
+ }
+ },
+ data: data.dataList
+ },
+ {
+ type: 'bar',
+ name: '浜ゆ祦ABC',
+ tooltip: {
+ show: true,
+ position: 'top'
+ },
+ barWidth: 24.5,
+ markPoint: {
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: "#0077EA" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "#451DD3" // 100% 澶勭殑棰滆壊
+ }], false),
+ borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: "rgba(190,215,253,0.4)", // 0% 澶勭殑棰滆壊 BED7FD
+ }, {
+ offset: 1,
+ color: "rgba(90,100,248,0.4)", // 100% 澶勭殑棰滆壊 5A64F8
+ }], false),
+ },
+ data: function () {
+ let thisArr = data.dataList.map((item, index) => {
+ let opt = {
+ value: item,
+ xAxis: index,
+ yAxis: item// !=0?item + 2 : item//妞渾鐨勫潗鏍�
+ }
+ return opt;
+ })
+ return thisArr;
+ }()
+ },
+ barGap: 0,
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: data.dataList
+ }
- ]
- }
- this.setOption(option);
- },
- resize() {
- let self = this;
- setTimeout(() => {
- this.$options.chart.resize();
- this.setData(self.$options.chartData);
- }, 300)
- }
- },
- mounted() {
- // 鑾峰彇userId
- this.userId = localStorage.getItem("userId");
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.alternating);
+ ]
+ }
+ this.setOption(option);
+ },
+ resize() {
+ let self = this;
+ setTimeout(() => {
+ this.$options.chart.resize();
+ this.setData(self.$options.chartData);
+ }, 300)
+ }
+ },
+ mounted() {
+ // 鑾峰彇userId
+ this.userId = localStorage.getItem("userId");
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.alternating);
- window.addEventListener('resize', this.resize);
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
- }
+ window.addEventListener('resize', this.resize);
+ },
+ destroyed() {
+ window.removeEventListener('resize', this.resize);
+ }
}
</script>
<style scoped>
- .echartsAlternating{
- position:relative;
- }
- .titleShow{
- position: absolute;
- top: 0;
- right: 0;
- text-align: right;
- padding-right: 5%;
- overflow: hidden;
-
- }
- .titleShow i{
- display: inline-block;
- width: 5px;
- height: 5px;
- border-radius: 50%;
- background: rgb(246,127,33);
- margin-right: 5px;
- margin-bottom: 3px;
- }
- .titleShow .textTitle{
- display: inline-block;
- /* width: 9rem; */
- text-align: right;
- font-size: 12px;
- color: rgb(0,178,224);
- }
- .titleShow .textValue{
- display: inline-block;
- width: 40px;
- /* text-align: left; */
- text-align: left;
- font-size: 12px;
- color: rgb(246,127,33);
- }
+.echartsAlternating {
+ position: relative;
+}
+.titleShow {
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-align: right;
+ padding-right: 5%;
+ overflow: hidden;
+}
+.titleShow i {
+ display: inline-block;
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: rgb(246, 127, 33);
+ margin-right: 5px;
+ margin-bottom: 3px;
+}
+.titleShow .textTitle {
+ display: inline-block;
+ /* width: 9rem; */
+ text-align: right;
+ font-size: 12px;
+ color: rgb(0, 178, 224);
+}
+.titleShow .textValue {
+ display: inline-block;
+ width: 40px;
+ /* text-align: left; */
+ text-align: left;
+ font-size: 12px;
+ color: rgb(246, 127, 33);
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1