标签：console log myChartone result 联动 var 多表 data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="JS/echarts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<link rel="shortcut icon" href="#"/>
<title>测试</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="areaone" style="width: 600px;height:400px;"></div>
<div id="areaone1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var goodsNamedata = [];
var salesMountdata = [];
var salesMountdata0 = [];
var a1 = [];
var b1 = [];
var c1 = [];
let index=0;
var url = "Servletselect";
<!--使用ajax动态获取数据，将获取的数据放到数组中-->
$.ajax({
async: false,
type: "GET",
url: url,
dataType: 'json',
contentType: "application/json;charset=UTF-8",
success: function(result){
console.log(result);
for (var i = 0; i < result.length; i++) {
goodsNamedata.push(result[i].day_id);
salesMountdata.push(result[i].round);
salesMountdata0.push(result[i].cnt);
}
}
});
var myChartone = echarts.init(document.getElementById('areaone'));
// 指定图表的配置项和数据
var optionone = {
title: {
text: 'ECharts动态展示数据'
},
tooltip: {},
legend: {
data: ['sum','mony'],
orient: 'horizontal',
itemGap: 40,
textStyle: {
color: 'red',
fontSize: '20px',
fontWeight: 700
}
},
xAxis: {
data: goodsNamedata
},
yAxis: {
},
series: [{
name: 'sum',
type: 'bar',
data: salesMountdata
},
{
name: 'mony',
type: 'bar',
data: salesMountdata0
}]
};
myChartone.getZr().on('click',function(params){
console.log("aini");
let point=[params.offsetX,params.offsetY];
let xIndex=myChartone.convertFromPixel({seriesIndex:0},point)[0];
// let yIndex=myChartone.convertFromPixel({seriesIndex:0},point)[0];
let op=myChartone.getOption();
let name=op.xAxis[0].data[xIndex];
index++;
if(index % 2 == 1)
{
console.log("zengjia");
$.ajax({
async: false,
type: "GET",
url: "Servletiii",
data: {name1:name,jk:"1"},
dataType: 'json',
contentType: "application/json;charset=UTF-8",
success: function(result) {
add(result);
myfunction(result);
}
});
}
else{
console.log("shanchu");
$.ajax({
async: false,
type: "GET",
url: "delete",
data: {name1:name,jk:"1"},
dataType: 'json',
contentType: "application/json;charset=UTF-8",
success: function(result) {
delet(result);
myfunction(result);
}
});
}
})
function add(result){
for (var i = 0; i < result.length; i++) {
a1.push(result[i].day_id);
b1.push(result[i].round);
c1.push(result[i].cnt);
}
}
function myfunction(result){
var chartDom = document.getElementById('areaone1');
var myChart = echarts.init(chartDom);
var option;
const data11 = []
console.log(data11);
for(var num=0;num<a1.length;num++)
{
data11.push([a1[num],b1[num]]);
}
const data12 = []
for(var num1=0;num1<a1.length;num1++)
{
data12.push([a1[num1],c1[num1]]);
}
const dateList = data11.map(function (item) {
return item[0];
});
const valueList = data12.map(function (item) {
return item[1];
});
option = {
// Make gradient line here
visualMap: [
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
},
{
show: false,
type: 'continuous',
seriesIndex: 1,
dimension: 0,
min: 0,
max: dateList.length - 1
}
],
title: [
{
left: 'center',
text: 'Gradient along the y axis'
},
{
top: '55%',
left: 'center',
text: 'Gradient along the x axis'
}
],
tooltip: {
trigger: 'axis'
},
xAxis: [
{
data: dateList
},
{
data: dateList,
gridIndex: 1
}
],
yAxis: [
{},
{
gridIndex: 1
}
],
grid: [
{
bottom: '60%'
},
{
top: '60%'
}
],
series: [
{
type: 'line',
showSymbol: false,
data: valueList
},
{
type: 'line',
showSymbol: false,
data: valueList,
xAxisIndex: 1,
yAxisIndex: 1
}
]
};
option && myChart.setOption(option);
}
function delet(result){
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
for (var i = 0; i < result.length; i++) {
console.log("shanchu111");
console.log(result[i].day_id);
a1.remove(result[i].day_id);
b1.remove(result[i].round);
c1.remove(result[i].cnt);
}
}
myChartone.setOption(optionone);
option && myChart.setOption(option);
</script>
</body>
</html>
标签：console,
log,
myChartone,
result,
联动,
var,
多表,
data
From： https://www.cnblogs.com/jyt604743080/p/16794669.html