echarts统计图dataView显示表格样式
css部分给表格加边框样式
html部分
<div class="ibox-content">
<div style="width: 100%;height: 68rem;" id="main">div>
div>
js部分
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
y: 'bottom'
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false,
//lang: ['任务统计表', '关闭', '刷新'],
// 隐藏关闭按钮，更改刷新按钮为关闭
lang: ['任务统计表',
'',
'可视化界面'],
contentToOption: (dom, opts) => {
console.log(dom);
// 显示我的div，这里的id是我setoption的时候存在option的dataview这个变量中的；
document.getElementById(opts.dataView).style.display = '';
},
optionToContent: (opt) => {
// 隐藏div
document.getElementById(opt.dataView).style.display = 'none';
},
optionToContent: function (opt) {
var table = '';
table += '任务状态 ';
// 遍历xAxis的data数组，生成标签
for (var i = 0; i < opt.xAxis[0].data.length; i++) {
table += ' ' + opt.xAxis[0].data[i] + ' ';
}
table += '合计 ';
//不加合计列
// for (var i = 0, l = opt.series.length; i < l; i++) {
// var series = opt.series[i];
// table += '' +
// '' + series.name + ' ' +
// '' + series.data.join('个 ') + '个' + ' ' +
// ' ';
// }
//加合计列
for (var i = 0, l = opt.series.length; i < l; i++) {
var series = opt.series[i];
var sum = series.data.reduce(function(a, b) {
return a + b;
}, 0); // 计算总和
table += '' +
'' + series.name + ' ' +
'' + series.data.join('个 ') + '个' + ' ' +
'' + sum + '个 ' + // 添加总和列的数据
' ';
}
table += '' +
'合计 ';
//加合计行
for (var i = 0; i < opt.xAxis[0].data.length; i++) {
var columnSum = 0;
for (var j = 0; j < opt.series.length; j++) {
columnSum += opt.series[j].data[i];
}
table += '' + columnSum + '个 ';
}
var totalSum = opt.series.reduce(function(a, series) {
return a + series.data.reduce(function(b, data) {
return b + data;
}, 0);
}, 0);
table += '' + totalSum + '个 ';
table += ' ';
table += '
';
return table;
},
}
}
},
xAxis: {
type: 'category',
data: ['无锡市', '滨湖区', '梁溪区', '新吴区', '锡山区', '惠山区', '江阴市', '宜兴市', '经开区']
},
yAxis: {
name: '任务数量',
},
series: [
{
name: '签署中',
color: '#5470c6',
data: [100,100,100,100,100,100,100,100,100],
type: 'bar',
//平滑显示曲线或折线图
smooth: true,
//添加平均线
markLine: {
data: [{ type: 'average', name: 'Avg' }]
},
//鼠标放上显示信息
label: {
show: true,
position: 'top'
}
},
{
name: '已完成',
color: '#91cc75',
data: [100,100,100,100,100,100,100,100,100],
type: 'bar',
smooth: true,
markLine: {
data: [{ type: 'average', name: 'Avg' }]
},
label: {
show: true,
position: 'top'
}
},
{
name: '已撤销',
color: '#ccc',
data: [100,100,100,100,100,100,100,100,100],
type: 'bar',
smooth: true,
markLine: {
data: [{ type: 'average', name: 'Avg' }]
},
label: {
show: true,
position: 'top'
}
}
]
};
setTimeout(() => {
myChart.setOption(option);
}, 500)
$(function () {
queryData();
});
function queryData() {
$.ajax({
type: "POST",
url: prefix + '/suc',
data: $("#formId").serialize(),
success: function (res) {
if (res.code == 0){
// option.xAxis.data = res.data.datekey
option.series[0].data = res.data.num1key
option.series[1].data = res.data.num2key
option.series[2].data = res.data.num3key
myChart.setOption(option);
}
}
})
}
//页面缩放图表不变形
$(window).resize(function () {
myChart.resize();
})
</script>