|
|
@@ -1,9 +1,65 @@
|
|
|
import { Cell, Col, Row } from 'vant'
|
|
|
import { defineComponent } from 'vue'
|
|
|
import styles from './index.module.less'
|
|
|
+// import { use } from 'echarts/core'
|
|
|
+// import { CanvasRenderer } from 'echarts/renderers'
|
|
|
+// import { PieChart } from 'echarts/charts'
|
|
|
+// import {
|
|
|
+// TitleComponent,
|
|
|
+// TooltipComponent,
|
|
|
+// LegendComponent
|
|
|
+// } from 'echarts/components'
|
|
|
+// import VChart, { THEME_KEY } from 'vue-echarts'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'IncomeConsus',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {
|
|
|
+ title: {
|
|
|
+ text: 'Traffic Sources',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ data: [
|
|
|
+ 'Direct',
|
|
|
+ 'Email',
|
|
|
+ 'Ad Networks',
|
|
|
+ 'Video Ads',
|
|
|
+ 'Search Engines'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Traffic Sources',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ data: [
|
|
|
+ { value: 335, name: 'Direct' },
|
|
|
+ { value: 310, name: 'Email' },
|
|
|
+ { value: 234, name: 'Ad Networks' },
|
|
|
+ { value: 135, name: 'Video Ads' },
|
|
|
+ { value: 1548, name: 'Search Engines' }
|
|
|
+ ],
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
render() {
|
|
|
return (
|
|
|
<div class={styles.incomeConsus}>
|
|
|
@@ -50,6 +106,8 @@ export default defineComponent({
|
|
|
</Row>
|
|
|
</div>
|
|
|
|
|
|
+ <VChart option={this.options} />
|
|
|
+
|
|
|
<div class={styles.incomeTitle}>
|
|
|
<i></i>收入结构
|
|
|
</div>
|
