|
@@ -86,152 +86,9 @@ export default {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getEchartData_one();
|
|
|
- this.getEchartData_two();
|
|
|
- this.getEchartData_thr();
|
|
|
- this.getEchartData_fou();
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
- getEchartData_one(data) {
|
|
|
- var chartDom = document.getElementById('card_one');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- title: {
|
|
|
- text: '收益统计',
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line',
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- getEchartData_two() {
|
|
|
- var chartDom = document.getElementById('card_two');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- title: {
|
|
|
- text: '收益统计',
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
- type: 'bar',
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
- getEchartData_thr() {
|
|
|
- var chartDom = document.getElementById('card_thr');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- title: {
|
|
|
- text: '销量占比',
|
|
|
- subtext: 'Fake Data',
|
|
|
- left: 'center',
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- left: 'left',
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Access From',
|
|
|
- type: 'pie',
|
|
|
- radius: '50%',
|
|
|
- data: [
|
|
|
- { value: 1048, name: 'Search Engine' },
|
|
|
- { value: 735, name: 'Direct' },
|
|
|
- { value: 580, name: 'Email' },
|
|
|
- { value: 484, name: 'Union Ads' },
|
|
|
- { value: 300, name: 'Video Ads' },
|
|
|
- ],
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
- getEchartData_fou() {
|
|
|
- var chartDom = document.getElementById('card_fou');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- title: {
|
|
|
- text: '商品销量对比',
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- },
|
|
|
- },
|
|
|
- legend: {},
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, 0.01],
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六'],
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '本月',
|
|
|
- type: 'bar',
|
|
|
- data: [122, 45, 78, 233, 56, 75],
|
|
|
- },
|
|
|
- {
|
|
|
- name: '上月',
|
|
|
- type: 'bar',
|
|
|
- data: [234, 134, 54, 27, 145, 87],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
},
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|