| <!-- |
| - Licensed to the Apache Software Foundation (ASF) under one or more |
| - contributor license agreements. See the NOTICE file distributed with |
| - this work for additional information regarding copyright ownership. |
| - The ASF licenses this file to You under the Apache License, Version 2.0 |
| - (the "License"); you may not use this file except in compliance with |
| - the License. You may obtain a copy of the License at |
| - |
| - http://www.apache.org/licenses/LICENSE-2.0 |
| - |
| - Unless required by applicable law or agreed to in writing, software |
| - distributed under the License is distributed on an "AS IS" BASIS, |
| - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| - See the License for the specific language governing permissions and |
| - limitations under the License. |
| --> |
| |
| <template> |
| <div class="layout row ma-0 align-center justify-space-between"> |
| <div class="text-box"> |
| <div class="subheading pb-2">{{title}} </div> |
| <span class="grey--text">{{subTitle}} <v-icon small :color="iconColor">{{icon}}</v-icon></span> |
| </div> |
| <div class="chart"> |
| <e-chart id="hello" |
| :path-option="computeChartOption" |
| height="68px" |
| width="100%" |
| > |
| </e-chart> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| import EChart from '@/util/echart' |
| export default { |
| components: { |
| EChart |
| }, |
| props: { |
| title: String, |
| subTitle: String, |
| icon: String, |
| iconColor: { |
| type: String, |
| default: 'success' |
| }, |
| type: String, |
| chartColor: String, |
| data: Array |
| }, |
| data () { |
| return { |
| defaultOption: [ |
| ['dataset.source', this.data], |
| ['xAxis.show', false], |
| ['yAxis.show', false], |
| ['color', [this.chartColor]] |
| ] |
| } |
| }, |
| |
| computed: { |
| computeChartOption () { |
| switch (this.type) { |
| case 'bar': |
| this.defaultOption.push(['series[0].type', 'bar']) |
| break |
| case 'area': |
| this.defaultOption.push(['series[0].type', 'line']) |
| this.defaultOption.push(['series[0].areaStyle', {}]) |
| break |
| default: |
| break |
| } |
| return this.defaultOption |
| } |
| }, |
| |
| watch: { |
| data (curVal, oldVal) { |
| return this.defaultOption |
| } |
| } |
| } |
| </script> |
| |
| <style scoped> |
| |
| </style> |