Commit 77e78622460aa63574a138d3e94096ad68aaf55a
1 parent
5afe5d30
1、添加环形图。
2、一些已知问题修复
Showing
5 changed files
with
23 additions
and
14 deletions
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js renamed to src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-active-ring-chart.js
| ... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 | */ |
| 4 | 4 | export const widgetActiveRingChart= { |
| 5 | 5 | code: 'widget-active-ring-chart', |
| 6 | - type: 'percent', | |
| 6 | + type: 'pieChart', | |
| 7 | 7 | tabName: '百分比', |
| 8 | 8 | label: '动态环图', |
| 9 | 9 | icon: 'iconicon_tubiao_bingtu', |
| ... | ... | @@ -24,7 +24,7 @@ export const widgetActiveRingChart= { |
| 24 | 24 | name: 'radius', |
| 25 | 25 | required: false, |
| 26 | 26 | placeholder: '', |
| 27 | - value: 50, | |
| 27 | + value: 75, | |
| 28 | 28 | }, |
| 29 | 29 | { |
| 30 | 30 | type: 'el-slider', |
| ... | ... | @@ -32,7 +32,7 @@ export const widgetActiveRingChart= { |
| 32 | 32 | name: 'activeRadius', |
| 33 | 33 | required: false, |
| 34 | 34 | placeholder: '', |
| 35 | - value: 55, | |
| 35 | + value: 85, | |
| 36 | 36 | }, |
| 37 | 37 | { |
| 38 | 38 | type: 'el-input-number', |
| ... | ... | @@ -40,7 +40,7 @@ export const widgetActiveRingChart= { |
| 40 | 40 | name: 'lineWidth', |
| 41 | 41 | required: false, |
| 42 | 42 | placeholder: '', |
| 43 | - value: 20, | |
| 43 | + value: 40, | |
| 44 | 44 | }, |
| 45 | 45 | { |
| 46 | 46 | type: 'el-input-number', |
| ... | ... | @@ -98,7 +98,7 @@ export const widgetActiveRingChart= { |
| 98 | 98 | label: '', |
| 99 | 99 | name: 'customColor', |
| 100 | 100 | required: false, |
| 101 | - value: [{ color: '#1E90FF'},{ color: '#77FF00' },{ color: '#7700BB' },{ color: '#FF0088' },{ color: '#CC00CC' }], | |
| 101 | + value: [{ color: '#0CD2E6' }, { color: '#00BFA5' }, { color: '#FFC722' }, { color: '#886EFF' }, { color: '#008DEC' }], | |
| 102 | 102 | }, |
| 103 | 103 | ], |
| 104 | 104 | }], |
| ... | ... | @@ -190,7 +190,7 @@ export const widgetActiveRingChart= { |
| 190 | 190 | relactiveDom: 'dataType', |
| 191 | 191 | relactiveDomValue: 'dynamicData', |
| 192 | 192 | chartType: 'widget-active-ring-chart', |
| 193 | - dictKey: 'TEXT_PROPERTIES', | |
| 193 | + dictKey: 'PIE_PROPERTIES', | |
| 194 | 194 | value: '', |
| 195 | 195 | }, |
| 196 | 196 | ], | ... | ... |
src/views/bigscreenDesigner/designer/tools/main.js
| ... | ... | @@ -46,7 +46,7 @@ import { widgetProgress } from "./configure/percentCharts/widget-progress"; |
| 46 | 46 | import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond"; |
| 47 | 47 | import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop"; |
| 48 | 48 | import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board"; |
| 49 | -import {widgetActiveRingChart} from "./configure/percentCharts/widget-active-ring-chart"; | |
| 49 | +import {widgetActiveRingChart} from "./configure/pieCharts/widget-active-ring-chart"; | |
| 50 | 50 | |
| 51 | 51 | |
| 52 | 52 | export const widgetTool = [ | ... | ... |
src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue renamed to src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue
| ... | ... | @@ -20,10 +20,10 @@ export default { |
| 20 | 20 | return { |
| 21 | 21 | //返回图标数据 |
| 22 | 22 | options: { |
| 23 | - radius:'50%',//环半径 | |
| 24 | - activeRadius:'55%',//环半径(动态) | |
| 23 | + radius:'75%',//环半径 | |
| 24 | + activeRadius:'85%',//环半径(动态) | |
| 25 | 25 | data:[],//环数据 |
| 26 | - lineWidth:20,//环数据 | |
| 26 | + lineWidth:40,//环数据 | |
| 27 | 27 | activeTimeGap:3000,//切换间隔(ms) |
| 28 | 28 | color:[],//环颜色 |
| 29 | 29 | digitalFlopStyle: { |
| ... | ... | @@ -43,7 +43,7 @@ export default { |
| 43 | 43 | }, |
| 44 | 44 | computed: { |
| 45 | 45 | styleObj() { |
| 46 | - return { | |
| 46 | + const style ={ | |
| 47 | 47 | position: this.ispreview ? "absolute" : "static", |
| 48 | 48 | width: this.optionsStyle.width + "px", |
| 49 | 49 | height: this.optionsStyle.height + "px", |
| ... | ... | @@ -51,6 +51,7 @@ export default { |
| 51 | 51 | top: this.optionsStyle.top + "px", |
| 52 | 52 | background: this.optionsSetup.background |
| 53 | 53 | }; |
| 54 | + return style; | |
| 54 | 55 | }, |
| 55 | 56 | }, |
| 56 | 57 | watch: { |
| ... | ... | @@ -100,7 +101,7 @@ export default { |
| 100 | 101 | fontStyle.fill=optionsSetup.fill; |
| 101 | 102 | fontStyle.fontSize=optionsSetup.fontSize; |
| 102 | 103 | fontStyle.fontWeight=optionsSetup.fontWeight; |
| 103 | - this.options.digitalFlopToFixed = fontStyle; | |
| 104 | + this.options.digitalFlopStyle = fontStyle; | |
| 104 | 105 | }, |
| 105 | 106 | // 配置修改 |
| 106 | 107 | setOptionsConfig() { |
| ... | ... | @@ -114,6 +115,7 @@ export default { |
| 114 | 115 | this.options.animationFrame = optionsSetup.animationFrame; |
| 115 | 116 | this.options.showOriginValue = optionsSetup.showOriginValue; |
| 116 | 117 | //改变options |
| 118 | + // console.log("配置修改:",this.styleObj); | |
| 117 | 119 | this.options={...this.options}; |
| 118 | 120 | }, |
| 119 | 121 | //数据类型 |
| ... | ... | @@ -153,3 +155,10 @@ export default { |
| 153 | 155 | }; |
| 154 | 156 | |
| 155 | 157 | </script> |
| 158 | +<style scoped lang="scss"> | |
| 159 | +.echarts { | |
| 160 | + width: 100%; | |
| 161 | + height: 100%; | |
| 162 | + overflow: hidden; | |
| 163 | +} | |
| 164 | +</style> | ... | ... |
src/views/bigscreenDesigner/designer/widget/temp.vue
| ... | ... | @@ -50,7 +50,7 @@ import widgetCapsuleChart from "./bar/widgetCapsuleChart"; |
| 50 | 50 | import widgetWaterLevelPond from "./text/widgetWaterLevelPond"; |
| 51 | 51 | import widgetDigitalFlop from "./text/widgetDigitalFlop"; |
| 52 | 52 | import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard"; |
| 53 | -import widgetActiveRingChart from "./percent/widgetActiveRingChart"; | |
| 53 | +import widgetActiveRingChart from "./pie/widgetActiveRingChart"; | |
| 54 | 54 | |
| 55 | 55 | |
| 56 | 56 | export default { | ... | ... |
src/views/bigscreenDesigner/designer/widget/widget.vue
| ... | ... | @@ -55,7 +55,7 @@ import widgetProgress from "./percent/widgetProgress"; |
| 55 | 55 | import widgetWaterLevelPond from "./text/widgetWaterLevelPond"; |
| 56 | 56 | import widgetDigitalFlop from "./text/widgetDigitalFlop"; |
| 57 | 57 | import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard"; |
| 58 | -import widgetActiveRingChart from "./percent/widgetActiveRingChart"; | |
| 58 | +import widgetActiveRingChart from "./pie/widgetActiveRingChart"; | |
| 59 | 59 | export default { |
| 60 | 60 | name: "Widget", |
| 61 | 61 | components: { | ... | ... |