echarts折线图模型显示后台查出来的数据

//定义显示的数据

 var _datas = {
 chart4: {
                xAxisData: [],
                series: {
                    data1: []
                }
            }
        };

 

 //模型折线图
         var chart4 = echarts.init(document.getElementById('pie2'));
        function getChartOption4() {
            return {
                legend: {
                    right: 15,
                    shape: 'circle',
                    data: ['单量', '体积']
                },
                color: ['#3398DB'],

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                        type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: _datas.chart4.xAxisData
                },
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    type: 'value'
                },
                series: [{
                    data: _datas.chart4.series.data1,
                    type: 'line'
                }]
            };
        }
        chart4.setOption(getChartOption4());

//接收后台的数据

  $.get(_reqUrl.getData, _sharedParams.queryModel, function (result) {
                    console.log(result);
                    $.msg.closeAll();
                    var model = result.data;
                    //数据
                     var tt3 = model.fifteenOrderTotal;
                    console.log("日新增单量趋势")
                    console.log(tt3);
                    _datas.chart4.xAxisData = $.map(tt3, function (m) {
                        //对日期格式yyyy-mm-dd格式为mm/dd
                        var DateStr = m.DateStr;
                        DateStr = DateStr.split('-');
                        mDateStr = ($.trim(DateStr[1]) + "/" + $.trim(DateStr[2]));
                        return mDateStr;
                    });
                    _datas.chart4.series.data1 = $.map(tt3, function (m) {
                        return m.OrderNum;
                    });
                    chart4.setOption(getChartOption4());
                });

 

 

//效果图

 

 

 

 

posted @ 2021-03-26 14:30  东方李  阅读(494)  评论(0)    收藏  举报