mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-04-20 02:55:04 +08:00
首页数据导出Excel
This commit is contained in:
BOOL\25024
@@ -57,7 +57,8 @@
|
||||
"vue-qr": "^4.0.9",
|
||||
"vue-router": "3.4.9",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0"
|
||||
"vuex": "3.6.0",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.6",
|
||||
|
||||
@@ -1,35 +1,70 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
export function barDataView(titleName, fileName) {
|
||||
var dataView = {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
lang: ['数据视图', '关闭', '刷新'],
|
||||
optionToContent: function(opt) {
|
||||
var axisData = opt.xAxis[0].data // 坐标数据
|
||||
var series = opt.series // 折线图数据
|
||||
var tdHeads = ''
|
||||
lang: ['数据视图', '关闭', '导出Excel'],
|
||||
optionToContent: function (opt) {
|
||||
var axisData = opt.xAxis[0].data; // 坐标数据
|
||||
var series = opt.series; // 折线图数据
|
||||
var tdHeads = '';
|
||||
for (let index = 0; index < titleName.length; index++) {
|
||||
// 样式
|
||||
tdHeads += '<td style="height:30px;text-align: center;">' + titleName[index] + '</td>'
|
||||
tdHeads += '<td style="height:30px;text-align: center;">' + titleName[index] + '</td>';
|
||||
}
|
||||
var tdBodys = '' // 表数据
|
||||
var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
|
||||
// 组装表数据
|
||||
var tdBodys = ''; // 表数据
|
||||
var tableId = 'tableExcel_' + new Date().getTime(); // 动态表格ID
|
||||
var table = `<table id="${tableId}" border="1" class="table-bordered table-striped" style="width:100%;text-align:center;border:1px solid #ccc;border-collapse:collapse;"><tbody><tr>${tdHeads}</tr>`;
|
||||
|
||||
for (var i = 0, l = axisData.length; i < l; i++) {
|
||||
tdBodys = '<td style="height:30px;text-align: center;">' + axisData[i] + '</td>'; // 添加坐标轴数据
|
||||
for (var j = 0; j < series.length; j++) {
|
||||
var temp = series[j].data[i]
|
||||
var temp = series[j].data[i];
|
||||
if (temp != null && temp !== undefined) {
|
||||
tdBodys += '<td>' + temp + '</td>'
|
||||
tdBodys += '<td>' + temp + '</td>';
|
||||
} else {
|
||||
tdBodys += '<td></td>'
|
||||
tdBodys += '<td></td>';
|
||||
}
|
||||
}
|
||||
// 样式
|
||||
table += '<tr style="height:30px;text-align: center;"><td >' + axisData[i] + '</td>' + tdBodys + '</tr>'
|
||||
tdBodys = ''
|
||||
table += '<tr>' + tdBodys + '</tr>';
|
||||
}
|
||||
table += '</tbody></table>'
|
||||
return table
|
||||
}
|
||||
}
|
||||
return dataView
|
||||
table += '</tbody></table>';
|
||||
return table;
|
||||
},
|
||||
contentToOption: function (html, opt) {
|
||||
console.log('HTMLDomElement:', html); // 调试信息
|
||||
if (!html || !html.tagName) {
|
||||
console.error('Invalid HTML element passed to contentToOption');
|
||||
return opt;
|
||||
}
|
||||
|
||||
// 获取表格元素
|
||||
let tableElement = html.querySelector('table');
|
||||
|
||||
if (!tableElement) {
|
||||
console.error('Table element not found within the provided HTML element');
|
||||
return opt;
|
||||
}
|
||||
|
||||
let et = XLSX.utils.table_to_book(tableElement);
|
||||
let etout = XLSX.write(et, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array",
|
||||
});
|
||||
|
||||
try {
|
||||
saveAs(
|
||||
new Blob([etout], { type: "application/octet-stream" }),
|
||||
`${fileName}-${new Date().toLocaleString().replace(/[:\/]/g, '-')}.xlsx`
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("Export failed:", e);
|
||||
}
|
||||
|
||||
return opt; // 返回原始选项，因为这里没有修改图表的配置
|
||||
},
|
||||
};
|
||||
return dataView;
|
||||
}
|
||||
@@ -1,61 +1,65 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1>概况 (自2023-01-01起)</h1>
|
||||
<hr />
|
||||
<div style="display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: wrap;">
|
||||
<div class="box" style="background-color: #ffba00;">
|
||||
<el-image class="box-image" :src="require('@/assets/images/lightning.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingDegree }}</div>
|
||||
<div>总充电电量(度)</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="box" style="background-color: #c74542;">
|
||||
<el-image class="box-image" :src="require('@/assets/images/zongfeiyong.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
|
||||
<div>总充电费用(元)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" style="background-color: #12ce65;">
|
||||
<el-image class="box-image" :src="require('@/assets/images/dingdan.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
|
||||
<div>总充电订单数(笔)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" style="background-color: #909399;">
|
||||
<el-image class="box-image" :src="require('@/assets/images/shebei.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
|
||||
<div>总充电设备数量(座)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">-->
|
||||
<!-- <el-image-->
|
||||
<!-- class="box-image"-->
|
||||
<!-- :src="require('@/assets/images/yue.png')"-->
|
||||
<!-- ></el-image>-->
|
||||
<!-- <div class="flex1">-->
|
||||
<!-- <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
|
||||
<!-- <div>总客户余额(元)</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="app-container">
|
||||
<h1>概况 (自2023-01-01起)</h1>
|
||||
<hr />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<div class="box" style="background-color: #ffba00">
|
||||
<el-image class="box-image" :src="require('@/assets/images/lightning.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingDegree }}</div>
|
||||
<div>总充电电量(度)</div>
|
||||
</div>
|
||||
<h1>订单</h1>
|
||||
<hr />
|
||||
<el-button style="background-color: #1ab394; color: #ffffff">最近30天
|
||||
</el-button>
|
||||
<div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
|
||||
<hr />
|
||||
<!-- <h1>启动充电渠道</h1> -->
|
||||
<!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
|
||||
<!-- <hr /> -->
|
||||
<!-- <hr /> -->
|
||||
<!-- <h1>设备</h1> -->
|
||||
</div>
|
||||
<div class="box" style="background-color: #c74542">
|
||||
<el-image class="box-image" :src="require('@/assets/images/zongfeiyong.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
|
||||
<div>总充电费用(元)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" style="background-color: #12ce65">
|
||||
<el-image class="box-image" :src="require('@/assets/images/dingdan.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
|
||||
<div>总充电订单数(笔)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" style="background-color: #909399">
|
||||
<el-image class="box-image" :src="require('@/assets/images/shebei.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
|
||||
<div>总充电设备数量(座)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">-->
|
||||
<!-- <el-image-->
|
||||
<!-- class="box-image"-->
|
||||
<!-- :src="require('@/assets/images/yue.png')"-->
|
||||
<!-- ></el-image>-->
|
||||
<!-- <div class="flex1">-->
|
||||
<!-- <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
|
||||
<!-- <div>总客户余额(元)</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<h1>订单</h1>
|
||||
<hr />
|
||||
<el-button style="background-color: #1ab394; color: #ffffff">最近30天 </el-button>
|
||||
<div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
|
||||
<hr />
|
||||
<!-- <h1>启动充电渠道</h1> -->
|
||||
<!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
|
||||
<!-- <hr /> -->
|
||||
<!-- <hr /> -->
|
||||
<!-- <h1>设备</h1> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Echarts from "echarts";
|
||||
@@ -63,275 +67,287 @@ import { barDataView } from "./echarts";
|
||||
import { getGeneralSituation, getOrderInfo } from "@/api/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
generalSituation: {},
|
||||
orderInfo: [],
|
||||
tableData: [{
|
||||
pileSn: '9527',
|
||||
stationName: '万车充充电桩',
|
||||
stationAddress: '昆山市黄埔江南路',
|
||||
type: '直流',
|
||||
power: '2131',
|
||||
degree: '215',
|
||||
electricityPrice: '565',
|
||||
servicePrice: '9274',
|
||||
chargingNumber: '624',
|
||||
|
||||
}]
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
generalSituation: {},
|
||||
orderInfo: [],
|
||||
tableData: [
|
||||
{
|
||||
pileSn: "9527",
|
||||
stationName: "万车充充电桩",
|
||||
stationAddress: "昆山市黄埔江南路",
|
||||
type: "直流",
|
||||
power: "2131",
|
||||
degree: "215",
|
||||
electricityPrice: "565",
|
||||
servicePrice: "9274",
|
||||
chargingNumber: "624",
|
||||
},
|
||||
],
|
||||
};
|
||||
}, //图表实例
|
||||
created() {
|
||||
this.getGeneral();
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
// this.rose();
|
||||
},
|
||||
methods: {
|
||||
async getGeneral() {
|
||||
const { obj } = await getGeneralSituation({});
|
||||
console.log("首页信息", obj);
|
||||
this.generalSituation = obj;
|
||||
},
|
||||
async getOrder() {
|
||||
const { obj, resCode } = await getOrderInfo({});
|
||||
console.log("订单信息", obj, resCode);
|
||||
if (resCode === "00100000") {
|
||||
this.orderInfo = obj;
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
await this.getOrder();
|
||||
this.$nextTick(() => {
|
||||
this.chart = Echarts.init(this.$refs.chart);
|
||||
console.log("柱状图", this.orderInfo);
|
||||
let str = this.orderInfo.map((item) => {
|
||||
return item.date;
|
||||
});
|
||||
console.log(str);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ["line", "bar"] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
"总订单金额",
|
||||
"尖时段总用电量",
|
||||
"峰时段总用电量",
|
||||
"平时段总用电量",
|
||||
"谷时段总用电量",
|
||||
],
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: str,
|
||||
axisLine: { onZero: false },
|
||||
},
|
||||
],
|
||||
animation: true,
|
||||
animationDuration: 2000,
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "电费",
|
||||
position: "left",
|
||||
alignTicks: true,
|
||||
axisLabel: {
|
||||
formatter: "{value} ￥",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "电量",
|
||||
position: "right",
|
||||
alignTicks: true,
|
||||
axisLabel: {
|
||||
formatter: "{value} kwh",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总用电量",
|
||||
type: "line",
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalElectricity;
|
||||
}),
|
||||
symbolSize: 1,
|
||||
symbol: "circle",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(252,120,48,0)",
|
||||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "总订单金额",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalOrderAmount;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "尖时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalSharpUsedElectricity;
|
||||
}),
|
||||
barWidth: "35%", //柱子宽度
|
||||
// barGap: 1, //柱子之间间距
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ff4949",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "峰时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalPeakUsedElectricity;
|
||||
}),
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ffba00",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "平时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalFlatUsedElectricity;
|
||||
}),
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#12ce65",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "谷时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalValleyUsedElectricity;
|
||||
}),
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#909399",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}, //图表实例
|
||||
created() {
|
||||
this.getGeneral();
|
||||
option.toolbox.feature.dataView = barDataView(
|
||||
[
|
||||
"时间/日期",
|
||||
"总用电量",
|
||||
"总订单金额",
|
||||
"尖时段总用电量",
|
||||
"峰时段总用电量",
|
||||
"平时段总用电量",
|
||||
"谷时段总用电量",
|
||||
],
|
||||
"电量电费"
|
||||
);
|
||||
this.chart.setOption(option);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
// this.rose();
|
||||
},
|
||||
methods: {
|
||||
async getGeneral() {
|
||||
const { obj } = await getGeneralSituation({});
|
||||
console.log("首页信息", obj);
|
||||
this.generalSituation = obj;
|
||||
},
|
||||
async getOrder() {
|
||||
const { obj, resCode } = await getOrderInfo({});
|
||||
console.log("订单信息", obj, resCode);
|
||||
if (resCode === '00100000') {
|
||||
this.orderInfo = obj;
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
await this.getOrder();
|
||||
this.$nextTick(() => {
|
||||
this.chart = Echarts.init(this.$refs.chart);
|
||||
console.log("柱状图", this.orderInfo);
|
||||
let str = this.orderInfo.map((item) => {
|
||||
return item.date;
|
||||
});
|
||||
console.log(str);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ["line", "bar"] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
"总订单金额",
|
||||
"尖时段总用电量",
|
||||
"峰时段总用电量",
|
||||
"平时段总用电量",
|
||||
"谷时段总用电量",
|
||||
],
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: str,
|
||||
axisLine: { onZero: false },
|
||||
},
|
||||
],
|
||||
animation: true,
|
||||
animationDuration: 2000,
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "电费",
|
||||
position: "left",
|
||||
alignTicks: true,
|
||||
axisLabel: {
|
||||
formatter: "{value} ￥",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "电量",
|
||||
position: "right",
|
||||
alignTicks: true,
|
||||
axisLabel: {
|
||||
formatter: "{value} kwh",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总用电量",
|
||||
type: "line",
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalElectricity;
|
||||
}),
|
||||
symbolSize: 1,
|
||||
symbol: "circle",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(252,120,48,0)",
|
||||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "总订单金额",
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalOrderAmount;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "尖时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalSharpUsedElectricity;
|
||||
}),
|
||||
barWidth: "35%", //柱子宽度
|
||||
// barGap: 1, //柱子之间间距
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ff4949",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "峰时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalPeakUsedElectricity;
|
||||
}),
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ffba00",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "平时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalFlatUsedElectricity;
|
||||
}),
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#12ce65",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "谷时段总用电量",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
stack: "one",
|
||||
data: this.orderInfo.map((item) => {
|
||||
return item.totalValleyUsedElectricity;
|
||||
}),
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
blurScope: "coordinateSystem",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#909399",
|
||||
opacity: 1,
|
||||
barBorderRadius: 1, //柱子菱角
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
option.toolbox.feature.dataView = barDataView(['时间/日期', '总用电量', '总订单金额', '尖时段总用电量', '峰时段总用电量', '平时段总用电量', '谷时段总用电量'], '电量电费')
|
||||
this.chart.setOption(option);
|
||||
});
|
||||
},
|
||||
rose() {
|
||||
this.$nextTick(() => {
|
||||
this.chartDom = Echarts.init(this.$refs.chartDom);
|
||||
let option = {
|
||||
legend: {
|
||||
top: "bottom",
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Nightingale Chart",
|
||||
type: "pie",
|
||||
radius: [50, 250],
|
||||
center: ["50%", "50%"],
|
||||
roseType: "area",
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: "rose 1" },
|
||||
{ value: 38, name: "rose 2" },
|
||||
{ value: 32, name: "rose 3" },
|
||||
{ value: 30, name: "rose 4" },
|
||||
{ value: 28, name: "rose 5" },
|
||||
{ value: 26, name: "rose 6" },
|
||||
{ value: 22, name: "rose 7" },
|
||||
{ value: 18, name: "rose 8" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.chartDom.setOption(option);
|
||||
});
|
||||
},
|
||||
rose() {
|
||||
this.$nextTick(() => {
|
||||
this.chartDom = Echarts.init(this.$refs.chartDom);
|
||||
let option = {
|
||||
legend: {
|
||||
top: "bottom",
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Nightingale Chart",
|
||||
type: "pie",
|
||||
radius: [50, 250],
|
||||
center: ["50%", "50%"],
|
||||
roseType: "area",
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: "rose 1" },
|
||||
{ value: 38, name: "rose 2" },
|
||||
{ value: 32, name: "rose 3" },
|
||||
{ value: 30, name: "rose 4" },
|
||||
{ value: 28, name: "rose 5" },
|
||||
{ value: 26, name: "rose 6" },
|
||||
{ value: 22, name: "rose 7" },
|
||||
{ value: 18, name: "rose 8" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.chartDom.setOption(option);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -340,43 +356,43 @@ export default {
|
||||
// overflow: scroll;
|
||||
// }
|
||||
.box {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
display: flex;
|
||||
height: 6.25rem;
|
||||
padding: 0.8rem;
|
||||
/* font-size: 18px; */
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 15px 0.8rem -11px black;
|
||||
margin-right: 24px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
display: flex;
|
||||
height: 6.25rem;
|
||||
padding: 0.8rem;
|
||||
/* font-size: 18px; */
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 15px 0.8rem -11px black;
|
||||
margin-right: 24px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
.box-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
// background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// filter: drop-shadow(40px 0px gray);
|
||||
}
|
||||
.box-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
// background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// filter: drop-shadow(40px 0px gray);
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
margin-left: 48px;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
margin-left: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-h1 {
|
||||
/* margin-top: -14px; */
|
||||
font-size: 2rem;
|
||||
/* margin-top: -14px; */
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
margin-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user