feat: update dashboard mock metrics and charts
This commit is contained in:
kkfluous
@@ -0,0 +1,37 @@
|
||||
// 2026 年大屏展示 Mock：仅用于覆盖接口返回值，接口请求仍会正常发出。
|
||||
// 数据来源：100 台车辆清单 + 1–8 月车辆里程日报 + 车辆氢费明细（截至 2026-08-12）。
|
||||
// 4–7 月原始日报大量车辆里程为 0，展示层按每 kg 氢气 10 km 的统一比例生成里程 Mock；加氢量沿用 Excel，确保两条曲线同向波动。
|
||||
// 8 月原始里程日报同样缺失，按 1–3 月日均里程补齐截至 8 月 13 日凌晨的 13.5 天数据；用氢量保留 Excel 实际值。
|
||||
// 全部车辆均为 49 吨牵引车头；减碳量按后端实际口径，按月份、车型、车牌首字地区分组计算并将负值归零：
|
||||
// max(0, 行驶里程(km) - 加氢量(kg) × 3.0927)。月度/年度再汇总分组结果。
|
||||
export const DASHBOARD_EXCEL_MOCK = Object.freeze({
|
||||
vehicleTotal: 100,
|
||||
onlineTotal: 62,
|
||||
sourceDate: '2026-08-12',
|
||||
// 日维度取 1–3 月日均里程/用氢量的 70%，再按嘉兴减碳公式计算。
|
||||
day: Object.freeze({
|
||||
mileage: 8991.52,
|
||||
hydrogen: 896.08,
|
||||
carbon: 6220.21
|
||||
}),
|
||||
months: Object.freeze([
|
||||
{ months: '2026-01', monthMileage: 432395.16, monthHydrogen: 43682.45, monthCarbon: 297298.45 },
|
||||
{ months: '2026-02', monthMileage: 322776.94, monthHydrogen: 32454.9, monthCarbon: 222403.67 },
|
||||
{ months: '2026-03', monthMileage: 400880.17, monthHydrogen: 39073.5, monthCarbon: 280037.56 },
|
||||
{ months: '2026-04', monthMileage: 367596.8, monthHydrogen: 36759.68, monthCarbon: 253910.14 },
|
||||
{ months: '2026-05', monthMileage: 372421.1, monthHydrogen: 37242.11, monthCarbon: 257242.43 },
|
||||
{ months: '2026-06', monthMileage: 367411.5, monthHydrogen: 36741.15, monthCarbon: 253782.15 },
|
||||
{ months: '2026-07', monthMileage: 396281.2, monthHydrogen: 39628.12, monthCarbon: 273723.31 },
|
||||
{ months: '2026-08', monthMileage: 173407.84, monthHydrogen: 9703.95, monthCarbon: 143396.43 },
|
||||
{ months: '2026-09', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
|
||||
{ months: '2026-10', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
|
||||
{ months: '2026-11', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
|
||||
{ months: '2026-12', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 }
|
||||
]),
|
||||
year: Object.freeze({
|
||||
mileage: 2833170.71,
|
||||
hydrogen: 275285.86,
|
||||
carbon: 1976162.23,
|
||||
carbonTon: 1976.16
|
||||
})
|
||||
})
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,8 +18,7 @@ export default {
|
||||
// { name: '其它：10%', value: 260 }
|
||||
]
|
||||
],
|
||||
colors: ["#00E5FF", "#FF5733"]
|
||||
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
|
||||
colors: ["#00d8ff", "#168cff", "#496dff", "#7658e8", "#18c6b3"]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -34,7 +31,8 @@ export default {
|
||||
// 转换数据结构为饼图需要的格式
|
||||
this.chartData = [res.data.map(item => ({
|
||||
name: item.modelName,
|
||||
value: item.total
|
||||
// 大屏演示口径：49吨牵引车头使用固定 Mock 数量。
|
||||
value: item.modelName === '49吨牵引车头' ? 100 : item.total
|
||||
}))];
|
||||
console.log('车型分布')
|
||||
console.log(this.chartData)
|
||||
@@ -51,7 +49,50 @@ export default {
|
||||
|
||||
initChart() {
|
||||
const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
|
||||
const equipmentData = this.chartData[0] || [];
|
||||
const equipmentTotal = equipmentData.reduce((sum, item) => sum + Number(item.value || 0), 0);
|
||||
const equipmentByName = equipmentData.reduce((result, item) => {
|
||||
result[item.name] = item;
|
||||
return result;
|
||||
}, {});
|
||||
let option = {
|
||||
color: this.colors,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '4%',
|
||||
top: 'center',
|
||||
selectedMode: false,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 14,
|
||||
data: equipmentData.map(item => item.name),
|
||||
formatter: function (name) {
|
||||
const item = equipmentByName[name];
|
||||
const value = Number(item && item.value || 0);
|
||||
const percent = equipmentTotal ? ((value / equipmentTotal) * 100).toFixed(2) : '0.00';
|
||||
return `{name|${name}}\n{value|${value}辆} {percent|${percent}%}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#eaf8ff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 18
|
||||
},
|
||||
value: {
|
||||
color: '#4edfff',
|
||||
fontSize: 12,
|
||||
lineHeight: 16
|
||||
},
|
||||
percent: {
|
||||
color: '#8baeff',
|
||||
fontSize: 12,
|
||||
lineHeight: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
@@ -61,59 +102,17 @@ export default {
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: this.chartData.map(function (data, idx) {
|
||||
var top = idx * 33.3;
|
||||
series: this.chartData.map(function (data) {
|
||||
return {
|
||||
type: 'pie',
|
||||
radius: [50, 90],
|
||||
top: top + '%',
|
||||
height: '33.33%',
|
||||
left: 'center',
|
||||
width: '600px',
|
||||
radius: ['42%', '66%'],
|
||||
center: ['74%', '52%'],
|
||||
itemStyle: {
|
||||
borderColor: 'orange',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: ({ name, value, percent }) =>
|
||||
`{name|${name}}\n{value|${value}辆} {percent|${percent}%}`,
|
||||
minMargin: 5,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
name: { // 新增 name 样式
|
||||
fontSize: 14,
|
||||
color: 'yellow', // 使用亮白色
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
value: {
|
||||
fontSize: 12,
|
||||
color: 'orange',
|
||||
padding: [0, 5, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
fontSize: 12,
|
||||
color: '#FF5733' // 保留原有橙色
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 40,
|
||||
length2: 15,
|
||||
maxSurfaceAngle: 80
|
||||
},
|
||||
labelLayout: function (params) {
|
||||
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
||||
const points = params.labelLinePoints;
|
||||
// Update the end point.
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
return {
|
||||
labelLinePoints: points
|
||||
};
|
||||
borderColor: '#061d4a',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: data
|
||||
};
|
||||
})
|
||||
@@ -133,6 +132,6 @@ export default {
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 850px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
<script>
|
||||
import xzqCode from "../../utils/map/xzqCode";
|
||||
import { currentGET } from "api/modules";
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
|
||||
import * as echarts from "echarts";
|
||||
import { GETNOBASE } from "api";
|
||||
export default {
|
||||
@@ -94,14 +95,12 @@ export default {
|
||||
return 'district'; // 区县级（如 440305）
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳排量');
|
||||
console.log(res);
|
||||
//单位kg
|
||||
// this.maptitle = res.data.yearCarbon;
|
||||
//单位吨
|
||||
this.maptitle = res.data.yearCarbonTon;
|
||||
});
|
||||
// 保留年度接口调用，地图标题使用同一套 Excel Mock 年度减碳量。
|
||||
this.applyYearMock();
|
||||
currentGET("big3").catch(() => {});
|
||||
},
|
||||
applyYearMock() {
|
||||
this.maptitle = DASHBOARD_EXCEL_MOCK.year.carbonTon;
|
||||
},
|
||||
getData(code) {
|
||||
console.log("code", code);
|
||||
|
||||
@@ -1,217 +1,200 @@
|
||||
<template>
|
||||
<div class="chart-block">
|
||||
<!-- 左侧 柱状+折线图 -->
|
||||
<div class="chart-container">
|
||||
<v-chart class="bar-line-chart" :options="barLineOption" style="width: 390px;height: 250px;"/>
|
||||
<div ref="chart" class="line-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 两个环形图 -->
|
||||
<div class="chart-container-right">
|
||||
<v-chart class="pie-chart" :options="pieOptionOne" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<v-chart class="pie-chart" :options="pieOptionTwo" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<div class="metric-card metric-card--carbon">
|
||||
<div class="metric-title"><i></i>累计碳减排</div>
|
||||
<div class="metric-value">{{ formatCarbonTotal(cumulativeCarbon) }}<span>吨</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
<div class="metric-card metric-card--mileage">
|
||||
<div class="metric-title"><i></i>累计里程</div>
|
||||
<div class="metric-value">{{ formatMileageTotal(cumulativeMileage) }}<span>万km</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VChart from 'vue-echarts'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts/lib/chart/bar'
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/chart/pie'
|
||||
import 'echarts/lib/component/legend'
|
||||
import 'echarts/lib/component/tooltip'
|
||||
import { currentGET } from 'api/modules'
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock'
|
||||
|
||||
export default {
|
||||
name: 'ChartBlock',
|
||||
components: { VChart },
|
||||
data() {
|
||||
return {
|
||||
/* 柱状图 + 折线图 */
|
||||
barLineOption: {
|
||||
backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
|
||||
tooltip: { trigger: 'axis' ,
|
||||
chart: null,
|
||||
cumulativeCarbon: 0,
|
||||
cumulativeMileage: 0,
|
||||
monthCarbon: [],
|
||||
monthMileage: [],
|
||||
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData()
|
||||
this.getYearData()
|
||||
window.addEventListener('resize', this.resizeChart)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart)
|
||||
if (this.chart) this.chart.dispose()
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
// 接口继续请求，用于保留原有链路；渲染数据由 Excel Mock 覆盖。
|
||||
this.applyMonthMock()
|
||||
currentGET('big2').catch(() => {})
|
||||
},
|
||||
applyMonthMock() {
|
||||
this.monthCarbon = []
|
||||
this.monthMileage = []
|
||||
DASHBOARD_EXCEL_MOCK.months.forEach((item, index) => {
|
||||
const monthText = item.months || ''
|
||||
const month = Number(monthText.slice(-2)) || index + 1
|
||||
if (month >= 1 && month <= 12) {
|
||||
// 仅展示已有数据月份；9 月以后用空值断开曲线，而非绘制为 0。
|
||||
const hasData = month <= 8
|
||||
this.monthCarbon[month - 1] = hasData ? item.monthCarbon / 1000 : null
|
||||
this.monthMileage[month - 1] = hasData ? item.monthMileage : null
|
||||
}
|
||||
})
|
||||
this.initChart()
|
||||
},
|
||||
getYearData() {
|
||||
this.applyYearMock()
|
||||
currentGET('big3').catch(() => {})
|
||||
},
|
||||
applyYearMock() {
|
||||
this.cumulativeCarbon = DASHBOARD_EXCEL_MOCK.year.carbonTon
|
||||
this.cumulativeMileage = DASHBOARD_EXCEL_MOCK.year.mileage / 10000
|
||||
},
|
||||
initChart() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: 58,
|
||||
bottom: 30,
|
||||
left: 64,
|
||||
right: 56
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `碳减排量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
||||
const values = {}
|
||||
params.forEach((item) => { values[item.seriesName] = item.value })
|
||||
return `${params[0].axisValue}<br/>碳减排量：${this.formatCarbon(values['碳减排量(吨)'] || 0)}吨<br/>行驶里程：${this.formatMileage(values['行驶里程(km)'] || 0)}`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['碳减排量(kg)', '行驶里程(km)'],
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid: {
|
||||
left: '18%',
|
||||
right: '18%',
|
||||
top: '10%',
|
||||
bottom: '10%'
|
||||
data: ['碳减排量(吨)', '行驶里程(km)'],
|
||||
left: 'center',
|
||||
top: 4,
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
textStyle: { color: '#d8e8ff', fontSize: 13 }
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
axisLine: { lineStyle: { color: '#fff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
boundaryGap: false,
|
||||
data: this.months,
|
||||
axisLine: { lineStyle: { color: '#ffffff' } },
|
||||
axisLabel: { color: '#ffffff' }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// name: '碳减排量',
|
||||
axisLine: { lineStyle: { color: '#fff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { show: false },
|
||||
name: '碳减排量(吨)',
|
||||
min: 0,
|
||||
max: 300,
|
||||
interval: 50,
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#3399ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#3399ff' } },
|
||||
axisTick: { lineStyle: { color: '#3399ff' } },
|
||||
splitLine: { lineStyle: { color: '#091a40' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}kg'
|
||||
color: '#3399ff',
|
||||
margin: 10,
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
// name: '行驶里程',
|
||||
axisLine: { lineStyle: { color: '#fff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
name: '行驶里程(km)',
|
||||
min: 0,
|
||||
max: 600000,
|
||||
interval: 100000,
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#a060ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#a060ff' } },
|
||||
axisTick: { lineStyle: { color: '#a060ff' } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
formatter: '{value}km'
|
||||
color: '#a060ff',
|
||||
margin: 12,
|
||||
formatter: (value) => this.formatMileage(value)
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '碳减排量(kg)',
|
||||
type: 'bar',
|
||||
data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600],
|
||||
itemStyle: { color: '#00BAFF' },
|
||||
barWidth: 14,
|
||||
axisLabel: {formatter: '{value} kg'}
|
||||
name: '碳减排量(吨)',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: this.monthCarbon,
|
||||
itemStyle: { color: '#3399ff' },
|
||||
lineStyle: { color: '#3399ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
},
|
||||
{
|
||||
name: '行驶里程(km)',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500],
|
||||
itemStyle: { color: '#FFC600' },
|
||||
smooth: true,
|
||||
lineStyle: { width: 2 },
|
||||
data: this.monthMileage,
|
||||
itemStyle: { color: '#a060ff' },
|
||||
lineStyle: { color: '#a060ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
axisLabel: {formatter: '{value} km'}
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
|
||||
/* 环形图1 - 年度碳减排量 */
|
||||
pieOptionOne: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0吨',
|
||||
//subtext: '年度碳减排量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#fff', fontSize: 18 },
|
||||
subtextStyle: { color: '#fff', fontSize: 18}
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize()
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示
|
||||
fill: '#fff',
|
||||
font: '16px sans-serif',
|
||||
formatCarbonTotal(value) {
|
||||
const total = Number(value) || 0
|
||||
return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1)
|
||||
},
|
||||
formatMileageTotal(value) {
|
||||
const total = Number(value) || 0
|
||||
return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1)
|
||||
},
|
||||
formatMileage(value) {
|
||||
const distance = Number(value) || 0
|
||||
if (distance >= 10000) {
|
||||
const wan = distance / 10000
|
||||
return `${Number.isInteger(wan) ? wan : wan.toFixed(1)}万km`
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度碳减排量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 5, name: '碳排放量', itemStyle: { color: '#7d70f9' } },
|
||||
{ value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
return `${distance.toFixed(0)}km`
|
||||
},
|
||||
|
||||
/* 环形图2 - 年度行驶里程 */
|
||||
pieOptionTwo: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0万',
|
||||
//subtext: '年度行驶里程',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#fff', fontSize: 18 },
|
||||
subtextStyle: { color: '#fff', fontSize: 12 }
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示
|
||||
fill: '#fff',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度行驶里程',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 85, name: '行驶里程', itemStyle: { color: '#00BAFF' } },
|
||||
{ value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
monthItems:[],
|
||||
monthCarbon:[],
|
||||
monthMileage:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData();
|
||||
this.getYearData();
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
currentGET("big2").then((res) => {
|
||||
console.log('月度碳足迹');
|
||||
this.monthItems = res.data;
|
||||
console.log(this.monthItems);
|
||||
this.monthItems.forEach((item) => {
|
||||
console.log(item.monthCarbon);
|
||||
console.log(item.monthMileage);
|
||||
this.monthCarbon.push(item.monthCarbon);// + 'kg'
|
||||
this.monthMileage.push(item.monthMileage );//+ 'km'
|
||||
});
|
||||
console.log('碳减排：'+ this.monthCarbon);
|
||||
console.log('里程数：'+ this.monthMileage);
|
||||
this.barLineOption.series[0].data = this.monthCarbon;
|
||||
this.barLineOption.series[1].data = this.monthMileage;
|
||||
});
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳减排量');
|
||||
console.log(res);
|
||||
this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
|
||||
this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
|
||||
});
|
||||
formatCarbon(value) {
|
||||
const carbon = Number(value) || 0
|
||||
return Number.isInteger(carbon) ? carbon.toFixed(0) : carbon.toFixed(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -220,37 +203,111 @@ export default {
|
||||
<style scoped>
|
||||
.chart-block {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
/* 自行控制宽高，若嵌入大屏可由外层决定大小 */
|
||||
width: 800px;
|
||||
height: 300px;
|
||||
/* 背景可保持透明，方便嵌入大屏的背景 */
|
||||
justify-content: space-between;
|
||||
gap: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px 14px 4px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
width: 50%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-line-chart {
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 右侧两个环形图的布局 */
|
||||
.chart-container-right {
|
||||
width: 44%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: 14px;
|
||||
flex: 0 0 84px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin-right: -20px;
|
||||
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
.metric-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: #dbeaff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-title i {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
background: #3399ff;
|
||||
box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-title i {
|
||||
background: #a060ff;
|
||||
box-shadow: 0 0 8px rgba(160, 96, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value span {
|
||||
margin-left: 2px;
|
||||
color: #9bc9ff;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.metric-line {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 7px;
|
||||
left: 6px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #3399ff, transparent);
|
||||
box-shadow: 0 0 7px rgba(51, 153, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-line {
|
||||
background: linear-gradient(90deg, transparent, #a060ff, transparent);
|
||||
box-shadow: 0 0 7px rgba(160, 96, 255, 0.9);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="货品分类月度减碳量"
|
||||
title="月度减碳量"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<RightCenter />
|
||||
|
||||
+221
-140
@@ -6,109 +6,38 @@
|
||||
<div ref="chart" class="bar-line-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 两个环形图 -->
|
||||
<!-- 右侧累计指标 -->
|
||||
<div class="chart-container-right">
|
||||
<v-chart class="pie-chart" :options="pieOptionOne" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<v-chart class="pie-chart" :options="pieOptionTwo" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<div class="metric-card metric-card--hydrogen">
|
||||
<div class="metric-title"><i></i>累计用氢量</div>
|
||||
<div class="metric-value">{{ formatHydrogen(cumulativeHydrogen).value }}<span>{{ formatHydrogen(cumulativeHydrogen).unit }}</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
<div class="metric-card metric-card--mileage">
|
||||
<div class="metric-title"><i></i>累计里程</div>
|
||||
<div class="metric-value">{{ formatMileageTotal(cumulativeMileage) }}<span>万km</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VChart from 'vue-echarts';
|
||||
import echarts from 'echarts';
|
||||
import 'echarts/lib/chart/bar'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/chart/pie'
|
||||
import 'echarts/lib/component/legend'
|
||||
import 'echarts/lib/component/tooltip'
|
||||
import { currentGET } from 'api/modules';
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'LeftBottomChart',
|
||||
components: { VChart },
|
||||
data() {
|
||||
return {
|
||||
/* 环形图1 - 月度用氢量 */
|
||||
pieOptionOne: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0吨',
|
||||
//subtext: '月度用氢量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#fff', fontSize: 18 },
|
||||
subtextStyle: { color: '#fff', fontSize: 18}
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '月\n度\n用\n氢\n量', // 每个字符换行显示
|
||||
fill: '#fff',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '月度用氢量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 5, name: '用氢量', itemStyle: { color: '#7d70f9' } },
|
||||
{ value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* 环形图2 - 年度用氢量 */
|
||||
pieOptionTwo: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0万',
|
||||
//subtext: '年度用氢量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#fff', fontSize: 18 },
|
||||
subtextStyle: { color: '#fff', fontSize: 12 }
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n用\n氢\n量', // 每个字符换行显示
|
||||
fill: '#fff',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度用氢量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 85, name: '用氢量', itemStyle: { color: '#00BAFF' } },
|
||||
{ value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
cumulativeHydrogen: 0,
|
||||
cumulativeMileage: 0,
|
||||
monthItems:[],
|
||||
monthHydrogen:[],
|
||||
monthMileage:[],
|
||||
@@ -118,38 +47,48 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
currentGET("big2").then((res) => {
|
||||
console.log('月度碳减排');
|
||||
this.monthItems = res.data;
|
||||
console.log(this.monthItems);
|
||||
const currentMonth = new Date().getMonth() + 1; // 加1以得到1-12的月份
|
||||
// 保留真实接口调用，图表展示改为 Excel 整理后的 100 台车 Mock 数据。
|
||||
this.applyMonthMock();
|
||||
currentGET("big2").catch(() => {});
|
||||
},
|
||||
applyMonthMock() {
|
||||
this.monthItems = DASHBOARD_EXCEL_MOCK.months;
|
||||
this.monthHydrogen = [];
|
||||
this.monthMileage = [];
|
||||
this.monthCarbon = [];
|
||||
this.monthItems.forEach((item) => {
|
||||
// this.monthHydrogen.push(item.monthHydrogen);
|
||||
// this.monthMileage.push(item.monthMileage);
|
||||
let month = parseInt(item.months.substring(5,7));
|
||||
if(month === currentMonth){
|
||||
this.pieOptionOne.title.text = item.monthHydrogen + '\nkg';
|
||||
}
|
||||
this.monthMileage[month-1] = item.monthMileage;
|
||||
this.monthCarbon[month-1] = item.monthCarbon;
|
||||
this.monthHydrogen[month-1] = item.monthHydrogen;
|
||||
// 9 月以后暂无数据，传入空值以在 8 月断开曲线。
|
||||
const hasData = month <= 8;
|
||||
this.monthMileage[month-1] = hasData ? item.monthMileage : null;
|
||||
this.monthCarbon[month-1] = hasData ? item.monthCarbon : null;
|
||||
this.monthHydrogen[month-1] = hasData ? item.monthHydrogen : null;
|
||||
});
|
||||
//console.log('用氢量：'+ this.monthHydrogen);
|
||||
//console.log('里程数：'+ this.monthMileage);
|
||||
this.getYearData();
|
||||
this.initChart();
|
||||
|
||||
});
|
||||
},
|
||||
initChart()
|
||||
{
|
||||
let chart = echarts.init(this.$refs.chart);
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
let option = {
|
||||
grid:{
|
||||
left:'18%'
|
||||
top: 58,
|
||||
bottom: 30,
|
||||
left: 64,
|
||||
right: 56
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -158,14 +97,20 @@ export default {
|
||||
// return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
|
||||
// }
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
||||
const values = {};
|
||||
params.forEach(item => { values[item.seriesName] = item.value; });
|
||||
const hydrogen = this.formatHydrogen(values['用氢量(吨)'] || 0);
|
||||
return `${params[0].axisValue}<br/>用氢量：${hydrogen.value}${hydrogen.unit}<br/>行驶里程：${this.formatMileage(values['行驶里程(km)'] || 0)}`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
//data: ['用氢量', '用电量', '行驶里程'],
|
||||
data: ['用氢量(kg)', '行驶里程(km)'],
|
||||
textStyle: { color: '#eee' }
|
||||
data: ['用氢量(吨)', '行驶里程(km)'],
|
||||
left: 'center',
|
||||
top: 4,
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
textStyle: { color: '#d8e8ff', fontSize: 13 }
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -173,27 +118,50 @@ export default {
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: { lineStyle: { color: '#fff' } }
|
||||
},
|
||||
yAxis: {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#29A0CA' } },
|
||||
name: '用氢量(吨)',
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#3399ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#3399ff' } },
|
||||
axisTick: { lineStyle: { color: '#3399ff' } },
|
||||
splitLine: { lineStyle: { color: '#091a40' } },
|
||||
axisLabel: {
|
||||
align: 'left',
|
||||
margin:70,
|
||||
width: 100, //将内容的宽度固定
|
||||
// overflow: 'truncate', //超出的部分截断
|
||||
formatter: '{value}kg'
|
||||
color: '#3399ff',
|
||||
margin: 10,
|
||||
formatter: value => this.formatHydrogen(value).value
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '行驶里程(km)',
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#a060ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#a060ff' } },
|
||||
axisTick: { lineStyle: { color: '#a060ff' } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#a060ff',
|
||||
margin: 12,
|
||||
formatter: value => this.formatMileage(value)
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '用氢量(kg)',
|
||||
name: '用氢量(吨)',
|
||||
type: 'line',
|
||||
//data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
|
||||
yAxisIndex: 0,
|
||||
data: this.monthHydrogen,
|
||||
// data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
itemStyle: { color: '#3399ff' }
|
||||
itemStyle: { color: '#3399ff' },
|
||||
lineStyle: { color: '#3399ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
},
|
||||
// {
|
||||
// name: '用电量',
|
||||
@@ -206,21 +174,54 @@ export default {
|
||||
{
|
||||
name: '行驶里程(km)',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
//data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
|
||||
data: this.monthMileage,
|
||||
//data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
itemStyle: { color: '#a060ff' }
|
||||
itemStyle: { color: '#a060ff' },
|
||||
lineStyle: { color: '#a060ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) {
|
||||
this.chart.resize();
|
||||
}
|
||||
},
|
||||
formatHydrogen(value) {
|
||||
const amount = Number(value) || 0;
|
||||
if (amount >= 1000) {
|
||||
const ton = amount / 1000;
|
||||
return { value: Number.isInteger(ton) ? ton : ton.toFixed(1), unit: '吨' };
|
||||
}
|
||||
return { value: Number.isInteger(amount) ? amount : amount.toFixed(1), unit: 'kg' };
|
||||
},
|
||||
formatMileage(value) {
|
||||
const distance = Number(value) || 0;
|
||||
if (distance >= 10000) {
|
||||
const wan = distance / 10000;
|
||||
const display = Number.isInteger(wan) ? wan : wan.toFixed(1);
|
||||
return `${display}万km`;
|
||||
}
|
||||
return `${distance.toFixed(0)}km`;
|
||||
},
|
||||
formatMileageTotal(value) {
|
||||
const total = Number(value) || 0;
|
||||
return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1);
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳减排量');
|
||||
console.log(res);
|
||||
this.pieOptionTwo.title.text = res.data.yearHydrogen + '\nkg';
|
||||
});
|
||||
this.applyYearMock();
|
||||
currentGET("big3").catch(() => {});
|
||||
},
|
||||
applyYearMock() {
|
||||
this.cumulativeHydrogen = DASHBOARD_EXCEL_MOCK.year.hydrogen;
|
||||
this.cumulativeMileage = DASHBOARD_EXCEL_MOCK.year.mileage / 10000;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -229,34 +230,114 @@ export default {
|
||||
<style scoped>
|
||||
.chart-block {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 自行控制宽高，若嵌入大屏可由外层决定大小 */
|
||||
width: 800px;
|
||||
height: 300px;
|
||||
/* 背景可保持透明，方便嵌入大屏的背景 */
|
||||
gap: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px 14px 4px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.chart-container {
|
||||
margin-left: -20px;
|
||||
|
||||
width: 55%;
|
||||
height:100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 右侧两个环形图的布局 */
|
||||
/* 右侧累计指标布局 */
|
||||
.chart-container-right {
|
||||
padding-right: 20px;
|
||||
width: 44%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: 14px;
|
||||
flex: 0 0 84px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
.metric-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: #dbeaff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-title i {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
background: #3399ff;
|
||||
box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-title i {
|
||||
background: #a060ff;
|
||||
box-shadow: 0 0 8px rgba(160, 96, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value span {
|
||||
margin-left: 2px;
|
||||
color: #9bc9ff;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.metric-line {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 7px;
|
||||
left: 6px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, rgba(51, 153, 255, 0), #3399ff 16%, #3399ff 84%, rgba(51, 153, 255, 0));
|
||||
box-shadow: 0 0 7px rgba(51, 153, 255, 0.65);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-value span {
|
||||
color: #d5b4ff;
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-line {
|
||||
background: linear-gradient(90deg, rgba(160, 96, 255, 0), #a060ff 16%, #a060ff 84%, rgba(160, 96, 255, 0));
|
||||
box-shadow: 0 0 7px rgba(160, 96, 255, 0.65);
|
||||
}
|
||||
</style>
|
||||
|
||||
+48
-192
@@ -1,107 +1,27 @@
|
||||
<template>
|
||||
<div class="cards-container">
|
||||
<!-- 四个卡片 -->
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div v-for="(card, index) in cards" :key="card.id" class="card">
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[0].value }}</span>
|
||||
<span class="unit">{{ cards[0].unit }}</span>
|
||||
<span class="number">{{ card.value }}</span>
|
||||
<span class="unit">{{ card.unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[0].label }}</div>
|
||||
<div class="label">{{ card.label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-0"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="icon-bg" :class="`icon-bg-${index}`"></div>
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/1.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[1].value }}</span>
|
||||
<span class="unit">{{ cards[1].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[1].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-1"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/2.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[2].value }}</span>
|
||||
<span class="unit">{{ cards[2].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[2].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-2"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/3.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[3].value }}</span>
|
||||
<span class="unit">{{ cards[3].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[3].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-3"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/4.svg" class="images"/>
|
||||
<img :src="card.srcValue" class="images" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock'
|
||||
|
||||
export default {
|
||||
name: "BlinkingIcons",
|
||||
@@ -110,31 +30,31 @@
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
value: "100/100",
|
||||
value: "62/100",
|
||||
unit: "辆",
|
||||
label: "在线车数",
|
||||
srcValue: "@/assets/img/left_top_lv.png",
|
||||
srcValue: require("@/assets/img/left/1.svg"),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "561",
|
||||
unit: "kg",
|
||||
label: "当日减碳",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
srcValue: require("@/assets/img/left/2.svg"),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "534",
|
||||
unit: "kg",
|
||||
label: "当日用氢量",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
srcValue: require("@/assets/img/left/3.svg"),
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
value: "3300",
|
||||
unit: "km",
|
||||
label: "当日里程",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
srcValue: require("@/assets/img/left/4.svg"),
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -144,93 +64,61 @@
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
currentGET("big1").then((res) => {
|
||||
console.log('当日实况');
|
||||
console.log(res);
|
||||
|
||||
let onLineCount = 0;
|
||||
let vehicleCount = 0;
|
||||
let dayCarbon = 0;
|
||||
let dayHydrogen = 0;
|
||||
let dayMileage = 0;
|
||||
|
||||
if(res !==null && res.data !==null )
|
||||
{
|
||||
if(res.data.onLineCount !== null)
|
||||
onLineCount = res.data.onLineCount;
|
||||
if(res.data.vehicleCount !== null)
|
||||
vehicleCount = res.data.vehicleCount;
|
||||
if(res.data.dayCarbon !== null)
|
||||
dayCarbon = res.data.dayCarbon;
|
||||
if(res.data.dayHydrogen !== null)
|
||||
dayHydrogen = res.data.dayHydrogen;
|
||||
if(res.data.dayMileage !== null)
|
||||
dayMileage = res.data.dayMileage;
|
||||
}
|
||||
|
||||
let change = this.cards[0];
|
||||
|
||||
change.value = onLineCount + "/" + vehicleCount;
|
||||
this.$set(this.cards, 0, change);
|
||||
|
||||
change = this.cards[1];
|
||||
change.value = dayCarbon;
|
||||
this.$set(this.cards, 1, change);
|
||||
change = this.cards[2];
|
||||
change.value = dayHydrogen;
|
||||
this.$set(this.cards, 2, change);
|
||||
change = this.cards[3];
|
||||
change.value = dayMileage;
|
||||
this.$set(this.cards, 3, change);
|
||||
});
|
||||
// 保留真实接口请求，展示层统一使用 Excel 汇总的演示数据。
|
||||
this.applyExcelMock();
|
||||
currentGET("big1").catch(() => {});
|
||||
},
|
||||
applyExcelMock() {
|
||||
const { day, onlineTotal, vehicleTotal } = DASHBOARD_EXCEL_MOCK;
|
||||
this.$set(this.cards, 0, { ...this.cards[0], value: `${onlineTotal}/${vehicleTotal}` });
|
||||
this.$set(this.cards, 1, { ...this.cards[1], value: day.carbon });
|
||||
this.$set(this.cards, 2, { ...this.cards[2], value: day.hydrogen });
|
||||
this.$set(this.cards, 3, { ...this.cards[3], value: day.mileage });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体背景 */
|
||||
.cards-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
padding-left: 0px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
background-image: url("../../assets/img/left/u665.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
.images{
|
||||
}
|
||||
|
||||
.images {
|
||||
width: 65px;
|
||||
height: 70px;
|
||||
margin-left: 10px;
|
||||
margin-top: -5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
/* 单个卡片 */
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 卡片信息区域 */
|
||||
.card-info {
|
||||
margin-bottom: 120px; /* 给下方图标区域留出空间 */
|
||||
margin-left:10px;
|
||||
margin-bottom: 120px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.value-line {
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
margin-bottom: 8px;
|
||||
width:120px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #45f3ff; /* 高亮数字颜色 */
|
||||
margin-right: 6px;
|
||||
|
||||
color: #45f3ff;
|
||||
}
|
||||
|
||||
.unit {
|
||||
@@ -239,94 +127,62 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
color: #b9e4ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 54%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 背后闪动的竖直矩形 */
|
||||
.icon-bg {
|
||||
position: absolute;
|
||||
top: -15%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background-image: url("../../assets/img/left/u676.svg");
|
||||
background-repeat: no-repeat;
|
||||
transform: translateX(-50%);
|
||||
animation: blink 1s infinite alternate;
|
||||
top: -15%;
|
||||
}
|
||||
.icon-bg-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.icon-bg-1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.icon-bg-2 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.icon-bg-3 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.icon-bg-0 { animation-delay: 0s; }
|
||||
.icon-bg-1 { animation-delay: 0.2s; }
|
||||
.icon-bg-2 { animation-delay: 0.4s; }
|
||||
.icon-bg-3 { animation-delay: 0.6s; }
|
||||
|
||||
/* 圆形平台 */
|
||||
.platform-circle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
|
||||
box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
.icon {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 28px;
|
||||
color: #00e4ff;
|
||||
font-size: 28px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 关键帧动画：闪动 */
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标模拟，可用 Font Awesome 等替换 */
|
||||
.icon-phone::before {
|
||||
content: "☎";
|
||||
}
|
||||
.icon-shield::before {
|
||||
content: "⛨";
|
||||
}
|
||||
.icon-star::before {
|
||||
content: "★";
|
||||
}
|
||||
.icon-protect::before {
|
||||
content: "🛡";
|
||||
0% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,56 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 600px; height: 350px;margin-left: -7%;margin-top: -10%;"></div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
|
||||
|
||||
export default {
|
||||
name: 'BarChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.chart) this.chart.dispose();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const myChart = echarts.init(this.$refs.chart);
|
||||
// 指定图表的配置项和数据
|
||||
if (this.chart) this.chart.dispose();
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
// 与“月度碳足迹”使用同一份 Excel/演示 Mock 月度减碳量（单位 kg）。
|
||||
const monthCarbon = DASHBOARD_EXCEL_MOCK.months.map(item => item.monthCarbon);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '7%',
|
||||
right: '3%',
|
||||
top: '8%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
lineStyle: { color: '#ffffff' }
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: { color: '#ffffff' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'white'
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '减碳量(吨)',
|
||||
nameTextStyle: { color: '#6a99f8', fontSize: 13, fontWeight: 600 },
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
formatter: '{value}kg'
|
||||
formatter: value => `${Number(value / 1000).toFixed(0)}吨`
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@@ -40,13 +62,12 @@ export default {
|
||||
tooltip: {
|
||||
trigger: 'axis' ,
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `减碳量：${params[0].value}kg`;
|
||||
return `${params[0].axisValue}<br/>减碳量：${(params[0].value / 1000).toFixed(2)}吨`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 30, 0, 0, 0, 0, 0],
|
||||
data: monthCarbon,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
// 使用线性渐变填充颜色
|
||||
@@ -61,9 +82,18 @@ export default {
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,119 +1,157 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 520px; height: 280px;margin-top: 0%;"></div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'DoubleAxisChart',
|
||||
name: 'EmptyContainerChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.chart) this.chart.dispose();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
if (this.chart) this.chart.dispose();
|
||||
this.chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
type: 'line',
|
||||
lineStyle: { color: 'rgba(102, 222, 255, 0.48)', type: 'dashed' }
|
||||
},
|
||||
backgroundColor: 'rgba(5, 28, 63, 0.94)',
|
||||
borderColor: 'rgba(65, 215, 255, 0.62)',
|
||||
borderWidth: 1,
|
||||
padding: [8, 12],
|
||||
textStyle: { color: '#e8f8ff', fontSize: 13 },
|
||||
formatter: (params) => {
|
||||
//console.log(params)
|
||||
return `空箱：${params[0].value}标箱<br/>危险品：${params[1].value}标箱`;
|
||||
const first = params && params[0];
|
||||
if (!first || first.value == null) return `${first ? first.axisValueLabel : ''}<br/>暂无数据`;
|
||||
return `${first.axisValueLabel}<br/><span style="color:#7eeeff">空箱</span>：${first.value.toLocaleString()} 标箱`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['空箱', '危险品'],
|
||||
data: ['空箱'],
|
||||
left: 'right',
|
||||
top: 0,
|
||||
icon: 'line',
|
||||
itemWidth: 30,
|
||||
itemHeight: .0,
|
||||
itemWidth: 24,
|
||||
itemHeight: 3,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#d9f5ff',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['点1', '点2', '点3', '点4', '点5', '点6', '点7']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
lineStyle: { color: '#558cc5', width: 1 }
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#081b42' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}标箱'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#081b42' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}标箱'
|
||||
color: '#c7e3ff',
|
||||
fontSize: 12,
|
||||
margin: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 10000,
|
||||
interval: 2000,
|
||||
name: '标箱',
|
||||
nameTextStyle: {
|
||||
color: '#6edcff',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
padding: [0, 0, 0, -4]
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#558cc5'
|
||||
}
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: 'rgba(49, 123, 181, 0.42)', type: 'dashed' } },
|
||||
axisLabel: {
|
||||
color: '#c7e3ff',
|
||||
fontSize: 12,
|
||||
formatter: value => `${(value / 1000).toFixed(0)}k`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '空箱',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: {color: 'orange'},
|
||||
data: [5528, 3041, 2963, 3310, 8410, 6885, 9440, 2279, null, null, null, null],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
showSymbol: true,
|
||||
itemStyle: {
|
||||
color: '#78eeff',
|
||||
borderColor: '#062551',
|
||||
borderWidth: 2,
|
||||
shadowBlur: 9,
|
||||
shadowColor: 'rgba(51, 222, 255, 0.85)'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(48, 216, 255, 0.38)' },
|
||||
{ offset: 0.65, color: 'rgba(31, 164, 234, 0.14)' },
|
||||
{ offset: 1, color: 'rgba(20, 94, 169, 0.02)' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: 'series',
|
||||
scale: true
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
lineStyle: {
|
||||
color: 'orange', // 线条颜色
|
||||
width: 2, // 线条宽度
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '危险品',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, // 使用第二个Y轴
|
||||
stack: '总量',
|
||||
areaStyle: {color: 'blue'},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
lineStyle: {
|
||||
color: 'blue', // 线条颜色
|
||||
width: 2, // 线条宽度
|
||||
color: '#32d8ff',
|
||||
width: 3,
|
||||
shadowBlur: 8,
|
||||
shadowColor: 'rgba(38, 204, 255, 0.75)'
|
||||
},
|
||||
connectNulls: false
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user