| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <?php /*a:2:{s:57:"D:\phpEnv\www\SCM-API\app\admin\view\dashboard\index.html";i:1750736984;s:52:"D:\phpEnv\www\SCM-API\app\admin\view\layout\vue.html";i:1750736984;}*/ ?>
- export default{
- data:{
- echarts:'',
- panel:[],
- line:{
- date:[],
- data:[]
- },
- table:[],
- bar:{
- date:[],
- name:[],
- data:[]
- },
- pie:[],
- order:{
- percentage:[0,0]
- },
- filterForm:{
- table:'all',
- select:'one',
- datepicker:['2023-01-01','2023-02-01'],
- }
- },
- onLoad:function (){
- Yunqi.use('/assets/js/echarts.min.js').then(res=>{
- this.echarts=res;
- this.parseData();
- });
- },
- methods:{
- parseData:function (){
- Yunqi.ajax.get('dashboard/index',{}).then(res=>{
- this.panel=res.panel;
- this.line=res.line;
- this.table=res.table;
- this.bar=res.bar;
- this.pie=res.pie;
- this.order=res.order;
- this.chart1();
- this.chart2();
- this.chart3();
- });
- },
- chart1:function () {
- let mychart = this.echarts.init(document.getElementById('chart1'), 'walden');
- mychart.setOption({
- title: {text: '每日新增用户数',left: 'center'},
- tooltip: {
- trigger: 'axis'
- },
- toolbox: {
- show: false,
- feature: {
- magicType: {show: true, type: ['stack', 'tiled']},
- saveAsImage: {show: true}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: this.line.date
- },
- yAxis: {},
- grid: [{
- left: 40,
- top: 40,
- right: 0,
- bottom:30
- }],
- series: [{
- name: '注册用户',
- type: 'line',
- smooth: true,
- areaStyle: {
- normal: {}
- },
- lineStyle: {
- normal: {
- width: 1.5
- }
- },
- data: this.line.data
- }]
- });
- window.addEventListener('resize',()=>{
- mychart.resize();
- });
- },
- chart2:function (){
- let mychart = this.echarts.init(document.getElementById('chart2'))
- mychart.setOption({
- title: {text: '消费比例图',left: 'center'},
- legend: {
- orient: 'horizontal',
- bottom: 0,
- },
- series: [{
- type: 'pie',
- data:this.pie,
- label: {
- normal: {
- show: true,
- formatter: "¥{c}",
- }
- }
- }]
- });
- window.addEventListener('resize',()=>{
- mychart.resize();
- });
- },
- chart3:function (){
- let mychart = this.echarts.init(document.getElementById('chart3'))
- mychart.setOption({
- title: {text: '消费日历图',left: 'center'},
- legend: {
- orient: 'vertical',
- left: 'left',
- },
- yAxis: {},
- xAxis: {
- data: this.bar.date
- },
- grid: [{
- left: 100,
- top: 40,
- right: 40,
- bottom:20
- }],
- series: [
- {
- type: 'bar',
- name:this.bar.name[0],
- data: this.bar.data[0]
- },
- {
- type: 'bar',
- name:this.bar.name[1],
- data: this.bar.data[1]
- },
- {
- type: 'bar',
- name:this.bar.name[2],
- data: this.bar.data[2]
- }
- ]
- });
- window.addEventListener('resize',()=>{
- mychart.resize();
- });
- },
- changeForm:function (type){
- if(type){
- this.filterForm.table=type;
- }
- this.parseData();
- }
- }
- }
|