构建版本修改

components/AiEchart/template/bar/barChart1.js

@@ -0,0 +1,91 @@
+export default {
+  legend: {
+    right: 0,
+    itemHeight: 5,
+    itemWidth: 16,
+    textStyle: { color: '#fff' }
+  },
+  yAxis: {
+    nameGap: 23,
+    minInterval: 1,
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+    axisLabel: { color: '#fff' },
+    axisPointer: { show: false }
+  },
+  axisPointer: {
+    type: 'shadow',
+    triggerTooltip: false,
+    shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
+  },
+  color: [
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(66, 187, 255, 1)' },
+        { offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(66, 255, 254, 1)' },
+        { offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(97, 253, 185, 1)' },
+        { offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(253, 108, 57, 1)' },
+        { offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(248, 187, 25, 1)' },
+        { offset: 1, color: 'rgba(55, 39, 5, 1)' }
+      ]
+    }
+  ],
+  daemon: {
+    type: 'bar',
+    label: {
+      show: true,
+      position: 'top',
+      color: '#fff',
+      formatter: e => {
+        return e.data[e.seriesName] || ''
+      }
+    },
+    barWidth: 16,
+    barCategoryGap: 40,
+    itemStyle: {}
+  }
+}

components/AiEchart/template/bar/barChart2.js

@@ -0,0 +1,24 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'shadow', show: true,
+    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
+  },
+  daemon: {type: 'bar', barWidth: 2, barGap: 4}
+}

components/AiEchart/template/bar/barChart3.js

@@ -0,0 +1,33 @@
+export default {
+  legend: {show: false},
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'none', show: true, triggerTooltip: false,
+  },
+  daemon: {
+    type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
+    barWidth: 24,
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(123, 165, 255, .2)'
+    },
+    itemStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
+        colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}]
+      }
+    },
+    emphasis: {
+      itemStyle: {
+        color: {
+          type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
+          colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
+        }
+      }
+    }
+  }
+}

components/AiEchart/template/bar/barChart5.js

@@ -0,0 +1,23 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'none', show: true, triggerTooltip: false,
+  },
+  daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
+}

components/AiEchart/template/bar/barChart7.js

@@ -0,0 +1,45 @@
+export default {
+  legend: {show: false},
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
+    axisPointer: {
+      type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
+      label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
+    }
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14},
+    axisTick: {show: false},
+    axisLine: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10, barGap: '40%',
+    label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(123, 165, 255, .2)'
+    },
+    itemStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+        colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
+      }
+    },
+    emphasis: {
+      label: {color: '#28FBFF', position: 'right'},
+      itemStyle: {
+        color: {
+          type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+          colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
+        }
+      }
+    }
+  }
+}

components/AiEchart/template/bar/barChart8.js

@@ -0,0 +1,36 @@
+import tools from "../tools";
+
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14},
+    axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
+    axisPointer: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10,
+    itemStyle: {
+      color: ({color}) => ({
+        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+        colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
+      })
+    },
+  }
+}

components/AiEchart/template/bar/barChart9.js

@@ -0,0 +1,29 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 80, right: 0
+  },
+  tooltip: {
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14, margin: 23},
+    axisTick: {show: false},
+    axisLine: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
+    showBackground: true,
+    backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
+  }
+}