echarts 解决 X轴与Y轴数据不对应问题；X轴日期显示顺序错误问题
以上是最终成功效果。出现过的问题是： X轴日期显示顺序错误问题；X轴与Y轴数据不对应问题；
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="width: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="width: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="width: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="width: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、传输的数据要最小化，带宽太大基本用不完，可以考虑前端组装数据。前端有简单实用的解决案例。前端方案比服务器端方案容易。（第二选）
树立目标，保持活力，gogogo！
浙公网安备 33010602011771号