twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-15 14:03:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 带来更美观精致的首页 (#848)

Browse Source
This commit is contained in:
xiaoming
2024-01-07 23:27:27 +08:00
committed by GitHub
parent bd8e90e6b6
commit 4fa6a47342
24 changed files with 787 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/plugins/echarts/index.ts
View File

@@ -1,10 +1,11 @@
import type { App } from "vue";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import {
GridComponent,
TitleComponent,
PolarComponent,
LegendComponent,
GraphicComponent,
ToolboxComponent,
@@ -14,15 +15,16 @@ import {
} from "echarts/components";
const { use } = echarts;
// const { use, registerTheme } = echarts;
use([
PieChart,
BarChart,
LineChart,
CanvasRenderer,
SVGRenderer,
GridComponent,
TitleComponent,
PolarComponent,
LegendComponent,
GraphicComponent,
ToolboxComponent,
@@ -32,16 +34,8 @@ use([
]);
/**
* @description 自定义主题
* @see {@link https://echarts.apache.org/zh/download-theme.html}
*/
// import theme from "./theme.json";
// registerTheme("ovilia-green", theme);
/**
* @description 按需引入echarts
* @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
* @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，为了配合 https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html 使用
* @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
* @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
*/
export function useEcharts(app: App) {
app.config.globalProperties.$echarts = echarts;

394
src/plugins/echarts/theme.json
View File

@@ -1,394 +0,0 @@
{
"color": ["#4ea397", "#22c3aa", "#7bd9a5"],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#666666"
},
"subtextStyle": {
"color": "#999999"
}
},
"line": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "3"
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "3"
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"barBorderWidth": "0",
"barBorderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"barBorderWidth": "0",
"barBorderColor": "#444444"
}
}
},
"pie": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"scatter": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"boxplot": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"parallel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"sankey": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"funnel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"gauge": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"candlestick": {
"itemStyle": {
"color": "#d0648a",
"color0": "#ffffff",
"borderColor": "#d0648a",
"borderColor0": "#22c3aa",
"borderWidth": 1
}
},
"graph": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#444444"
},
"lineStyle": {
"width": 1,
"color": "#aaa"
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true,
"color": ["#4ea397", "#22c3aa", "#7bd9a5"],
"label": {
"color": "#ffffff"
}
},
"map": {
"itemStyle": {
"areaColor": "#eeeeee",
"borderColor": "#999999",
"borderWidth": "0.5"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(34,195,170,0.25)",
"borderColor": "#22c3aa",
"borderWidth": "0.5"
},
"label": {
"color": "rgb(52,158,142)"
}
},
"label": {
"color": "#28544e"
}
},
"geo": {
"itemStyle": {
"areaColor": "#eeeeee",
"borderColor": "#999999",
"borderWidth": "0.5"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(34,195,170,0.25)",
"borderColor": "#22c3aa",
"borderWidth": "0.5"
},
"label": {
"color": "rgb(52,158,142)"
}
},
"label": {
"color": "#28544e"
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#aaaaaa"
},
"emphasis": {
"iconStyle": {
"borderColor": "#666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#ccc",
"width": 1
},
"crossStyle": {
"color": "#ccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#349e8e",
"width": 1
},
"itemStyle": {
"color": "#349e8e",
"borderWidth": "1"
},
"emphasis": {
"itemStyle": {
"color": "#57e8d2"
}
},
"controlStyle": {
"color": "#349e8e",
"borderColor": "#349e8e",
"borderWidth": "0"
},
"checkpointStyle": {
"color": "#22c3aa",
"borderColor": "rgba(34,195,170,0.25)"
},
"label": {
"color": "#349e8e"
}
},
"visualMap": {
"color": ["#d0648a", "#22c3aa", "rgba(123,217,165,0.2)"]
},
"dataZoom": {
"backgroundColor": "#fff",
"dataBackgroundColor": "#dedede",
"fillerColor": "rgba(34,195,170,0.25)",
"handleColor": "#dddddd",
"handleSize": "100%",
"textStyle": {
"color": "#999"
}
},
"markPoint": {
"label": {
"color": "#ffffff",
"emphasis": {
"textStyle": {
"color": "#ffffff"
}
}
}
}
}