uniapp动态绑定echarts

1、前端

<template>
	<view style="display: flex;flex-direction: column;height: 100%;width: 100%;align-items: center;">
		<view
			style="position: fixed;width: 100%;height: 100%;background-color:#808080;opacity: 0.5;display: flex;justify-content: center;align-items: center;z-index: 999;"
			v-if="hastoken==false">
			<button @click="getCode" type="default"
				style="height: 80rpx;display: flex;align-items: center;justify-content: center;margin-top: 100upx;">
				<label style="opacity: 1;font-size: 35rpx;" >
					{{btnTxt}}
				</label>
			</button>
		</view>
		<view style="width: 90%;height: 100%;display: flex;flex-direction: row;margin-top: 50upx;">
			<view style="width: 30%;text-align: center;">
				<label>生产：{{this.meritsSum.produceSum}}</label>
			</view>
			<view style="width: 30%;text-align: center;">
				<label>装箱：{{this.meritsSum.storeSum}}</label>
			</view>
			<view style="width: 30%;text-align: center;">
				<label>出货：{{this.meritsSum.saleSum}}</label>
			</view>
		</view>
		<view style="width: 700upx;height: 500upx;">
			<mpvue-echarts class="ec-canvas" @onInit="categoryInit" canvasId="category" ref="categoryChart" />
		</view>
		<view style="width: 700upx;height: 500upx;">
			<mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
		</view>
		<view style="width: 700upx;height: 500upx;">
			<mpvue-echarts class="ec-canvas" @onInit="pieInit" canvasId="pie" ref="pieChart" />
		</view>
	</view>
</template>

<script>
	import config from "../../common/config.js"
	import * as echarts from '@/components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

	import navbar from '../API/set-navigation-bar-title/set-navigation-bar-title.vue'
	export default {
		components: {
			navbar,
			mpvueEcharts

		},
		data() {
			return {
				meritsSum:[],
				day_time:[],
				day_quantity:[],
				week_time:[],
				week_quantity:[],
				month_time:[],
				month_quantity:[],
				month_merits:[],
				hastoken: false,
				btnTxt:'授权登录',
				
			}
		},
		created() {
		      this.initData();
		},
		onTabItemTap(options) {
		
			 this.initData();
		},
        onLoad(option) {
			
		},
		methods: {
			initData()
			{
				var that = this
				var openid = uni.getStorageSync('openid');
				if(openid != '')
				{
					this.hastoken = true
				}else{
					this.hastoken = false
					uni.switchTab({
						url: '../monitor/monitor'
					})
				}
				
				uni.request({
					url: config.baseurl + "/API/Current",
					method: 'GET',
					dataType: 'json',
					
					headers: {
						'Content-Type': "application/json;charset=utf-8"
					},
					success: (res) => {
						try {
							console.log(res.data);
						    that.meritsSum = res.data
						 that.week_time =  res.data.week_time.split(",") 
						  that.week_quantity = res.data.week_quantity.split(",")
						  that.day_time = res.data.day_time.split(",") 
						   that.day_quantity = res.data.day_quantity.split(",") 
						   
						   var xqo = eval('[' + res.data.month_merits + ']');
						   that.month_merits = xqo
						  
						 	//	 alert( res.data.week_time)
								that.categoryInit()
								that.lineInit()
								that.pieInit()
				   //          that.week_time = res.data.week_time
							// that.week_quantity = res.data.week_quantity
						} catch (e) {
							
						}	
					},
					fail() {
						uni.showToast({
							title: "请求统计失败！" + e.toString(),
							duration: 2000
						})
												
					}
				})
				
			},
			
			categoryInit(e) {
				// let {
				// 	width,
				// 	height
				// } = e;
				let canvas = this.$refs.categoryChart.canvas
				echarts.setCanvasCreator(() => canvas);
				let categoryChart = echarts.init(canvas, null, {
					width: 350,
					height: 250
				})
				canvas.setChart(categoryChart)
				var category = {
					xAxis: {
						type: 'category',
						data: this.week_time
						// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.week_quantity,
						// data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}]
				}
				categoryChart.setOption(category)
				this.$refs.categoryChart.setChart(categoryChart)
			},
			lineInit(e) {
				// let {
		 	// 	width,
				// 	height
				// } = e;
				let canvas = this.$refs.lineChart.canvas
				echarts.setCanvasCreator(() => canvas);
				let lineChart = echarts.init(canvas, null, {
					width: 350,
					height: 250
				})
		 	canvas.setChart(lineChart)
			var line = {
				legend: {
					data: ['生产数据']
				},
				xAxis: {
					type: 'category',
					data: this.day_time
				},
				yAxis: {
					type: 'value',
					data: []
				},
				dataZoom: [{
					type: 'slider',
					start: 30,
					end: 100,
					zoomLock: false,
				}],
				grid: {
					left: 40,
					right: 40,
					bottom: 20,
					top: 40,
					containLabel: true
				},
				series: [{
					data: [],
					data: this.day_quantity,
					type: 'line',
					color: ['#5eb4e2'], //折线条的颜色
				}]
			}
				lineChart.setOption(line)
				this.$refs.lineChart.setChart(lineChart)
			},
			pieInit(e) {
				// let {
		 	// 	width,
				// 	height
				// } = e;
				let canvas = this.$refs.pieChart.canvas
				echarts.setCanvasCreator(() => canvas);
				let pieChart = echarts.init(canvas, null, {
					width: 350,
					height: 250
				})
		 	canvas.setChart(pieChart)
			var pie = {
				title: {
					text: 'Referer of a Website',
					subtext: 'Fake Data',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [{
					name: 'Access From',
					type: 'pie',
					radius: '50%',
					data:this.month_merits,
					// 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)'
						}
					}
				}]
			}
				pieChart.setOption(pie)
				this.$refs.pieChart.setChart(pieChart)
			},
		}
	}
</script>

<style>
	.ec-canvas {
		display: flex;
		height: 100%;
		flex: 1;
	}

	.canvasView {
		width: 700upx;
		height: 500upx;
	}
</style>

2、后台

package com.jbossjf.bootproject.controller;

import com.jbossjf.bootproject.common.HelpUtils;
import com.jbossjf.bootproject.common.MybatisPlusConfiguration;
import com.jbossjf.bootproject.common.QueryHelp;
import com.jbossjf.bootproject.service.MeritsDayService;
import com.jbossjf.bootproject.service.OutFormService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class MeritsController
{

    @Autowired
    private MeritsDayService meritsDayService;
    @Autowired
    private OutFormService outFormService;
    @Autowired
    private QueryHelp queryHelp;
    Logger logger = LoggerFactory.getLogger(getClass());

    HelpUtils  _HelpUtils = new HelpUtils();

    @CrossOrigin
    @RequestMapping(value = "/API/Test", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
    public Map<String, Object> Test() {
        try {


            SimpleDateFormat sdf1=new SimpleDateFormat("yyyy");
            String tableName = "outform"+sdf1.format(new Date());
            MybatisPlusConfiguration.inputTableName.set(tableName);
            List<Object[]> ls = queryHelp.getOutFormTarget(tableName);
            for (int i = 0; i < ls.size(); i++) {
                Object ha = ls.get(i);
               System.out.print(ha.toString());
            }
            Map<String, Object> map = new HashMap<>();
            map.put("status", "fail");
            return map;
        } catch(Exception ex) {
            System.out.print(ex.getMessage());
        }
        return  null;
    }

    @CrossOrigin
    @RequestMapping(value = "/API/Current", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
    public Map<String, Object> Current() {
        Map<String, Object> map = null;
        try {


            SimpleDateFormat sdf1=new SimpleDateFormat("yyyy");
            String tableName = "outform"+sdf1.format(new Date());
            MybatisPlusConfiguration.inputTableName.set(tableName);
            List<Object[]> queryList = queryHelp.getOutFormTarget(tableName);
            String saleSum ="0";
            for (int i = 0; i < queryList.size(); i++) {
                Object ha = queryList.get(i);
                saleSum = ha.toString();
                System.out.print(ha.toString());
                break;
            }
            map = new HashMap<>();
            map.put("saleSum", saleSum);

            queryList = queryHelp.GetSumByMeritsType("传送单");
            String produceSum ="0";
            for (int i = 0; i < queryList.size(); i++) {
                Object ha = queryList.get(i);
                produceSum = ha.toString();
                System.out.print(ha.toString());
                break;
            }
            map.put("produceSum",produceSum);

            queryList = queryHelp.GetSumByMeritsType("装箱单");
            String storeSum ="0";
            for (int i = 0; i < queryList.size(); i++) {
                Object ha = queryList.get(i);
                storeSum = ha.toString();
                System.out.print(ha.toString());
                break;
            }
            map.put("storeSum", storeSum);
            //日
            queryList = queryHelp.GetDayByMeritsType("传送单");
            String day_time ="";String day_quantity="";
            for (int i = 0; i < queryList.size(); i++) {
                Object hatime = queryList.get(i)[0];
                Object haquantity = queryList.get(i)[1];
                if(day_time.equals("")) {

                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                    String day = sdf.format(sdf.parse(hatime.toString()));
                    String[] dates = day.split("-");
                    day_time =  "'"+dates[2]+"'";

                }
                else{
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                    String day = sdf.format(sdf.parse(hatime.toString()));
                    String[] dates = day.split("-");
                    day_time = day_time + "," +  "'"+dates[2]+"'";
                }
                if(day_quantity.equals("")) {
                    day_quantity = haquantity.toString();
                }
                else{
                    day_quantity = day_quantity + "," + haquantity.toString();
                }
            }
            map.put("day_time", day_time );
            map.put("day_quantity", day_quantity);
           //周
           queryList = queryHelp.GetWeekByMeritsType("传送单");
            String week_time ="";String week_quantity="";
            for (int i = 0; i < queryList.size(); i++) {
                Object hatime = queryList.get(i)[0];
                Object haquantity = queryList.get(i)[1];
                if(week_time.equals("")) {

//                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//                    String week = HelpUtils.getWeekOfDate(sdf.parse(hatime.toString()));
                    week_time =  "'"+hatime.toString()+"'";

                }
                else{
//                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//                    String week = HelpUtils.getWeekOfDate(sdf.parse(hatime.toString()));
                    week_time = week_time + "," +  "'"+hatime.toString()+"'";
                }
                if(week_quantity.equals("")) {
                    week_quantity = haquantity.toString();
                }
                else{
                    week_quantity = week_quantity + "," + haquantity.toString();
                }
            }
            map.put("week_time", week_time );
            map.put("week_quantity", week_quantity);
            //月
            queryList = queryHelp.GetMonthByMeritsType("传送单");
            String month_time ="";String month_quantity="";
            String month_merits = "";
            int sumQuantity = 0;
            for (int i = 0; i < queryList.size(); i++) {
                Object haquantity = queryList.get(i)[1];
                sumQuantity += Integer.parseInt(haquantity.toString());
            }
            for (int i = 0; i < queryList.size(); i++) {
                Object hatime = queryList.get(i)[0];
                Object haquantity = queryList.get(i)[1];



                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
                    String day = sdf.format(sdf.parse(hatime.toString()));
                    String[] dates = day.split("-");
                    month_time =  "'"+dates[1]+"'";


                    double s =   Integer.parseInt(haquantity.toString())/sumQuantity*100;
                    month_quantity = String.valueOf(s);;

                if(month_merits == "")
                {
                    month_merits = "{"+"name:"+month_time+",value:"+month_quantity+"}";
                }else{

                    month_merits=month_merits+","+"{"+"name:"+month_time+",value:"+month_quantity+"}";
                }
            }
            map.put("month_merits", month_merits );

            return map;
        } catch(Exception ex) {
            System.out.print(ex.getMessage());
        }
        map.put("status", "fail");
        return  map;
    }



}