碳排放

src/packages/components/Charts/IntegratedEnergy/LineGradients/config.ts

@@ -0,0 +1,135 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { LineGradientsConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { graphic } from 'echarts/core'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = [ 'xAxis', 'yAxis', 'grid']
+
+const option = {
+  legend: {
+    show: true,
+    top:'20',
+    right:'50',
+    itemStyle:{
+      borderType: 'dotted'
+    },
+    lineStyle: {
+      type:'dashed',
+      cap:'round',
+      opacity:0.9,
+    },
+    // icon: 'rect',
+    data:[{
+      name: '电',
+      // 强制设置图形为圆。
+      icon: 'rect',
+      itemStyle:{
+        color: 'rgba(12, 109, 196,1)'
+      },
+    },{
+      name: '燃气',
+      // 强制设置图形为圆。
+      icon: 'rect',
+      itemStyle:{
+        color: 'rgba(48, 189, 104,1)'
+      },
+    }],
+  },
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value',
+    name: '单位：万/kwh2',
+    nameGap:30,
+    splitLine:{
+      show: true,
+      lineStyle:{
+        type: 'dashed',
+        opacity:0.5
+      }
+    }
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      smooth: true,
+      symbolSize: 0, //设定实心点的大小
+      label: {
+        show: false,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid',
+
+        color: 'rgba(12, 109, 196,1)'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][3]
+          },
+          {
+            offset: 1,
+            color: 'rgba(12, 57, 68,0.5)'
+          }
+        ])
+      }
+    },
+    {
+      type: 'line',
+      smooth: true,
+      symbolSize: 0, //设定实心点的大小
+      label: {
+        show: false,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid',
+        join: 'round',
+        color: 'rgba(48, 189, 104,1)'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][4]
+          },
+          {
+            offset: 1,
+            color: 'rgba(8, 48, 85,0.5)'
+          }
+        ])
+      }
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = LineGradientsConfig.key
+  public chartConfig = cloneDeep(LineGradientsConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/IntegratedEnergy/LineGradients/config.vue

@@ -0,0 +1,95 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="单折线面积图"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/IntegratedEnergy/LineGradients/data.json

@@ -0,0 +1,65 @@
+{
+  "dimensions": ["月份", "电", "燃气"],
+  "source": [
+    {
+      "月份": "1月",
+      "电": 120,
+      "燃气": 130
+    },
+    {
+      "月份": "2月",
+      "电": 200,
+      "燃气": 130
+    },
+    {
+      "月份": "3月",
+      "电": 150,
+      "燃气": 312
+    },
+    {
+      "月份": "4月",
+      "电": 80,
+      "燃气": 268
+    },
+    {
+      "月份": "5月",
+      "电": 70,
+      "燃气": 155
+    },
+    {
+      "月份": "6月",
+      "电": 110,
+      "燃气": 117
+    },
+    {
+      "月份": "7月",
+      "电": 130,
+      "燃气": 160
+    },
+    {
+      "月份": "8月",
+      "电": 130,
+      "燃气": 160
+    },
+    {
+      "月份": "9月",
+      "电": 130,
+      "燃气": 160
+    },
+    {
+      "月份": "10月",
+      "电": 130,
+      "燃气": 160
+    },
+    {
+      "月份": "11月",
+      "电": 130,
+      "燃气": 160
+    },
+    {
+      "月份": "12月",
+      "电": 130,
+      "燃气": 160
+    }
+  ]
+}

src/packages/components/Charts/IntegratedEnergy/LineGradients/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const LineGradientsConfig: ConfigType = {
+  key: 'LineGradients',
+  chartKey: 'VLineGradients',
+  conKey: 'VCLineGradients',
+  title: '双折线渐变面积图',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'line_gradient.png'
+}

src/packages/components/Charts/IntegratedEnergy/LineGradients/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  value: {}
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any, index: number) => {
+          value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: themeColor[3 + index]
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+          ])
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  }
+)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/Charts/IntegratedEnergy/index.ts

@@ -6,10 +6,11 @@ import { WaterSupplySystemConfig } from "./WaterSupplySystem"
 import { AirSupplySystemConfig } from './AirSupplySystem'
 import { PowerSupplySystemConfig } from './PowerSupplySystem'
 import { GasSystemConfig } from './GasSystem'
+import { LineGradientsConfig } from './LineGradients'
 export default [
   EnergyOverviewConfig, EnergyConsumptionTrendConfig,
   ConsumptionProportionConfig,
   FeeOverviewConfig,
   WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig,
-  GasSystemConfig
+  GasSystemConfig,LineGradientsConfig
-]
+]