feat(视图): 1.丰富chart种类；2.echarts option封装；3.增加一些不太好看的svg作为图表类型icon-font

f891dc5a · junjie · 760b05e2 · f891dc5a · f891dc5a · f891dc5a
--- a/frontend/src/icons/svg/bar-horizontal.svg
+++ b/frontend/src/icons/svg/bar-horizontal.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054957891" class="icon" viewBox="0 0 1072 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1374" xmlns:xlink="http://www.w3.org/1999/xlink" width="209.375" height="200"><defs><style type="text/css"></style></defs><path d="M150.528 77.482667v207.286857H623.177143l2.998857-207.286857zM1023.853714 380.830476H150.528v207.286857h867.791238zM820.711619 684.178286H150.528v207.286857h665.916952z" p-id="1375"></path><path d="M115.151238 943.079619V0.146286h-41.203809v994.377143h996.10819v-51.44381H115.151238z" fill="#8a8a8a" p-id="1376"></path></svg>
--- a/frontend/src/icons/svg/bar-stack-horizontal.svg
+++ b/frontend/src/icons/svg/bar-stack-horizontal.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616055514308" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4523" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1004.202667 396.168533H19.677867c-8.97024 0-16.264533 7.294293-16.264534 16.145067v199.48544c0 8.973653 7.294293 16.145067 16.264534 16.145067h984.64768c8.97024 0 16.264533-7.294293 16.264533-16.145067v-199.48544a16.366933 16.366933 0 0 0-16.387413-16.145067z m-81.926827 150.21056H369.261227c-19.131733 0-34.679467-15.547733-34.679467-34.679466s15.547733-34.686293 34.679467-34.686294h553.018026c19.131733 0 34.679467 15.55456 34.679467 34.686294 0 19.135147-15.54432 34.679467-34.68288 34.679466zM1004.202667 94.306987H19.677867A16.2816 16.2816 0 0 0 3.413333 110.574933v199.48544c0 8.97024 7.294293 16.145067 16.264534 16.145067h984.64768c8.97024 0 16.264533-7.30112 16.264533-16.145067V110.452053c-0.12288-8.850773-7.417173-16.145067-16.387413-16.145066z m-81.926827 150.575786h-205.71136c-19.12832 0-34.68288-15.55456-34.68288-34.686293s15.55456-34.679467 34.68288-34.679467h205.71136c19.131733 0 34.679467 15.547733 34.679467 34.679467s-15.540907 34.686293-34.679467 34.686293zM1004.202667 697.914027H19.677867c-8.97024 0-16.264533 7.181653-16.264534 16.145066v199.48544c0 8.966827 7.294293 16.145067 16.264534 16.145067h984.64768c8.97024 0 16.264533-7.30112 16.264533-16.145067v-199.365973c-0.12288-8.97024-7.417173-16.264533-16.387413-16.264533z m-81.926827 150.572373H547.9424c-19.135147 0-34.686293-15.547733-34.686293-34.679467s15.547733-34.686293 34.686293-34.686293h374.336853c19.131733 0 34.679467 15.55456 34.679467 34.686293 0 19.254613-15.54432 34.679467-34.68288 34.679467z" p-id="4524"></path></svg>
--- a/frontend/src/icons/svg/bar-stack.svg
+++ b/frontend/src/icons/svg/bar-stack.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054999656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2027" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M268.04419 302.762667H59.879619c-19.114667 0-34.694095 15.579429-34.694095 34.694095v624.469333c0 19.041524 15.60381 34.694095 34.694095 34.694095h208.164571c19.114667 0 34.694095-15.652571 34.694096-34.694095V337.456762c0-19.114667-15.60381-34.694095-34.694096-34.694095z m0 624.469333H59.879619V649.679238h208.164571v277.552762zM614.985143 163.986286h-208.164572c-19.114667 0-34.694095 15.579429-34.694095 34.694095v763.245714c0 19.041524 15.60381 34.694095 34.694095 34.694095h208.164572c19.114667 0 34.694095-15.652571 34.694095-34.694095V198.704762c0-19.114667-15.579429-34.694095-34.694095-34.694095z m0 763.245714h-208.164572v-346.940952h208.164572v346.940952zM961.950476 25.209905h-208.164571c-19.114667 0-34.718476 15.579429-34.718476 34.694095v902.022095c0 19.041524 15.60381 34.694095 34.718476 34.694095h208.164571c19.114667 0 34.694095-15.652571 34.694095-34.694095V59.904c0-19.114667-15.60381-34.694095-34.694095-34.694095z m0 902.022095h-208.164571V510.902857h208.164571v416.329143z" p-id="2028"></path></svg>
--- a/frontend/src/icons/svg/bar.svg
+++ b/frontend/src/icons/svg/bar.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054813530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M95.743954 952.636499h914.090232a14.360374 14.360374 0 0 1 14.165326 13.775231v43.812551a14.019041 14.019041 0 0 1-14.140945 13.775231H38.521886a14.238469 14.238469 0 0 1-14.140945-14.140945V38.521886A14.360374 14.360374 0 0 1 38.156172 24.380941h43.812551c7.631234 0 13.775232 6.436568 13.775231 14.140945v914.114613zM163.839922 402.529332c0-20.284943 14.969898-36.79084 35.206078-36.790839h69.071206c19.455991 0 35.206078 16.993516 35.206078 36.81522v438.369315c0.097524 9.801138-3.535236 19.309705-10.215614 26.209511a33.840746 33.840746 0 0 1-24.990464 10.60571H199.070381c-19.382848-0.219428-35.011031-16.505897-35.206078-36.815221V402.529332z m209.212853-269.482538c0-19.6998 14.994279-35.49865 35.206078-35.49865h69.071205a35.596174 35.596174 0 0 1 35.206079 35.49865v709.192805c0.097524 9.508567-3.63276 18.627039-10.215614 25.307416A34.303984 34.303984 0 0 1 477.37882 877.713868h-69.071205c-19.358467 0-35.108555-15.920754-35.206078-35.596174V133.022413z m232.594175 415.378088c0-20.089895 14.945517-36.400745 35.157316-36.400745h69.022444c19.455991 0 35.181698 15.701326 35.181697 36.400745v292.912622c0.097524 9.801138-3.63276 19.1878-10.288757 25.990083A33.621317 33.621317 0 0 1 709.729186 877.713868h-68.998063a33.645698 33.645698 0 0 1-24.89294-10.410662 37.205316 37.205316 0 0 1-10.313138-25.990083V548.400501h0.097524z m209.115329-196.388478c0-19.334086 14.969898-35.059793 35.206078-35.059793h69.071205c19.455991 0 35.206078 16.091421 35.206079 35.059793v490.642052c0 19.334086-14.994279 35.059793-35.206079 35.059793h-69.071205a35.376745 35.376745 0 0 1-35.206078-35.059793V352.012023z" p-id="854"></path></svg>
--- a/frontend/src/icons/svg/funnel.svg
+++ b/frontend/src/icons/svg/funnel.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616055024589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2204" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M904.97219 357.595429L786.041905 690.785524H262.363429L143.36 357.595429h761.58781z m29.769143-83.309715L1024 24.380952H24.380952l89.234286 249.904762h821.150476z m-178.492952 499.809524L667.014095 1024H381.366857l-89.234286-249.904762h464.091429z" p-id="2205"></path></svg>
--- a/frontend/src/icons/svg/line.svg
+++ b/frontend/src/icons/svg/line.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054974287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1552" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M176.664381 916.309333H1024V999.619048H24.380952V0h83.309715v869.571048l271.286857-380.781715L646.826667 616.838095 903.972571 136.533333l73.435429 39.326477-294.716952 550.521904-276.48-132.242285z" p-id="1553"></path></svg>
--- a/frontend/src/icons/svg/pie.svg
+++ b/frontend/src/icons/svg/pie.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054982578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1729" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M549.254095 0.219429v469.430857h469.430857C1018.684952 214.211048 804.693333 0.219429 549.254095 0.219429z" p-id="1730"></path><path d="M494.031238 517.973333V48.542476c-262.339048 0-469.430857 214.016-469.430857 469.430857 0 255.439238 213.991619 469.430857 469.430857 469.430857 262.339048 0 469.430857-213.991619 469.430857-469.430857H494.031238z" fill="#8a8a8a" p-id="1731"></path></svg>
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -614,7 +614,8 @@ export default {
    color_gentle: '柔和',
    color_elegant: '淡雅',
    color_technology: '科技',
-    color_simple: '简洁'
+    color_simple: '简洁',
+    not_alpha: '不透明度'
  },
  dataset: {
    datalist: '数据集',

--- a/frontend/src/views/chart/chart/bar/bar.js
+++ b/frontend/src/views/chart/chart/bar/bar.js
+import { hexColorToRGBA } from '../util.js'
+
+export function baseBarOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    chart_option.xAxis.data = chart.data.x
+    for (let i = 0; i < chart.data.series.length; i++) {
+      const y = chart.data.series[i]
+      y.itemStyle = {
+        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+      }
+      y.type = 'bar'
+      chart_option.legend.data.push(y.name)
+      chart_option.series.push(y)
+    }
+  }
+  // console.log(chart_option);
+  return chart_option
+}
+
+export function stackBarOption(chart_option, chart) {
+  baseBarOption(chart_option, chart)
+
+  // ext
+  chart_option.series.forEach(function(s) {
+    s.stack = 'stack'
+    s.emphasis = {
+      focus: 'series'
+    }
+  })
+  return chart_option
+}
+
+export function horizontalBarOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    chart_option.yAxis.data = chart.data.x
+    for (let i = 0; i < chart.data.series.length; i++) {
+      const y = chart.data.series[i]
+      y.itemStyle = {
+        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+      }
+      y.type = 'bar'
+      chart_option.legend.data.push(y.name)
+      chart_option.series.push(y)
+    }
+  }
+  // console.log(chart_option);
+  return chart_option
+}
+
+export function horizontalStackBarOption(chart_option, chart) {
+  horizontalBarOption(chart_option, chart)
+
+  // ext
+  chart_option.series.forEach(function(s) {
+    s.stack = 'stack'
+    s.emphasis = {
+      focus: 'series'
+    }
+  })
+  return chart_option
+}
--- a/frontend/src/views/chart/chart/bar/baseBar.js
+++ b/frontend/src/views/chart/chart/bar/baseBar.js
-export function baseBarOption(chart_option, chart) {
-// 处理data
-  if (chart.data) {
-    chart_option.title.text = chart.title
-    chart_option.xAxis.data = chart.data.x
-    chart.data.series.forEach(function(y) {
-      chart_option.legend.data.push(y.name)
-      chart_option.series.push(y)
-    })
-  }
-  // console.log(chart_option);
-  // 处理shape attr
-  if (chart.customAttr) {
-    const customAttr = JSON.parse(chart.customAttr)
-    if (customAttr.color) {
-      chart_option.color = customAttr.color.colors
-    }
-  }
-  return chart_option
-}
-
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
 export const DEFAULT_COLOR_CASE = {
  value: 'default',
-  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+  alpha: 100
 }
 export const BASE_BAR = {
  title: {
@@ -18,6 +19,22 @@ export const BASE_BAR = {
  },
  series: []
 }
+export const HORIZONTAL_BAR = {
+  title: {
+    text: ''
+  },
+  tooltip: {},
+  legend: {
+    data: []
+  },
+  xAxis: {
+    type: 'value'
+  },
+  yAxis: {
+    data: []
+  },
+  series: []
+}

 export const BASE_LINE = {
  title: {
@@ -36,6 +53,78 @@ export const BASE_LINE = {
  series: []
 }

-export default {
-  BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
+export const BASE_PIE = {
+  title: {
+    text: ''
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {},
+  series: [
+    {
+      name: '',
+      type: 'pie',
+      radius: ['0%', '60%'],
+      avoidLabelOverlap: false,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      data: []
+    }
+  ]
+}
+
+export const BASE_FUNNEL = {
+  title: {
+    text: ''
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    // data: []
+  },
+  series: [
+    {
+      name: '',
+      type: 'funnel',
+      left: '10%',
+      top: 60,
+      bottom: 60,
+      width: '80%',
+      min: 0,
+      max: 100,
+      minSize: '0%',
+      maxSize: '100%',
+      sort: 'descending',
+      gap: 1,
+      // label: {
+      //   show: true,
+      //   position: 'inside'
+      // },
+      labelLine: {
+        length: 10,
+        lineStyle: {
+          width: 1,
+          type: 'solid'
+        }
+      },
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      emphasis: {
+        label: {
+          fontSize: 20
+        }
+      },
+      data: []
+    }
+  ]
 }
--- a/frontend/src/views/chart/chart/funnel/funnel.js
+++ b/frontend/src/views/chart/chart/funnel/funnel.js
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
+export function baseFunnelOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    if (chart.data.series.length > 0) {
+      chart_option.series[0].name = chart.data.series[0].name
+      const valueArr = chart.data.series[0].data
+      for (let i = 0; i < valueArr.length; i++) {
+        const y = {
+          name: chart.data.x[i],
+          value: valueArr[i]
+        }
+        y.itemStyle = {
+          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        }
+        y.type = 'funnel'
+        chart_option.series[0].data.push(y)
+      }
+    }
+  }
+  // console.log(chart_option);
+  return chart_option
+}
+
--- a/frontend/src/views/chart/chart/line/baseLine.js
+++ b/frontend/src/views/chart/chart/line/baseLine.js
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
 export function baseLineOption(chart_option, chart) {
-// 处理data
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  // 处理data
  if (chart.data) {
    chart_option.title.text = chart.title
    chart_option.xAxis.data = chart.data.x
-    chart.data.series.forEach(function(y) {
+    for (let i = 0; i < chart.data.series.length; i++) {
+      const y = chart.data.series[i]
+      y.itemStyle = {
+        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+      }
+      y.type = 'line'
      chart_option.legend.data.push(y.name)
      chart_option.series.push(y)
-    })
-  }
-  // console.log(chart_option);
-  // 处理shape attr
-  if (chart.customAttr) {
-    const customAttr = JSON.parse(chart.customAttr)
-    if (customAttr.color) {
-      chart_option.color = customAttr.color.colors
    }
  }
+  // console.log(chart_option);
  return chart_option
 }

--- a/frontend/src/views/chart/chart/pie/pie.js
+++ b/frontend/src/views/chart/chart/pie/pie.js
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
+export function basePieOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    if (chart.data.series.length > 0) {
+      chart_option.series[0].name = chart.data.series[0].name
+      const valueArr = chart.data.series[0].data
+      for (let i = 0; i < valueArr.length; i++) {
+        const y = {
+          name: chart.data.x[i],
+          value: valueArr[i]
+        }
+        y.itemStyle = {
+          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        }
+        y.type = 'pie'
+        chart_option.series[0].data.push(y)
+      }
+    }
+  }
+  // console.log(chart_option);
+  return chart_option
+}
+
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
+export function hexColorToRGBA(hex, alpha) {
+  const rgb = [] // 定义rgb数组
+  if (/^\#[0-9A-F]{3}$/i.test(hex)) { // 判断传入是否为#三位十六进制数
+    let sixHex = '#'
+    hex.replace(/[0-9A-F]/ig, function(kw) {
+      sixHex += kw + kw // 把三位16进制数转化为六位
+    })
+    hex = sixHex // 保存回hex
+  }
+  if (/^#[0-9A-F]{6}$/i.test(hex)) { // 判断传入是否为#六位十六进制数
+    hex.replace(/[0-9A-F]{2}/ig, function(kw) {
+      rgb.push(eval('0x' + kw)) // 十六进制转化为十进制并存如数组
+    })
+    return `rgba(${rgb.join(',')},${alpha / 100})` // 输出RGB格式颜色
+  } else {
+    console.log(`Input ${hex} is wrong!`)
+    return 'rgb(0,0,0)'
+  }
+}
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -5,9 +5,11 @@
 </template>

 <script>
-import { BASE_BAR, BASE_LINE } from '../chart/chart'
-import { baseBarOption } from '../chart/bar/baseBar'
-import { baseLineOption } from '../chart/line/baseLine'
+import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL } from '../chart/chart'
+import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
+import { baseLineOption } from '../chart/line/line'
+import { basePieOption } from '../chart/pie/pie'
+import { baseFunnelOption } from '../chart/funnel/funnel'

 export default {
  name: 'ChartComponent',
@@ -38,8 +40,18 @@ export default {
      // todo type
      if (chart.type === 'bar') {
        chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
+      } else if (chart.type === 'bar-stack') {
+        chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
+      } else if (chart.type === 'bar-horizontal') {
+        chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
+      } else if (chart.type === 'bar-horizontal-stack') {
+        chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
      } else if (chart.type === 'line') {
        chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
+      } else if (chart.type === 'pie') {
+        chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
+      } else if (chart.type === 'funnel') {
+        chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
      }
      // console.log(chart_option);
      this.myEcharts(chart_option)

--- a/frontend/src/views/chart/components/ColorSelector.vue
+++ b/frontend/src/views/chart/components/ColorSelector.vue
@@ -18,6 +18,9 @@
                </el-option>
              </el-select>
            </el-form-item>
+            <el-form-item :label="$t('chart.not_alpha')" class="form-item">
+              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
+            </el-form-item>
          </el-form>
        </el-col>
        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
@@ -86,7 +89,8 @@ export default {
        }
      ],
      colorForm: {
-        colorCase: 'default'
+        colorCase: 'default',
+        alpha: 100
      }
    }
  },
@@ -98,6 +102,7 @@ export default {
          const customAttr = JSON.parse(chart.customAttr)
          if (customAttr.color) {
            this.colorForm.colorCase = customAttr.color.value
+            this.colorForm.alpha = customAttr.color.alpha
          }
        }
      }
@@ -113,7 +118,8 @@ export default {
      })
      this.$emit('onColorChange', {
        value: items[0].value,
-        colors: items[0].colors
+        colors: items[0].colors,
+        alpha: this.colorForm.alpha
      })
    }
  }

--- a/frontend/src/views/chart/components/QuotaItem.vue
+++ b/frontend/src/views/chart/components/QuotaItem.vue
@@ -24,10 +24,10 @@
          <el-dropdown-item icon="el-icon-s-grid">
            <el-dropdown placement="right-start" size="mini" @command="quickCalc">
              <span class="el-dropdown-link">
-                {{ $t('chart.quick_calc') }}<span class="summary-span">(test)</span><i class="el-icon-arrow-right el-icon--right" />
+                {{ $t('chart.quick_calc') }}<span class="summary-span">(无)</span><i class="el-icon-arrow-right el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="beforeQuickCalc('none')">test</el-dropdown-item>
+                <el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>

--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -79,8 +79,13 @@
          <el-row>
            <div class="chart-type">
              <!--TODO 这里要替换好看点的图标-->
-              <el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px" /></el-radio>
-              <el-radio v-model="view.type" label="line">折线图</el-radio>
+              <el-radio v-model="view.type" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
+              <el-radio v-model="view.type" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
+              <el-radio v-model="view.type" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
+              <el-radio v-model="view.type" label="bar-horizontal-stack"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
+              <el-radio v-model="view.type" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
+              <el-radio v-model="view.type" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
+              <el-radio v-model="view.type" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
            </div>
          </el-row>
        </div>
@@ -248,6 +253,11 @@ export default {
          ele.summary = 'sum'
        }
      })
+      if (view.type.startsWith('pie') || view.type.startsWith('funnel')) {
+        if (view.yaxis.length > 1) {
+          view.yaxis.splice(1, view.yaxis.length)
+        }
+      }
      view.xaxis = JSON.stringify(view.xaxis)
      view.yaxis = JSON.stringify(view.yaxis)
      view.customAttr = JSON.stringify(view.customAttr)
@@ -374,7 +384,7 @@ export default {
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
  .padding-lr {
    padding: 0 6px;
  }
@@ -445,7 +455,27 @@ export default {
    height: calc(100% - 6px);
  }

+  .chart-type{
+    padding: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .chart-icon{
+    width: 20px;
+    height: 20px;
+  }
+
  .chart-type>>>.el-radio__input{
    display: none;
  }
+
+  .el-radio{
+    margin:6px;
+  }
+
+  .el-radio>>>.el-radio__label{
+    padding-left: 0;
+  }
 </style>