echarts 解决 X轴与Y轴数据不对应问题；X轴日期显示顺序错误问题

data 是 装满对象的数组。

注意： 叠加柱状图需要赋值 xData，而曲线可要可不要。

initChart3 是初始化叠加柱状图 

initChart2 是初始化 曲线图

    var chart3, chart2
    function initChart3(data) {
        var chartId = "chart3" ;
        //$("#" + chartId).height(400);
        var chart = echarts.init(document.getElementById(chartId), 'light');
        var yAxisName = "微博数量3";
        var color;
        var titleText="";
        chart3 = chart;
        var series = [];
      
        //方式一
        var xData0 = arrayObjectDistinctReturnKey(data, 'YearAndMonth');//日期去重
        //解决日期排序问题
        var xData = sortData2(xData0, "order");//仅对日期排序
        //叠加柱状图需要赋值 xData，而曲线可要可不要。
         //方式二
        //var data = sortData(data2, "order", "YearAndMonth");//data2指数据源，这里对整个数据源排序
        //var xData = arrayObjectDistinctReturnKey(data2, 'YearAndMonth');
        //console.log('data', data);
        //console.log('xData', xData);

       

		for (let i = 0; i < typeValueList.length; i++) {

		    var arr1 = [];
		    for (var j = 0; j < data.length; j++) {
		        var item = data[j];
		        if (item["WeiboType"] == typeValueList[i]) {
		            arr1.push([item["YearAndMonth"], item["Number"]]);
		        }
		    }

		    var seriesData = [];
		    series.push({
		        name: typeLabelList[i],
		        type: 'bar',
		        data: arr1,
		        //barWidth: 21,
		        stack: '叠加标志',
		       
		        //itemStyle: {//柱状图上方显示数值
		        //    normal: {
		        //        label: {
		        //            show: true, //开启显示
		        //            position: 'top', //在上方显示
		        //            textStyle: { //数值样式
		        //                color: 'black',
		        //                 fontSize: 16
		        //            }
		        //        }
		        //    }
		        //}

		    })
		}
      //console.log('series', series);
	   var option=
        {
            color: ['rgb(255,219,92)', 'rgb(55,162,218)', 'rgb(224,98,174)', 'rgb(255,159,127)'],
            title: [
                {
                    top: 14,
                    text: titleText,
                    show: true,
                    left: "center"
                }

            ],
            tooltip: {
                trigger: 'axis',
                confine: true,
                formatter: function (data) {
                    return TooltipFormatterX(data);//解决日期排序问题
                }
            },
            legend: {
                top: 30,
                type: 'scroll',
                left: '13%',
                data: typeLabelList
            },
            toolbox: {
                right: '20px',
                // left: 'right',
                feature: {
                    dataView: {
                        show: true,
                        title: '数据视图',
                        lang: ['<div class="table-header-title" >' + titleText + '</div>', '关闭'],
                        readOnly: true, // 点击刷新按钮会导致第二列数据消失，此处设置只读是为了隐藏刷新按钮。
                        optionToContent: function (opt) {
                            // console.log('bar-opt', opt)
                            return ToolboxDataViewX(opt, xData);//解决日期排序问题
                        }
                    },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                top: 70,
                left: '3%',
                right: '4%',
                bottom: '5%',
               // bottom: '10%',

                containLabel: true,

            },
            xAxis: [
                {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        interval: 0,  //坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        //textStyle: {
                        //    fontWeight: "bold",  //加粗
                        //    color: "#000000"   //黑色
                        //},
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: yAxisName,
                    //min: 0,
                    //max:500
                    //min: function (value) {
                    //    return value.min;
                    //},
                    //max: function (value) {
                    //    return value.max;
                    //}

                }
            ],

            series: series,
        }
		chart.setOption(option);//必须加true，否则叠加状态只更新部分值，而不去覆盖。

    }


    function initChart2(data) {

        var chartId = "chart2" ;
        //$("#" + chartId).height(400);
        var chart = echarts.init(document.getElementById(chartId), 'light');
        var yAxisName = "情感分值";
        var color;
        var titleText="";
        chart1 = chart;
        var series = [];


        //var data = sortData(data, "order", "YearAndMonth");
        //var xData = arrayObjectDistinctReturnKey(data, 'YearAndMonth');
        var xData0 = arrayObjectDistinctReturnKey(data, 'YearAndMonth');
        var xData = sortData2(xData0, "order");//解决日期排序问题


        for (let i = 0; i < typeValueArr.length; i++) {

            var arr1 = [];
            
                for (var j = 0; j < data.length; j++) {
                    var item = data[j];
                    if (item["WeiboType"] == typeValueArr[i]) {
                        arr1.push([item["YearAndMonth"], item["EmotionAnalysis"]]);//解决日期排序问题

                    }
                }
            
            //console.log('arr1',arr1);
		    var seriesData=[];
            series.push({
                name: typeLabelArr[i],
                type: 'line',
                data: arr1,
                smooth: true, //这句就是让曲线变平滑的
                connectNulls: true,
                //barWidth: 21,
				//stack: '叠加标志',

                //itemStyle: {//柱状图上方显示数值
                //    normal: {
                //        label: {
                //            show: true, //开启显示
                //            position: 'top', //在上方显示
                //            textStyle: { //数值样式
                //                color: 'black',
                //                 fontSize: 16
                //            }
                //        }
                //    }
                //}

            })
        }
       // console.log('series', series);
	   var option=
        {
            color: ['rgb(175,238,238)', 'rgb(255,219,92)', 'rgb(55,162,218)', 'rgb(224,98,174)', 'rgb(255,159,127)'],
            title: [
                {
                    top: 14,
                    text: titleText,
                    show: true,
                    left: "center"
                }

            ],
            tooltip: {
                trigger: 'axis',
                confine: true,
                formatter: function (data) {
                    return TooltipFormatterX(data);//解决日期排序问题
                }
            },
            legend: {
                top: 30,
                type: 'scroll',
                left: '13%',
                data: typeLabelArr
            },
            toolbox: {
                right: '20px',
                // left: 'right',
                feature: {
                    dataView: {
                        show: true,
                        title: '数据视图',
                        lang: ['<div class="table-header-title" >' + titleText + '</div>', '关闭'],
                        readOnly: true, // 点击刷新按钮会导致第二列数据消失，此处设置只读是为了隐藏刷新按钮。
                        optionToContent: function (opt) {
                            // console.log('bar-opt', opt)
                            return ToolboxDataViewX(opt, xData);//解决日期排序问题
                        }
                    },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                top: 70,
                left: '3%',
                right: '4%',
                bottom: '5%',
               // bottom: '10%',

                containLabel: true,

            },
            xAxis: [
                {
                    type: 'category',
                   // data: xData,
                    axisLabel: {
                        interval: 0,  //坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。
                          rotate: 45,//倾斜度 -90 至 90 默认为0
                        //textStyle: {
                        //    fontWeight: "bold",  //加粗
                        //    color: "#000000"   //黑色
                        //},
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: yAxisName,
                    //min: 0,
                    //max:500
                    //min: function (value) {
                    //    return value.min;
                    //},
                    //max: function (value) {
                    //    return value.max;
                    //}

                }
            ],

            series: series,
        }
		chart.setOption(option);//必须加true，否则叠加状态只更新部分值，而不去覆盖。

    }


    // X轴无值
    function ToolboxDataViewX(opt, axisData) {
        console.log("ToolboxDataViewX", opt);
        var series = opt.series; //折线图数据
        var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
        var tdBodys = ''; //表数据

        //饼图
        if (opt.series[0].type == "pie") {
            //组装表头
            for (var i = 0, len = series[0].data.length; i < len; i++) {
                tdHeads += '<td style="padding: 0 10px">' + series[0].data[i].name + '</td>';
            }
            var table = '<table  border="1" class="table-bordered table-striped" style="100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';

            //行数
            //列数
            for (var i = 0, len = series[0].data.length; i < len; i++) {
                var temp = series[0].data[i].value;
                if (temp != null && temp != undefined) {
                    tdBodys += '<td>' + temp + '</td>';
                } else {
                    tdBodys += '<td></td>';
                }
            }
            table += '<tr><td style="padding: 0 10px">' + "合计" + '</td>' + tdBodys + '</tr>';
            tdBodys = '';


        } else { //柱状图 曲线图
            //组装表头
            for (var i = 0; i < series.length; i++) {
                tdHeads += '<td style="padding: 0 10px">' + series[i].name + '</td>';
            }
            var table = '<table  border="1" class="table-bordered table-striped" style="100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';

            //var axisData = opt.xAxis[0].data; //坐标数据
            var sumObj = {};
            var tdBodysSum = '';//合计行数据
            //合计行数据 初始化为0
            for (var j = 0; j < series.length ; j++) {
                sumObj[series[j].name] = 0;
            }
            //console.log("sumObj0", sumObj);
            //组装表数据
            //行数
            for (var i = 0; i < axisData.length; i++) {
                //列数
                for (var j = 0; j < series.length ; j++) {
                    
                    //返回日期相同项
                    for (let k = 0, len = series[j].data.length; k < len; k++) {

                        if (axisData[i] == series[j].data[k][0]) {
                            var temp = series[j].data[k][1];
                            if (temp != null && temp != undefined) {
                                tdBodys += '<td>' + temp + '</td>';
                                sumObj[series[j].name] += temp;
                            } else {
                                tdBodys += '<td></td>';
                            }
                        }
                    }


                }
                table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                tdBodys = '';
            }
            //console.log("sumObj", sumObj);
            //拼接合计行表格
            for (var j = 0; j < series.length ; j++) {
                tdBodysSum += '<td>' + sumObj[series[j].name] + '</td>'
            }
            //console.log("tdBodysSum", tdBodysSum);
            // table += '<tr><td style="padding: 0 10px">' + '合计' + '</td>' + tdBodysSum + '</tr>';

        }
        table += '</tbody></table>';
        return table;
    }

    function ToolboxDataView(opt) {
      console.log("ToolboxDataView", opt);
        var series = opt.series; //折线图数据
        var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
        var tdBodys = ''; //表数据

        //饼图
        if (opt.series[0].type == "pie") {
            //组装表头
            for (var i = 0,len= series[0].data.length; i <len; i++) {
                tdHeads += '<td style="padding: 0 10px">' + series[0].data[i].name + '</td>';
            }
            var table = '<table  border="1" class="table-bordered table-striped" style="100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';

              //行数
                //列数
                for (var i = 0, len = series[0].data.length; i < len; i++) {
                    var temp = series[0].data[i].value;
                    if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + temp + '</td>';
                    } else {
                        tdBodys += '<td></td>';
                    }
                }
               table += '<tr><td style="padding: 0 10px">' + "合计" + '</td>' + tdBodys + '</tr>';
                tdBodys = '';


        } else { //柱状图
            //组装表头
            for (var i = 0; i < series.length; i++) {
                tdHeads += '<td style="padding: 0 10px">' + series[i].name + '</td>';
            }
            var table = '<table  border="1" class="table-bordered table-striped" style="100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';

            var axisData = opt.xAxis[0].data; //坐标数据
            var sumObj = {};
            var tdBodysSum = '';//合计行数据
            //合计行数据 初始化为0
            for (var j = 0; j < series.length ; j++) {
                sumObj[series[j].name] = 0;
            }
            //console.log("sumObj0", sumObj);
            //组装表数据
            //行数
            for (var i = 0; i < axisData.length; i++) {
                //列数
                for (var j = 0; j < series.length ; j++) {
                    var temp = series[j].data[i];
                    if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + temp + '</td>';
                        sumObj[series[j].name] += temp;
                    } else {
                        tdBodys += '<td></td>';
                    }
                }
                table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                tdBodys = '';
            }
            //console.log("sumObj", sumObj);
            //拼接合计行表格
            for (var j = 0; j < series.length ; j++) {
                tdBodysSum += '<td>' + sumObj[series[j].name] + '</td>'
            }
            //console.log("tdBodysSum", tdBodysSum);
           // table += '<tr><td style="padding: 0 10px">' + '合计' + '</td>' + tdBodysSum + '</tr>';

        }
        table += '</tbody></table>';
        return table;
    }


    /**************************echarts 公用方法*********************
    *****************************************/
    function TooltipFormatter(data) {

        var seriesNames = [];
        var formateStrings = [];
        var formateString = "";
        if (data.length > 0) {
            formateStrings.push(data[0].axisValue);
            for (i in data) {
                var item = data[i];
                seriesNames.push(item.seriesName);
                if (item.value != null) {
                    formateStrings.push(item.marker + item.seriesName + ": " + format45(item.value,1000));
                }

            }
            formateString = formateStrings.join("<br />");
            return formateString;

        }
    }

    function TooltipFormatterX(data) {
        //console.log('TooltipFormatterX', data);
        var seriesNames = [];
        var formateStrings = [];
        var formateString = "";
        if (data.length > 0) {
            formateStrings.push(data[0].axisValue);
            for (i in data) {
                var item = data[i];
                seriesNames.push(item.seriesName);
                if (item.value != null && item.value.length>0) {
                    formateStrings.push(item.marker + item.seriesName + ": " + format45(item.value[1], 1000));
                }

            }
            formateString = formateStrings.join("<br />");
            return formateString;

        }
    }

没有写明的函数：

根据数组 对象的时间字符串排序（转载）

https://www.cnblogs.com/hao-1234-1234/p/14269048.html

　　

经验教训：

这个问题是由数据缺失造成的，所以我开始就去数据库想要建一个新的视图，然后右连接补充一个有类别核心字段为空的行。

但我发现好几个类别的日期都不全，对数据库函数、产量并不擅长。所以我选择前端造成数据组装。但又有两个方法必须联动。

其实最简单的方法是服务器端 组装数据！

去重查询表所有日期

去重查询表所有类别。

for 类别[

for日期[

 根据类别和日期必须数据，有就赋值给对象a，没有就新建对象a. 然后把类别和日期赋值和它，核心字段为空。

]

]

这样前端代码不用改，比前端组装数据少改两个方法！

不要上来就做，而是思考多种技术方案，然后选择最容易的那种。

如果没有想到方案，要有最优解模式：

1、有极致的性能要求或能马上解决问题的sql方法，才考虑数据库端。（最后选）

2、有一定代码量或逻辑的，一定在服务器端解决。（首选）

3、传输的数据要最小化，带宽太大基本用不完，可以考虑前端组装数据。前端有简单实用的解决案例。前端方案比服务器端方案容易。（第二选）