mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
add: v4.1.3细节补充
This commit is contained in:
parent
1cced633f2
commit
7255a8d835
@ -39,6 +39,7 @@ request({
|
|||||||
- 将原 `AppComponent` 组件包移动至 `app-components` 包中,并且按照其功能拆分为 `sys` `provider`
|
- 将原 `AppComponent` 组件包移动至 `app-components` 包中,并且按照其功能拆分为 `sys` `provider`
|
||||||
- 现在将异步注册 `vue-router`
|
- 现在将异步注册 `vue-router`
|
||||||
- `RayChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题,在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后,下载主题(json)放置于对应主题包中即可被自动注册
|
- `RayChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题,在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后,下载主题(json)放置于对应主题包中即可被自动注册
|
||||||
|
- 兼容 `yarn` `npm` 包管理器的 `manualChunks` 配置
|
||||||
|
|
||||||
## 4.1.2
|
## 4.1.2
|
||||||
|
|
||||||
|
@ -295,9 +295,9 @@ const RayChart = defineComponent({
|
|||||||
/** 注册 chart */
|
/** 注册 chart */
|
||||||
echartInstance = echarts.init(element, theme, {
|
echartInstance = echarts.init(element, theme, {
|
||||||
/** 如果款度为 0, 则以 200px 填充 */
|
/** 如果款度为 0, 则以 200px 填充 */
|
||||||
width: width === 0 ? 200 : undefined,
|
width: width === 0 ? 200 : void 0,
|
||||||
/** 如果高度为 0, 则以 200px 填充 */
|
/** 如果高度为 0, 则以 200px 填充 */
|
||||||
height: height === 0 ? 200 : undefined,
|
height: height === 0 ? 200 : void 0,
|
||||||
})
|
})
|
||||||
echartInstanceRef.value = echartInstance
|
echartInstanceRef.value = echartInstance
|
||||||
|
|
||||||
@ -313,6 +313,7 @@ const RayChart = defineComponent({
|
|||||||
if (error) {
|
if (error) {
|
||||||
call(error)
|
call(error)
|
||||||
}
|
}
|
||||||
|
|
||||||
console.error('RayChart render error: ', e)
|
console.error('RayChart render error: ', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -325,7 +326,7 @@ const RayChart = defineComponent({
|
|||||||
*/
|
*/
|
||||||
const renderThemeChart = (bool?: boolean) => {
|
const renderThemeChart = (bool?: boolean) => {
|
||||||
if (props.autoChangeTheme) {
|
if (props.autoChangeTheme) {
|
||||||
bool ? renderChart('dark') : renderChart()
|
bool ? renderChart('macarons-dark') : renderChart()
|
||||||
|
|
||||||
return void 0
|
return void 0
|
||||||
}
|
}
|
||||||
@ -383,7 +384,7 @@ const RayChart = defineComponent({
|
|||||||
* 自动跟随模板主题或者指定主题皆可
|
* 自动跟随模板主题或者指定主题皆可
|
||||||
*/
|
*/
|
||||||
if (props.autoChangeTheme || props.theme) {
|
if (props.autoChangeTheme || props.theme) {
|
||||||
themeValue.value ? renderChart('dark') : renderChart()
|
themeValue.value ? renderChart('macarons-dark') : renderChart()
|
||||||
} else {
|
} else {
|
||||||
renderChart()
|
renderChart()
|
||||||
}
|
}
|
||||||
@ -425,7 +426,7 @@ const RayChart = defineComponent({
|
|||||||
if (props.autoChangeTheme) {
|
if (props.autoChangeTheme) {
|
||||||
renderThemeChart(themeValue.value)
|
renderThemeChart(themeValue.value)
|
||||||
} else {
|
} else {
|
||||||
props.theme ? renderChart('dark') : renderChart()
|
props.theme ? renderChart('macarons-dark') : renderChart()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 注册事件 */
|
/** 注册事件 */
|
||||||
|
372
src/components/RayChart/theme/macarons/macarons-dark.json
Normal file
372
src/components/RayChart/theme/macarons/macarons-dark.json
Normal file
@ -0,0 +1,372 @@
|
|||||||
|
{
|
||||||
|
"color": [
|
||||||
|
"#fc97af",
|
||||||
|
"#87f7cf",
|
||||||
|
"#f7f494",
|
||||||
|
"#72ccff",
|
||||||
|
"#f7c5a0",
|
||||||
|
"#d4a4eb",
|
||||||
|
"#d2f5a6",
|
||||||
|
"#76f2f2"
|
||||||
|
],
|
||||||
|
"backgroundColor": "rgba(41,52,65,1)",
|
||||||
|
"textStyle": {},
|
||||||
|
"title": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
},
|
||||||
|
"subtextStyle": {
|
||||||
|
"color": "#dddddd"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": "4"
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"width": "3"
|
||||||
|
},
|
||||||
|
"symbolSize": "0",
|
||||||
|
"symbol": "circle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"radar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": "4"
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"width": "3"
|
||||||
|
},
|
||||||
|
"symbolSize": "0",
|
||||||
|
"symbol": "circle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"bar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"barBorderWidth": 0,
|
||||||
|
"barBorderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pie": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scatter": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boxplot": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"parallel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sankey": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"funnel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gauge": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"candlestick": {
|
||||||
|
"itemStyle": {
|
||||||
|
"color": "#fc97af",
|
||||||
|
"color0": "transparent",
|
||||||
|
"borderColor": "#fc97af",
|
||||||
|
"borderColor0": "#87f7cf",
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"graph": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"width": "1",
|
||||||
|
"color": "#ffffff"
|
||||||
|
},
|
||||||
|
"symbolSize": "0",
|
||||||
|
"symbol": "circle",
|
||||||
|
"smooth": true,
|
||||||
|
"color": [
|
||||||
|
"#fc97af",
|
||||||
|
"#87f7cf",
|
||||||
|
"#f7f494",
|
||||||
|
"#72ccff",
|
||||||
|
"#f7c5a0",
|
||||||
|
"#d4a4eb",
|
||||||
|
"#d2f5a6",
|
||||||
|
"#76f2f2"
|
||||||
|
],
|
||||||
|
"label": {
|
||||||
|
"color": "#293441"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"map": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "#f3f3f3",
|
||||||
|
"borderColor": "#999999",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "rgba(255,178,72,1)",
|
||||||
|
"borderColor": "#eb8146",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "rgb(137,52,72)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"geo": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "#f3f3f3",
|
||||||
|
"borderColor": "#999999",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "rgba(255,178,72,1)",
|
||||||
|
"borderColor": "#eb8146",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "rgb(137,52,72)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"categoryAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#666666"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": ["#e6e6e6"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"valueAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#666666"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": ["#e6e6e6"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"logAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#666666"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": ["#e6e6e6"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#666666"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": ["#e6e6e6"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"iconStyle": {
|
||||||
|
"borderColor": "#999999"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"iconStyle": {
|
||||||
|
"borderColor": "#666666"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"axisPointer": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"crossStyle": {
|
||||||
|
"color": "#cccccc",
|
||||||
|
"width": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeline": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#87f7cf",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"itemStyle": {
|
||||||
|
"color": "#87f7cf",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"controlStyle": {
|
||||||
|
"color": "#87f7cf",
|
||||||
|
"borderColor": "#87f7cf",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"checkpointStyle": {
|
||||||
|
"color": "#fc97af",
|
||||||
|
"borderColor": "#fc97af"
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#87f7cf"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"itemStyle": {
|
||||||
|
"color": "#f7f494"
|
||||||
|
},
|
||||||
|
"controlStyle": {
|
||||||
|
"color": "#87f7cf",
|
||||||
|
"borderColor": "#87f7cf",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#87f7cf"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"visualMap": {
|
||||||
|
"color": ["#fc97af", "#87f7cf"]
|
||||||
|
},
|
||||||
|
"dataZoom": {
|
||||||
|
"backgroundColor": "rgba(255,255,255,0)",
|
||||||
|
"dataBackgroundColor": "rgba(114,204,255,1)",
|
||||||
|
"fillerColor": "rgba(114,204,255,0.2)",
|
||||||
|
"handleColor": "#72ccff",
|
||||||
|
"handleSize": "100%",
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#333333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"markPoint": {
|
||||||
|
"label": {
|
||||||
|
"color": "#293441"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"label": {
|
||||||
|
"color": "#293441"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -40,4 +40,4 @@ export type AutoResize =
|
|||||||
height: number
|
height: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ChartTheme = 'dark' | string | object | 'macarons'
|
export type ChartTheme = 'macarons-dark' | string | object | 'macarons'
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NCard, NSwitch, NSpace, NP, NH6, NH2, NH3 } from 'naive-ui'
|
import { NCard, NSwitch, NSpace, NP, NH2 } from 'naive-ui'
|
||||||
import RayChart from '@/components/RayChart/index'
|
import RayChart from '@/components/RayChart/index'
|
||||||
|
|
||||||
import type { EChartsInstance } from '@/types/modules/component'
|
import type { EChartsInstance } from '@/types/modules/component'
|
||||||
@ -216,11 +216,18 @@ const Echart = defineComponent({
|
|||||||
<NP>
|
<NP>
|
||||||
该组件会默认以 200*200
|
该组件会默认以 200*200
|
||||||
宽高进行填充。预设了常用的图、方法组件,如果不满足需求,需要用 use
|
宽高进行填充。预设了常用的图、方法组件,如果不满足需求,需要用 use
|
||||||
方法进行手动拓展。该组件实现了自动跟随模板主题切换功能,但是动态切换损耗较大,所以默认不启用
|
方法进行手动拓展。该组件实现了自动跟随模板主题切换功能,但是动态切换损耗较大,所以默认不启用。
|
||||||
|
该组件可以让你只需要关注 options 的配置,无需关心 chart
|
||||||
|
图的资源管理。并且该组件可以自动监听 options
|
||||||
|
的变化,所以天生支持响应式,可以让你放心的加载异步数据。
|
||||||
</NP>
|
</NP>
|
||||||
<NH2>基础使用</NH2>
|
<NH2>能跟随主题切换的可视化图</NH2>
|
||||||
<div class="chart--container">
|
<div class="chart--container">
|
||||||
<RayChart options={this.baseOptions} />
|
<RayChart
|
||||||
|
autoChangeTheme
|
||||||
|
options={this.baseLineOptions}
|
||||||
|
showAria={this.chartAria}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<NH2>渲染成功后运行回调函数</NH2>
|
<NH2>渲染成功后运行回调函数</NH2>
|
||||||
<div class="chart--container">
|
<div class="chart--container">
|
||||||
@ -230,14 +237,6 @@ const Echart = defineComponent({
|
|||||||
success={this.handleChartRenderSuccess.bind(this)}
|
success={this.handleChartRenderSuccess.bind(this)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<NH2>能跟随主题切换的可视化图</NH2>
|
|
||||||
<div class="chart--container">
|
|
||||||
<RayChart
|
|
||||||
autoChangeTheme
|
|
||||||
options={this.baseLineOptions}
|
|
||||||
showAria={this.chartAria}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<NH2>不跟随主题切换的暗色主题可视化图</NH2>
|
<NH2>不跟随主题切换的暗色主题可视化图</NH2>
|
||||||
<div class="chart--container">
|
<div class="chart--container">
|
||||||
<RayChart theme="dark" options={this.baseOptions} />
|
<RayChart theme="dark" options={this.baseOptions} />
|
||||||
|
@ -10,6 +10,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { NSpace, NDataTable, NButton } from 'naive-ui'
|
import { NSpace, NDataTable, NButton } from 'naive-ui'
|
||||||
|
import RayTable from '@/components/RayTable/index'
|
||||||
|
|
||||||
import type { DataTableColumns } from 'naive-ui'
|
import type { DataTableColumns } from 'naive-ui'
|
||||||
|
|
||||||
@ -83,7 +84,7 @@ const RouterDemoHome = defineComponent({
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<NSpace wrapItem={false}>
|
<NSpace wrapItem={false}>
|
||||||
<NDataTable columns={this.columns} data={this.dataSource} />
|
<RayTable columns={this.columns} data={this.dataSource} />
|
||||||
</NSpace>
|
</NSpace>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
@ -165,11 +165,13 @@ export default defineConfig(async ({ mode }) => {
|
|||||||
output: {
|
output: {
|
||||||
manualChunks: (id) => {
|
manualChunks: (id) => {
|
||||||
if (id.includes('node_modules')) {
|
if (id.includes('node_modules')) {
|
||||||
|
const index = id.includes('pnpm') ? 1 : 0
|
||||||
|
|
||||||
return id
|
return id
|
||||||
.toString()
|
.toString()
|
||||||
.split('node_modules/')[1]
|
.split('node_modules/')[1]
|
||||||
.split('/')[1]
|
.split('/')
|
||||||
.toString()
|
[index].toString()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user