修改Chart顏色色系
This commit is contained in:
parent
01954e3f6e
commit
2693ad5713
@ -3,9 +3,9 @@
|
||||
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 124.4 12" style="enable-background:new 0 0 124.4 12;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#0CA9D4;}
|
||||
.st0{fill:#17CEE3;}
|
||||
.st1{opacity:0.3;fill:#969696;}
|
||||
.st2{opacity:0.8;fill:#0CA9D4;}
|
||||
.st2{opacity:0.8;fill:#17CEE3;}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="92.7,2.9 31.5,2.9 28.8,0 95.6,0 "/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -1,7 +1,7 @@
|
||||
<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.4 12.01">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1,.cls-3 { fill: #05AA9A; }
|
||||
.cls-1,.cls-3 { fill: #E4EA00; }
|
||||
.cls-2 { fill: #969696; opacity: 0.3; }
|
||||
.cls-3 { opacity: 0.8; }
|
||||
</style>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
21
src/assets/img/chart-title03.svg
Normal file
21
src/assets/img/chart-title03.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 124.4 12" style="enable-background:new 0 0 124.4 12;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#62E39A;}
|
||||
.st1{opacity:0.3;fill:#969696;}
|
||||
.st2{opacity:0.8;fill:#62E39A;}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="92.7,2.9 31.5,2.9 28.8,0 95.6,0 "/>
|
||||
<path class="st1" d="M124.4,0.1v11.7c0,0.1-0.3,0.1-0.7,0.1H97.8c-0.2,0-0.4,0-0.5-0.1l-1.8-0.4c-0.1,0-0.3-0.1-0.5-0.1H29.8
|
||||
c-0.2,0-0.4,0-0.5,0.1L27.5,12C27.4,12,27.2,12,27,12H0.7C0.3,12,0,11.9,0,11.9V0.1C0,0.1,0.3,0,0.7,0l26.2,0.1
|
||||
c0.2,0,0.4,0,0.5,0.1L29,2.2c0.1,0,0.3,0.1,0.5,0.1h65.3c0.2,0,0.4,0,0.5-0.1l1.9-2.1c0.1,0,0.3-0.1,0.5-0.1l26-0.1
|
||||
C124.1,0,124.4,0.1,124.4,0.1z"/>
|
||||
<path class="st2" d="M122.9,12V2.1c0-0.5-0.4-0.9-0.9-0.9H96.4c-0.3,0-0.5,0.1-0.7,0.3l-1.8,1.6c-0.1,0.1-0.2,0.1-0.3,0.1H30.7
|
||||
c-0.1,0-0.2,0-0.3-0.1l-1.6-1.6c-0.2-0.2-0.4-0.3-0.7-0.3H2.4c-0.5,0-0.9,0.4-0.9,0.9V12 M1.7,12V2.1c0-0.4,0.3-0.6,0.6-0.6h25.8
|
||||
c0.2,0,0.4,0.1,0.5,0.2l1.6,1.6c0.1,0.1,0.3,0.2,0.5,0.2h62.9c0.2,0,0.4-0.1,0.5-0.2l1.8-1.6c0.1-0.1,0.3-0.2,0.5-0.2H122
|
||||
c0.4,0,0.6,0.3,0.6,0.6V12"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
21
src/assets/img/chart-title04.svg
Normal file
21
src/assets/img/chart-title04.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 124.4 12" style="enable-background:new 0 0 124.4 12;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E9971F;}
|
||||
.st1{opacity:0.3;fill:#969696;}
|
||||
.st2{opacity:0.8;fill:#E9971F;}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="92.7,2.9 31.5,2.9 28.8,0 95.6,0 "/>
|
||||
<path class="st1" d="M124.4,0.1v11.7c0,0.1-0.3,0.1-0.7,0.1H97.8c-0.2,0-0.4,0-0.5-0.1l-1.8-0.4c-0.1,0-0.3-0.1-0.5-0.1H29.8
|
||||
c-0.2,0-0.4,0-0.5,0.1L27.5,12C27.4,12,27.2,12,27,12H0.7C0.3,12,0,11.9,0,11.9V0.1C0,0.1,0.3,0,0.7,0l26.2,0.1
|
||||
c0.2,0,0.4,0,0.5,0.1L29,2.2c0.1,0,0.3,0.1,0.5,0.1h65.3c0.2,0,0.4,0,0.5-0.1l1.9-2.1c0.1,0,0.3-0.1,0.5-0.1l26-0.1
|
||||
C124.1,0,124.4,0.1,124.4,0.1z"/>
|
||||
<path class="st2" d="M122.9,12V2.1c0-0.5-0.4-0.9-0.9-0.9H96.4c-0.3,0-0.5,0.1-0.7,0.3l-1.8,1.6c-0.1,0.1-0.2,0.1-0.3,0.1H30.7
|
||||
c-0.1,0-0.2,0-0.3-0.1l-1.6-1.6c-0.2-0.2-0.4-0.3-0.7-0.3H2.4c-0.5,0-0.9,0.4-0.9,0.9V12 M1.7,12V2.1c0-0.4,0.3-0.6,0.6-0.6h25.8
|
||||
c0.2,0,0.4,0.1,0.5,0.2l1.6,1.6c0.1,0.1,0.3,0.2,0.5,0.2h62.9c0.2,0,0.4-0.1,0.5-0.2l1.8-1.6c0.1-0.1,0.3-0.2,0.5-0.2H122
|
||||
c0.4,0,0.6,0.3,0.6,0.6V12"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -4,6 +4,18 @@ import * as echarts from "echarts";
|
||||
import BarChart from "@/components/chart/BarChart.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
// 獨立顏色配置
|
||||
const chartColors = {
|
||||
yesterdayToday: [
|
||||
{ start: "#17CEE3", middle: "#398ECA", end: "#17CEE3" },
|
||||
{ start: "#E4EA00", middle: "#b2b800", end: "#E4EA00" },
|
||||
],
|
||||
weekComparison: [
|
||||
{ start: "#62E39A", middle: "#53c283", end: "#62E39A" },
|
||||
{ start: "#E9971F", middle: "#ba7a1c", end: "#E9971F" },
|
||||
],
|
||||
};
|
||||
|
||||
// 定義用電比較資料
|
||||
const yesterdayTodayData = {
|
||||
categories: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00"],
|
||||
@ -35,7 +47,7 @@ const weekComparisonData = {
|
||||
};
|
||||
|
||||
// 生成圓柱圖表的 option
|
||||
const generateCylinderChartOption = (categories, values) => {
|
||||
const generateCylinderChartOption = (categories, values, colors) => {
|
||||
const barWidth = 15; // 圓柱體寬度
|
||||
return {
|
||||
xAxis: {
|
||||
@ -74,9 +86,9 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
x2: 1, // 向右漸層
|
||||
y2: 0, // 水平漸層
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#17CEE3" }, // 左側顏色
|
||||
{ offset: 0.5, color: "#398ECA" }, // 中間顏色
|
||||
{ offset: 1, color: "#17CEE3" }, // 右側顏色
|
||||
{ offset: 0, color: colors[0].start },
|
||||
{ offset: 0.5, color: colors[0].middle },
|
||||
{ offset: 1, color: colors[0].end },
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -94,9 +106,9 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
x2: 1, // 向右漸層
|
||||
y2: 0, // 水平漸層
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#62E39A" }, // 左側顏色
|
||||
{ offset: 0.5, color: "#05AA9A" }, // 中間顏色
|
||||
{ offset: 1, color: "#62E39A" }, // 右側顏色
|
||||
{ offset: 0, color: colors[1].start },
|
||||
{ offset: 0.5, color: colors[1].middle },
|
||||
{ offset: 1, color: colors[1].end },
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -111,7 +123,7 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
data: values[0].value,
|
||||
z: 12,
|
||||
itemStyle: {
|
||||
color: "#0b86a7",
|
||||
color: colors[0].middle,
|
||||
borderWidth: 10,
|
||||
borderColor: "#fff",
|
||||
borderType: "solid",
|
||||
@ -125,7 +137,7 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
symbolPosition: "end",
|
||||
data: values[1].value,
|
||||
itemStyle: {
|
||||
color: "#05AA9A",
|
||||
color: colors[1].middle,
|
||||
borderWidth: 10,
|
||||
borderColor: "#fff",
|
||||
borderType: "solid",
|
||||
@ -142,7 +154,7 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
data: values[0].value,
|
||||
z: 12,
|
||||
itemStyle: {
|
||||
color: "#0ca9d4",
|
||||
color: colors[0].middle,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -153,7 +165,7 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
symbolPosition: "start",
|
||||
data: values[1].value,
|
||||
itemStyle: {
|
||||
color: "#05AA9A",
|
||||
color: colors[1].middle,
|
||||
},
|
||||
z: 12,
|
||||
},
|
||||
@ -187,11 +199,13 @@ const generateCylinderChartOption = (categories, values) => {
|
||||
// 分別生成每個圖表的 option
|
||||
const yesterdayTodayOption = generateCylinderChartOption(
|
||||
yesterdayTodayData.categories,
|
||||
yesterdayTodayData.values
|
||||
yesterdayTodayData.values,
|
||||
chartColors.yesterdayToday
|
||||
);
|
||||
const weekComparisonOption = generateCylinderChartOption(
|
||||
weekComparisonData.categories,
|
||||
weekComparisonData.values
|
||||
weekComparisonData.values,
|
||||
chartColors.weekComparison
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -234,11 +248,11 @@ const weekComparisonOption = generateCylinderChartOption(
|
||||
</h2>
|
||||
<div class="w-[48%]">
|
||||
<div class="text-con">
|
||||
<img src="@ASSET/img/chart-title01.svg" />
|
||||
<img src="@ASSET/img/chart-title03.svg" />
|
||||
<span>{{ $t("dashboard.thisweek_electricity_consumption") }}</span>
|
||||
</div>
|
||||
<div class="text-con">
|
||||
<img src="@ASSET/img/chart-title02.svg" />
|
||||
<img src="@ASSET/img/chart-title04.svg" />
|
||||
<span>{{ $t("dashboard.lastweek_electricity_consumption") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -49,7 +49,7 @@ const defaultChartOption = ref({
|
||||
stack: "total",
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#398ECA",
|
||||
color: "#17CEE3",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -58,7 +58,7 @@ const defaultChartOption = ref({
|
||||
stack: "total",
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#05AA9A",
|
||||
color: "#E4EA00",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@ -48,7 +48,7 @@ const defaultChartOption = ref({
|
||||
type: "bar",
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#398ECA",
|
||||
color: "#17CEE3",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -72,7 +72,7 @@ const loadData = async () => {
|
||||
percentage: item.percentage,
|
||||
}));
|
||||
|
||||
const colors = ["#45f4ef", "#398ECA", "#05AA9A", "#62E39A", "#17CEE3", "#E9971F"];
|
||||
const colors = ["#45f4ef", "#17CEE3", "#E4EA00", "#62E39A", "#E9971F", "#E52EFF"];
|
||||
// 更新 chartOption
|
||||
chartOption.series[0].data = data.map((item, index) => ({
|
||||
...item,
|
||||
|
||||
@ -26,7 +26,7 @@ const data = {
|
||||
width: 3,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#398ECA",
|
||||
color: "#17CEE3",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -38,7 +38,7 @@ const data = {
|
||||
width: 3,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#05AA9A",
|
||||
color: "#E4EA00",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -62,7 +62,7 @@ const data = {
|
||||
width: 3,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#17CEE3",
|
||||
color: "#E9971F",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -14,9 +14,9 @@ const dateRange = ref({
|
||||
// 圖表配置
|
||||
const chartConfig = {
|
||||
colors: {
|
||||
peak: "#398ECA",
|
||||
peak: "#E52EFF",
|
||||
semiPeak: "#05AA9A",
|
||||
offPeak: "#62E39A",
|
||||
offPeak: "#398ECA",
|
||||
},
|
||||
textColor: "#ffffff",
|
||||
fontSize: 14,
|
||||
|
||||
@ -50,7 +50,7 @@ const defaultChartOption = ref({
|
||||
stack: "total",
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#398ECA",
|
||||
color: "#17CEE3",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -59,7 +59,7 @@ const defaultChartOption = ref({
|
||||
stack: "total",
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#05AA9A",
|
||||
color: "#E4EA00",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user