Commit 4676eea6fdbffd2e6e299f16ff5593d54d5e1317
1 parent
cae34e76
perf(src/packages): 信息里更多新增自定义echarts组件
Showing
3 changed files
with
120 additions
and
4 deletions
... | ... | @@ -5,8 +5,124 @@ import { CustomEchartsConfig } from './index' |
5 | 5 | import cloneDeep from 'lodash/cloneDeep' |
6 | 6 | |
7 | 7 | export const option = { |
8 | - //数据源设置 | |
9 | - dataset: "{}" | |
8 | + //数据源设置 默认设置一个 | |
9 | + dataset: ` | |
10 | + { | |
11 | + backgroundColor: 'transparent', | |
12 | + tooltip: { | |
13 | + trigger: 'none' | |
14 | + }, | |
15 | + xAxis: { | |
16 | + data: ["百分比"], | |
17 | + axisTick: { | |
18 | + show: false | |
19 | + }, | |
20 | + axisLine: { | |
21 | + show: false | |
22 | + }, | |
23 | + axisLabel: { | |
24 | + show: false, | |
25 | + textStyle: { | |
26 | + color: '#e54035' | |
27 | + } | |
28 | + } | |
29 | + }, | |
30 | + yAxis: { | |
31 | + splitLine: { | |
32 | + show: false | |
33 | + }, | |
34 | + axisTick: { | |
35 | + show: false | |
36 | + }, | |
37 | + axisLine: { | |
38 | + show: false | |
39 | + }, | |
40 | + axisLabel: { | |
41 | + show: false | |
42 | + } | |
43 | + }, | |
44 | + series: [{ | |
45 | + name: '最上层立体圆', | |
46 | + type: 'pictorialBar', | |
47 | + symbolSize: [300, 45], | |
48 | + symbolOffset: [0, -20], | |
49 | + z: 12, | |
50 | + itemStyle: { | |
51 | + normal: { | |
52 | + color: '#363F5E' | |
53 | + } | |
54 | + }, | |
55 | + data: [{ | |
56 | + value: 100, | |
57 | + symbolPosition: 'end' | |
58 | + }] | |
59 | + }, { | |
60 | + name: '中间立体圆', | |
61 | + type: 'pictorialBar', | |
62 | + symbolSize: [300, 45], | |
63 | + symbolOffset: [0, -20], | |
64 | + z: 12, | |
65 | + itemStyle: { | |
66 | + normal: { | |
67 | + color: '#2B5B4D' | |
68 | + } | |
69 | + }, | |
70 | + data: [{ | |
71 | + value: 30, | |
72 | + symbolPosition: 'end' | |
73 | + }] | |
74 | + }, { | |
75 | + name: '最底部立体圆', | |
76 | + type: 'pictorialBar', | |
77 | + symbolSize: [300, 45], | |
78 | + symbolOffset: [0, 20], | |
79 | + z: 12, | |
80 | + itemStyle: { | |
81 | + normal: { | |
82 | + color: '#01CC04' | |
83 | + } | |
84 | + }, | |
85 | + data: [101 - 40] | |
86 | + }, { | |
87 | + //底部立体柱 | |
88 | + stack: '1', | |
89 | + type: 'bar', | |
90 | + itemStyle: { | |
91 | + normal: { | |
92 | + color: '#01CC04', | |
93 | + opacity: .7 | |
94 | + } | |
95 | + }, | |
96 | + label: { | |
97 | + show: true, | |
98 | + position: "top", | |
99 | + distance: 15, | |
100 | + color: "#FFFE00", | |
101 | + fontSize:50, | |
102 | + formatter:'{c}'+'%' | |
103 | + }, | |
104 | + | |
105 | + silent: true, | |
106 | + barWidth: 300, | |
107 | + barGap: '-100%', // Make series be overlap | |
108 | + data: [30] | |
109 | + }, { | |
110 | + //上部立体柱 | |
111 | + stack: '1', | |
112 | + type: 'bar', | |
113 | + itemStyle: { | |
114 | + normal: { | |
115 | + color: '#36405E', | |
116 | + opacity: .7 | |
117 | + } | |
118 | + }, | |
119 | + silent: true, | |
120 | + barWidth: 300, | |
121 | + barGap: '-100%', // Make series be overlap | |
122 | + data: [100 - 30] | |
123 | + }] | |
124 | +} | |
125 | + ` | |
10 | 126 | } |
11 | 127 | |
12 | 128 | export default class Config extends PublicConfigClass implements CreateComponentType { | ... | ... |
1 | 1 | <template> |
2 | 2 | <collapse-item name="数据源" :expanded="true"> |
3 | - <monaco-editor v-model:modelValue="optionData.dataset" width="460px" height="380px" language="json" /> | |
3 | + <monaco-editor v-model:modelValue="optionData.dataset" width="400px" height="480px" language="json" /> | |
4 | 4 | </collapse-item> |
5 | 5 | </template> |
6 | 6 | ... | ... |
... | ... | @@ -53,7 +53,7 @@ const option = computed(() => { |
53 | 53 | |
54 | 54 | const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) |
55 | 55 | |
56 | -const updateVChart = (dataset: any) => { | |
56 | +const updateVChart = (dataset: object) => { | |
57 | 57 | new Promise(resolve => { |
58 | 58 | setTimeout(() => { |
59 | 59 | resolve( | ... | ... |