//找到表格对应的名称和后端返回的键对应进行渲染
var fieldVal= $(this).parents("td").attr("data-field");
$.ajax({
url: '',//服务端的请求地址
type: 'get',//http请求方式 get，post，put，delete，options
dataType: "json",
async : false,
data : {"type":1},
success: function (res) {
console.info(res)
var dataArray = res[fieldVal]; // 根据 fieldVal 的值从 res 中获取相应的数据数组
// // 使用Layer组件显示柱状图
layer.open({
type: 1, // 类型为内容层
title: '标题', // 弹出层的标题
area: ['90%', '86%'],
content: '<div id="chart-container" style="width: 100%; height: 100%; margin: 0px auto" ></div>', // 弹出层的内容，这里是一个容器
success: function(layero, index) {
var fieldName = $(".layui-table-header thead").eq(0).find("th[data-field="+fieldVal+"]").text().trim();
initChart(res,dataArray,"bar",fieldName);
}
});
}
});
function initChart(res,dataArray,type,text) {
var options = checkType(res,dataArray,type,text)
var chartContainer = document.getElementById('chart-container');
var myChart = echarts.init(chartContainer);
myChart.setOption(options, true)
}
function checkType(res,dataArray,type,text) {
let transformedData = nameArray.map((name, index) => ({
name: name,
value: valueArray[index]
}));
var options = {
grid: {
left: 'auto',
right: 'auto',
top: '36',
bottom: 'auto',
containLabel: true,
},
title:{
text,
top:6,
left:20
},
toolbox: {
right:'10%',
iconStyle: {
color: "rgba(0, 0, 0, 1)",
borderColor: "rgba(0, 0, 0, 1)"
},
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
// magicType: { show: true, type: ['bar', 'line'] },
myPie: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
initChart(res,dataArray,"pie",text);
}
},
myBar: {
show: true,
title: '切换为柱状图',
icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
onclick: function () {
initChart(res,dataArray,"bar",text)
}
},
myLine: {
show: true,
title: '切换为折线图',
icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
onclick: function () {
initChart(res,dataArray,"line",text);
}
}
restore: {},
saveAsImage: {}
}
},
// color: ['#007950', '#0097AF', '#376BB9', '#DF993E', '#AD475F'],
}
if(type==="pie"){
options.tooltip = {
trigger: 'item'
}
options.series = [
{
type: type,
label: {
show: false
},
radius: '50%',
// center: ['25%', '55%'],
data: transformedData
itemStyle: {
normal: {
color: function (colors) {
var colorList = ['#ee544f','#7d57c1','#28b6f6','#67bb6a','#ffee59','#ff7143','#7c20a3','#1977d4','#007969','#b0b42a','#f67d01','#ec417a','#5d6ac0','#26c6db','#9ccc65','#fad63e','#d22f2d','#512da7','#0388d2','#388e3d','#fcc02c','#e64a18','#aa47bd','#41a3f4','#26a59a','#d3e156','#fea926','#c1175c','#30409f','#0098a9','#68a039','#f5a817','#ee544f','#7d57c1'];
return colorList[colors.dataIndex];
}
},
}
}
]
console.log(options,"options")
}else{
options.tooltip = {
trigger: 'item',
axisPointer:{
type:"type"
}
}
options.dataZoom= [{ //添加dataZoom属性即可显示滑动条
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: -5,
start: 0,//滚动条的起始位置
end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}]
options.xAxis = {
type: 'category',
data: res.countyNameArray,
axisLabel: {
interval: 0,
rotate: 30,
formatter: function (value) {
return value.match(/.{1,4}/g).join("\n");
},
}
}
options.yAxis = {
type: 'value'
}
options.series = [
{
data: dataArray,
type: type,
itemStyle: {
normal: {
//这里是颜色
color:"#1560A4"
}
}
}
]
}
return options
}