Browse Source

fix:图表组件添加内边距

liu.shiyi 1 year ago
parent
commit
b8bc28ae7a
43 changed files with 88 additions and 3 deletions
  1. 4 3
      data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
  2. 2 0
      data-room-ui/packages/BizComponent/config/defaultEchartsConfig.js
  3. 2 0
      data-room-ui/packages/BizComponent/config/defaultG2Config.js
  4. 2 0
      data-room-ui/packages/G2Plots/折线图/基础折线图.js
  5. 2 0
      data-room-ui/packages/G2Plots/折线图/基础折线点图.js
  6. 2 0
      data-room-ui/packages/G2Plots/折线图/基础曲线图.js
  7. 2 0
      data-room-ui/packages/G2Plots/折线图/多折线动画图.js
  8. 2 0
      data-room-ui/packages/G2Plots/折线图/多折线图.js
  9. 2 0
      data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js
  10. 2 0
      data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js
  11. 2 0
      data-room-ui/packages/G2Plots/折线图/迷你基础折线图.js
  12. 2 0
      data-room-ui/packages/G2Plots/折线图/迷你面积图.js
  13. 2 0
      data-room-ui/packages/G2Plots/条形图/分组条形图.js
  14. 2 0
      data-room-ui/packages/G2Plots/条形图/基础条形图.js
  15. 2 0
      data-room-ui/packages/G2Plots/条形图/堆叠条形图.js
  16. 2 0
      data-room-ui/packages/G2Plots/柱状图/分组柱状图.js
  17. 2 0
      data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js
  18. 2 0
      data-room-ui/packages/G2Plots/柱状图/基础柱状图.js
  19. 2 0
      data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js
  20. 2 0
      data-room-ui/packages/G2Plots/漏斗图/分面漏斗图.js
  21. 2 0
      data-room-ui/packages/G2Plots/漏斗图/基础漏斗图.js
  22. 2 0
      data-room-ui/packages/G2Plots/漏斗图/对比漏斗图.js
  23. 2 0
      data-room-ui/packages/G2Plots/玉珏图/基础玉珏图.js
  24. 2 0
      data-room-ui/packages/G2Plots/矩形树图/基础矩形树图.js
  25. 2 0
      data-room-ui/packages/G2Plots/词云图/词云图.js
  26. 2 0
      data-room-ui/packages/G2Plots/进度图/仪表盘.js
  27. 2 0
      data-room-ui/packages/G2Plots/进度图/圆角进度条.js
  28. 2 0
      data-room-ui/packages/G2Plots/进度图/水波图.js
  29. 2 0
      data-room-ui/packages/G2Plots/进度图/矩形水波图.js
  30. 2 0
      data-room-ui/packages/G2Plots/进度图/进度仪表盘.js
  31. 2 0
      data-room-ui/packages/G2Plots/进度图/进度指标环图.js
  32. 2 0
      data-room-ui/packages/G2Plots/进度图/进度条.js
  33. 2 0
      data-room-ui/packages/G2Plots/进度图/进度环图.js
  34. 2 0
      data-room-ui/packages/G2Plots/进度图/钻石水波图.js
  35. 2 0
      data-room-ui/packages/G2Plots/配置说明.md
  36. 2 0
      data-room-ui/packages/G2Plots/雷达图/分组雷达图.js
  37. 2 0
      data-room-ui/packages/G2Plots/雷达图/基础雷达图.js
  38. 2 0
      data-room-ui/packages/G2Plots/面积图/基础面积图.js
  39. 2 0
      data-room-ui/packages/G2Plots/面积图/堆叠面积图.js
  40. 2 0
      data-room-ui/packages/G2Plots/面积图/渐变色面积图.js
  41. 2 0
      data-room-ui/packages/G2Plots/饼图/基础环图.js
  42. 2 0
      data-room-ui/packages/G2Plots/饼图/基础饼图.js
  43. 2 0
      data-room-ui/packages/G2Plots/饼图/玫瑰图.js

+ 4 - 3
data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

@@ -52,8 +52,8 @@
               :key="settingIndex+1"
             >
               <el-form-item
-                :label="setting.type=== 'padding' ? '' : setting.label"
-                :label-width="setting.type=== 'padding' ? '0px' :'120px'"
+                :label="['padding','appendPadding'].includes(setting.type)? '' : setting.label"
+                :label-width="['padding','appendPadding'].includes(setting.type)? '0px' :'120px'"
               >
                 <el-input
                   v-if="setting.type === 'input'"
@@ -160,7 +160,7 @@
                   :step="0.01"
                 />
                 <PaddingSetting
-                  v-else-if="setting.type === 'padding'"
+                  v-else-if="setting.type === 'appendPadding'"
                   v-model="setting.value"
                 />
               </el-form-item>
@@ -211,6 +211,7 @@ export default {
         xAxis: 'X轴',
         yAxis: 'Y轴',
         padding: '边距',
+        appendPadding: '内边距',
         other: '其他'
 
       }

+ 2 - 0
data-room-ui/packages/BizComponent/config/defaultEchartsConfig.js

@@ -193,6 +193,8 @@ const data = [
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   //柱状图颜色
   color: '#007aff',

+ 2 - 0
data-room-ui/packages/BizComponent/config/defaultG2Config.js

@@ -433,6 +433,8 @@ const data = [
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   color: '',
   appendPadding: [16, 16, 16, 16], // 设置图标的边距

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/基础折线图.js

@@ -499,6 +499,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   color: '',
   xField: 'Date',

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/基础折线点图.js

@@ -488,6 +488,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'year',
   yField: 'value',

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/基础曲线图.js

@@ -390,6 +390,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   color: '',
   xField: 'Date',

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/多折线动画图.js

@@ -588,6 +588,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/多折线图.js

@@ -651,6 +651,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   smooth: true,
   data,

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js

@@ -537,6 +537,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   xField: 'year',

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js

@@ -602,6 +602,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/迷你基础折线图.js

@@ -91,6 +91,8 @@ const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[
 
 // 图表配置 new Line('domName', option)
 const option = {
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   xField:'',
   yField:'',
   data: [16, 95, 35, 27, 50, 36, 78, 99, 60, 62, 37],

+ 2 - 0
data-room-ui/packages/G2Plots/折线图/迷你面积图.js

@@ -115,6 +115,8 @@ const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[
 // 图表配置 new Line('domName', option)
 const option = {
   data: [16, 95, 35, 27, 50, 36, 78, 99, 60, 62, 37],
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   xField: '',
   yField: '',
   height: 60,

+ 2 - 0
data-room-ui/packages/G2Plots/条形图/分组条形图.js

@@ -573,6 +573,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   isGroup: true,

+ 2 - 0
data-room-ui/packages/G2Plots/条形图/基础条形图.js

@@ -588,6 +588,8 @@ const dataHandler = ``
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   xField: 'value',

+ 2 - 0
data-room-ui/packages/G2Plots/条形图/堆叠条形图.js

@@ -576,6 +576,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   isStack: true,

+ 2 - 0
data-room-ui/packages/G2Plots/柱状图/分组柱状图.js

@@ -579,6 +579,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   legendEnable: false,

+ 2 - 0
data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js

@@ -579,6 +579,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   xField: 'year',

+ 2 - 0
data-room-ui/packages/G2Plots/柱状图/基础柱状图.js

@@ -480,6 +480,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'type',
   yField: 'sales',

+ 2 - 0
data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js

@@ -517,6 +517,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   isStack: true,

+ 2 - 0
data-room-ui/packages/G2Plots/漏斗图/分面漏斗图.js

@@ -253,6 +253,8 @@ const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yFie
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],

+ 2 - 0
data-room-ui/packages/G2Plots/漏斗图/基础漏斗图.js

@@ -251,6 +251,8 @@ const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yFie
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],

+ 2 - 0
data-room-ui/packages/G2Plots/漏斗图/对比漏斗图.js

@@ -253,6 +253,8 @@ const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yFie
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],

+ 2 - 0
data-room-ui/packages/G2Plots/玉珏图/基础玉珏图.js

@@ -187,6 +187,8 @@ const dataHandler = ``
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'name',
   yField: 'star',

+ 2 - 0
data-room-ui/packages/G2Plots/矩形树图/基础矩形树图.js

@@ -203,6 +203,8 @@ const dataHandler = '// 转换数据格式\n' +
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],

+ 2 - 0
data-room-ui/packages/G2Plots/词云图/词云图.js

@@ -608,6 +608,8 @@ const dataHandler = 'let wordFieldValue = setting.find(settingItem=>settingItem.
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   wordField: 'x',
   weightField: 'value',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/仪表盘.js

@@ -217,6 +217,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   percent: 0.75,
   color1: 'l(0) 0:#6b74e4 1:#4391f4',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/圆角进度条.js

@@ -91,6 +91,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   height: 50,
   width: 400,

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/水波图.js

@@ -177,6 +177,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   color: '#598BF2',
   renderer: 'canvas',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/矩形水波图.js

@@ -175,6 +175,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   renderer: 'canvas',
   color: '#598BF2',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/进度仪表盘.js

@@ -191,6 +191,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   percent: 0.75,
   color1: 'l(0) 0:#6b74e4 1:#4391f4',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/进度指标环图.js

@@ -179,6 +179,8 @@ const dataHandler =
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   color1: 'l(0) 0:#6B74E3 1:#38BBE5',
   color2: '#d0d0d0',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/进度条.js

@@ -89,6 +89,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   height: 50,
   width: 400,

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/进度环图.js

@@ -193,6 +193,8 @@ const dataHandler =
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   color1: 'l(0) 0:#6B74E3 1:#38BBE5',
   color2: '#d0d0d0',

+ 2 - 0
data-room-ui/packages/G2Plots/进度图/钻石水波图.js

@@ -174,6 +174,8 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 // 图表配置 new Liquid('domName', option)
 const option = {
   renderer: 'canvas',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   color: '#598BF2',
   percent: 0.25,
   data,

+ 2 - 0
data-room-ui/packages/G2Plots/配置说明.md

@@ -137,6 +137,8 @@ const dataHandler = ``
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'year',
   yField: 'value',

+ 2 - 0
data-room-ui/packages/G2Plots/雷达图/分组雷达图.js

@@ -280,6 +280,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   xField: 'item',

+ 2 - 0
data-room-ui/packages/G2Plots/雷达图/基础雷达图.js

@@ -255,6 +255,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'name',
   yField: 'star',

+ 2 - 0
data-room-ui/packages/G2Plots/面积图/基础面积图.js

@@ -521,6 +521,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'Date',
   yField: 'scales',

+ 2 - 0
data-room-ui/packages/G2Plots/面积图/堆叠面积图.js

@@ -701,6 +701,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   xField: 'date',

+ 2 - 0
data-room-ui/packages/G2Plots/面积图/渐变色面积图.js

@@ -584,6 +584,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   data,
   xField: 'Date',
   yField: 'scales',

+ 2 - 0
data-room-ui/packages/G2Plots/饼图/基础环图.js

@@ -405,6 +405,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   angleField: 'value',

+ 2 - 0
data-room-ui/packages/G2Plots/饼图/基础饼图.js

@@ -250,6 +250,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   legendEnable: false,

+ 2 - 0
data-room-ui/packages/G2Plots/饼图/玫瑰图.js

@@ -191,6 +191,8 @@ const dataHandler = ''
 const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
   renderer: 'canvas',
   data,
   xField: 'type',