<!-- * @Author: your name * @Date: 2022-04-19 14:38:28 * @LastEditTime: 2022-05-05 11:16:06 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue --> <template> <div class="chars-box all-flex-h"> <div class="title">燃气供应量统计分析</div> <div class="btn-wrapper"> <div v-for="(item, index) in btnArr" :key="item" class="left" :class="{ active: btnV == index }" @click="btnClick(index)" > {{ item }} </div> </div> <div class="num-wrapper"> <div class="left"> <span class="text">{{ textData[0].text }}</span ><span class="num">{{ textData[0].num }}</span >{{ textData[0].unit }} </div> <div class="right"> <span class="text">{{ textData[1].text }}</span ><span class="num">{{ textData[1].num }}</span >{{ textData[1].unit }} </div> </div> <div class="chars"> <Chars :options="options" /> </div> </div> </template> <script> import Chars from "@/components/allCharsCom/Chars"; import {selectHiddenCount} from "@/api/standingBook/hidden" import {selectCount} from "@/api/standingBook/trouble" export default { name: "", components: { Chars, }, data() { return { btnArr: ["天然气", "液化石油气"], btnV: 0, options: null, textData: [ { text: "供应量", num: 260, unit: "km³" }, { text: "需求量", num: 212, unit: "km³" }, ], charData: [[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20], [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20]], charData1:[ [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20], [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20], ], charData2:[ [20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60], [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20], ], dayList:[] }; }, mounted() { //this.gethiddenCount(); this.bottomOptions(); }, methods: { gethiddenCount(){ this.textData = [ { text: "供应量", num: 260, unit: "km³" }, { text: "需求量", num: 212, unit: "km³" }, ]; selectHiddenCount().then(response => { console.log(response) var ynum =[]; var znum =[]; // for(var item of response.data){ // console.log(item.zcount) // znum.push(item.zcount) // this.textData[0].num+=item.zcount; // ynum.push(item.ycount) // this.textData[1].num+=item.ycount; // this.dayList.push(item.month.substr(5,7)) // } this.charData1.push(znum); this.charData1.push(ynum); this.charData = this.charData1; console.log(this.charData1) this.bottomOptions(); }); }, gettroubleCount(){ this.textData = [ { text: "供应量", num: 250, unit: "km³" }, { text: "需求量", num: 202, unit: "km³" }, ]; selectCount().then(response => { var ynum =[]; var znum =[]; // for(var item of response.data){ // znum.push(item.count) // this.textData[0].num+=item.count; // ynum.push(item.hurtNum) // this.textData[1].num+=item.hurtNum; // } this.charData2.push(znum); this.charData2.push(ynum); this.charData = this.charData2; this.bottomOptions(); }); }, btnClick(index) { if (this.btnV == index) return; this.btnV = index; if (index === 0) { this.gethiddenCount(); // this.charData = [ // [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20], // [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20], // ]; // this.charData = this.charData1; // const num1 = this.charData[0].reduce(function (prev, cur, index, arr) { // return prev + cur; // }, 0); // const num2 = this.charData[1].reduce(function (prev, cur, index, arr) { // return prev + cur; // }, 0); // // 更改按钮下的文字 // this.textData = [ // { text: "隐患总数", num: num1, unit: "件" }, // { text: "已整改", num: num2, unit: "件" }, // ]; } else { this.gettroubleCount(); // this.charData = [ // [20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60], // [2, 1, 3, 1, 2, 3, 1, 1, 1, 1, 1, 1], // ]; // this.charData = this.charData2; // const num1 = this.charData[0].reduce(function (prev, cur, index, arr) { // return prev + cur; // }, 0); // const num2 = this.charData[1].reduce(function (prev, cur, index, arr) { // return prev + cur; // }, 0); // // // 更改按钮下的文字 // this.textData = [ // { text: "事故数量", num: num1, unit: "件" }, // { text: "伤亡人数", num: num2, unit: "人" }, // ]; } this.bottomOptions(); }, bottomOptions() { const colors = ["#1890FF", "#FFC736"]; this.options = { color: colors, tooltip: { // show:false, // formatter: "{a}: {c}(件)", formatter: (parm) => { console.log(parm); return `${parm.seriesName}:${parm.value}(${ this.textData[parm.seriesIndex].unit })`; }, // trigger: "axis", // axisPointer: { // type: "cross", // }, }, grid: { top: "40", left: "3%", right: "10%", bottom: "3%", containLabel: true, }, toolbox: {}, legend: { // data: ['Evaporation', 'Temperature'], // left: 'right' show: false, }, xAxis: [ { type: "category", axisTick: { alignWithLabel: true, }, // prettier-ignore data: [1,2,3,4,5,6,7,8,9,10,11,12], axisLabel: { formatter: "{value}", color: "#333", // textStyle: { // }, }, }, ], yAxis: [ { type: "value", name: "单位 (件)", position: "left", nameTextStyle: { color: "#333", }, axisLine: { show: true, }, axisLabel: { formatter: "{value}", // textStyle: { color: "#333", // }, }, splitLine: { lineStyle: { type: "dashed", //虚线 }, show: true, //隐藏 }, min: 0, //max: Math.max.apply(null, this.charData[0]) + 10, }, ], series: [ { name: this.textData[0].text, type: "bar", data: this.charData[0], yAxisIndex: 0, itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colors[0] }, { offset: 1, color: "#ffffff" }, ]), }, barWidth: 6, barGap: "0%", }, { name: this.textData[1].text, type: "bar", data: this.charData[1], yAxisIndex: 0, itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colors[1] }, { offset: 1, color: "#ffffff" }, ]), }, barWidth: 6, barGap: "0%", }, ], }; }, }, }; </script> <style lang="scss" scoped> .chars-box { width: 100%; height: 100%; position: relative; .title { font-size: 16px; margin: 22px 0 11px 19px; font-weight: 600; } .btn-wrapper { display: flex; font-size: 12px; justify-content: flex-end; margin-right: 34px; margin-bottom: 12px; > div { border-radius: 3px 3px 3px 3px; border: 1px solid #c5c5c5; padding: 3px 6px; cursor: pointer; margin-left: 3px; &.active { background-color: #1a91ff; color: #fff; border: 1px solid #1a91ff; } &:hover { background: #1a91ffcc; color: #fff; border: 1px solid #3291ebcc; } } } .num-wrapper { position: absolute; display: flex; top: 100px; right: 50px; > div { font-size: 12px; margin-left: 19px; display: inline-block; position: relative; .text { margin-right: 10px; } .num { margin-right: 2px; } &.left { &::before { content: ""; position: absolute; width: 6px; height: 6px; background-color: #1a91ff; border-radius: 50%; left: -10px; top: 50%; margin-top: -3px; } &::after { } .num { color: #1a91ff; } } &.right { &::before { content: ""; position: absolute; width: 6px; height: 6px; background-color: #ffcb44; border-radius: 50%; left: -10px; top: 50%; margin-top: -3px; } .num { color: #ffcb44; } } } } .chars { flex: 1; // background-color: red; } } </style>