feat(chrt component): support color theme !#zh: echart 支持配色

ly525
1 parent 563e14b7
Showing 5 changed files with 50 additions and 15 deletions
front-end/h5/src/components/core/support/colors-panel.js
front-end/h5/src/components/core/support/csv-import.js
front-end/h5/src/components/core/support/excel.js
front-end/h5/src/components/core/support/index.js
front-end/h5/src/components/plugins/charts/line.js
+export default {
+  name: 'colors-panel',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  render () {
+    return <div>
+      {
+        this.value.map((colorString, index) => {
+          return <el-color-picker
+            size="small"
+            value={colorString}
+            onChange={newColorString => {
+              const colors = this.value.slice(0)
+              colors[index] = newColorString
+              this.$emit('change', colors)
+            }}
+          />
+        })
+      }
+    </div>
+  }
+}
@@ -63,8 +63,8 @@ export default {
   },
   render () {
     const randomId = +new Date()
-    return <div style="height: 50px;">
-      <label for={randomId} class="ant-btn ant-btn-primary ant-btn-sm">请选择CSV文件</label>
+    return <div style="height: 24px;">
+      <label for={randomId} class="ant-btn ant-btn-primary ant-btn-sm">选择导入 csv 文件</label>
       {/* <input id={randomId} style="visibility:hidden;" type="file"></input> */}
       <input ref="input" id={randomId} ref="csv" type="file" onChange={this.validFileMimeType} style="visibility:hidden;" name="csv">xxxx</input>
     </div>
@@ -46,11 +46,12 @@ export default {
     }
   },
   render () {
-    return <div>
-      <span>方案1: 选择导入 csv 文件</span>
-      <CsvImport onParse={this.parseCSV} />
-      <span>方案2: 直接编辑 Excel</span>
-      <div id="excel-wrapper" ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div>
+    return <div style="max-height: 320px;overflow:scroll;">
+      <div style="line-height:2;">
+        <span>方案1: <CsvImport onParse={this.parseCSV} /></span>
+        <span>方案2: 直接编辑 Excel</span>
+        <div id="excel-wrapper" ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div>
+      </div>
     </div>
   },
   mounted () {
@@ -14,6 +14,7 @@ import PropMultiTextItemsEditor from &#39;./prop-multi-items-editor/text.js&#39;
 import ImageGallery from './image-gallery/gallery.js'
 import VideoGallery from './video-gallery/gallery.js'
 import LbsExcelEditor from './excel'
+import ColorsPanel from './colors-panel'
 import LbpTextAlign from '@luban-h5/lbs-text-align'
  
 Vue.component(PropMultiTextItemsEditor.name, PropMultiTextItemsEditor)
@@ -21,3 +22,4 @@ Vue.component(ImageGallery.name, ImageGallery)
 Vue.component(VideoGallery.name, VideoGallery)
 Vue.component('lbs-text-align', LbpTextAlign)
 Vue.component(LbsExcelEditor.name, LbsExcelEditor)
+Vue.component(ColorsPanel.name, ColorsPanel)
@@ -34,6 +34,17 @@ export default {
       label: '类型',
       defaultValue: 'line',
       visible: false
+    }),
+    colors: PropTypes.colors({
+      label: '颜色面板',
+      defaultValue: () => [
+        // https://github.com/ElemeFE/v-charts/blob/01ebb541a5d905047dd52957ae0898d529342235/src/constants.js#L20
+        '#19d4ae', '#5ab1ef', '#fa6e86',
+        '#ffb980', '#0067a6', '#c4b4e4',
+        '#d87a80', '#9cbbff', '#d9d0c7',
+        '#87a997', '#d49ea2', '#5b4947',
+        '#7ba3a8'
+      ]
     })
   },
   data () {
@@ -43,19 +54,14 @@ export default {
   },
   render () {
     const chartData = Parser.csv2VChartJson(this.dataset)
-    const settings = {
-      // metrics: ['日期', '销售量'],
-      // dimension: ['日期']
-    }
     switch (this.type) {
       case 'line':
-        return <VeLine data={chartData} settings={settings} />
       case 'histogram':
-        return <VeHistogram data={chartData} settings={settings} />
+        return <VeHistogram data={chartData} colors={this.colors} />
       case 'pie':
-        return <VePie data={chartData} settings={settings} />
+        return <VePie data={chartData} />
       case 'funnel':
-        return <VeFunnel data={chartData} settings={settings} />
+        return <VeFunnel data={chartData} />
       default:
         return null
     }