expect two echarts but only one. Why?
there should be another one below, but it doesn"t come out
the parent component is as follows
<e-nvironmentale-charts :myData="ArayData_onne"></e-nvironmentale-charts>
<e-nvironmentale-charts :myData="ArayData_two"></e-nvironmentale-charts>
import EnvironmentalEcharts from "./EnvironmentalEcharts";
components:{
"e-nvironmentale-charts":EnvironmentalEcharts
},the subcomponents are as follows
<div id="main"></div>
props:{
myData:{
type:Array,
required:true
},
}
Just_entered(){
const _this = this;
const log=console.log;
let myChart =this.$echarts.init(document.getElementById("main"));
var optionFH = {
axisLine: {
show: false
},
//
splitLine: {
show: true
},
// y
axisTick: {
show: false
},
title: {
left: 10,
show: true,
text: "",
textStyle: {
color: "white",
fontSize: 16,
fontFamily: "",
}
},
tooltip: {
trigger: "axis",
position:function(p){ //p
if(p[0]>250){
return [p[0] - 100, p[1] - 10];
}
if(p[0]<250){
return [p[0] + 10, p[1] - 10];
}
},
textStyle:{
align:"left"
}
},
color: [
"-sharp1A2B63","-sharp02aac2",
"-sharpF4EA17","-sharpf19f00",
"-sharp0AF813","-sharp5BD600",
"-sharp580AF8","-sharpAC6FFF",
"-sharp48998B","-sharpC4EA79",
"-sharpABB6F3", "-sharpE9F3B5"
], //
legend: {
orient: "horizontal",
right: 25,
top: 30,
// top: 10,
data: ["..."],
itemWidth: 22, //
itemHeight: 15,
background: "-sharp149f79",
textStyle:{
color:"white",//
fontSize:13,//
}
},
calculable: true,
xAxis: {
type: "category",
boundaryGap: false,
splitLine: { //x
show: true,
lineStyle: {
color: "-sharp35363B",
width: 1
}
},
axisLabel: {
show: true,
interval: "auto",
textStyle: {
// color: "-sharp35363B"
color: "black"//
}
//interval: Int //
},
axisLine:{
show: true,
lineStyle: {
// color: "red"//x
color: "black"//x
}
},
axisTick: {
show: false //
},
data: [0]
//data: arrOne_FH
},
grid: { //
x: 50,
top:75,
// width:300,//
// x2: 100,
// y2: 80,// y2 XZoom labelzoom
},
yAxis: {
type: "value",
splitLine: { //x
show: true,
lineStyle: {
color: "-sharp35363B",//
width: 1
}
},
// name: "(/)",
nameTextStyle: {
fontSize: 15,
color: "-sharpa9a9a9"
},
axisLabel: {
show: true,
interval: "auto",
inside: false,
// rotate: 90,
// margin: 8,
formatter: null,
showMinLabel: null,
showMaxLabel: null,
},
nameLocation: "end", //
// nameRotate:90,
axisLabel: { //
show: true,
textStyle: {
// color: "-sharp35363B"
color: "black"//
}
},
axisLine: { //y
show: true,
lineStyle: {
// color: "red"//y
color: "black"//y
}
},
axisTick: {
show: false //
},
max: function(value) {
if(value.max<30){
return Math.floor(value.max) + 5;
}else if(value.max>=30&&value.max<=100){
return Math.floor(value.max) + 10;
}else if(value.max>100&&value.max<2000){
return Math.floor(value.max) + 50;
}else if(value.max>=2000){
return Math.floor(value.max) + 100;
}
}
},
series: [
{
name: "...",//1
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: {
normal: { //
color: function(params) {
var colorList = ["yellow"];
return colorList[params.dataIndex];
}
},
},
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp1A2B63"
}
},
},
}, {
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp02aac2"
}
},
},
},
{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharpF4EA17"
}
},
},
},{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharpf19f00"
}
},
},
},
{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp0AF813"
}
},
},
},{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp5BD600"
}
},
},
},
{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp580AF8"
}
},
},
},{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharpAC6FFF"
}
},
},
},
{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp48998B"
}
},
},
},{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharpC4EA79"
}
},
},
},
{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharpABB6F3"
}
},
},
},{
name: "...",//2
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: { //
normal: {
lineStyle: {
color: "-sharpE9F3B5"
}
},
},
},
]
};
myChart.setOption(optionFH);
axios.post("/datang/api/index/getHistoryData",_this.myData,{
headers: {
"Content-Type": "application/json",
"Accept":"application/json"
}
}).then((response) => {
//success
let myData = response.data.data;
var arrOne_FH = [];
var arrOne_FH_val = [];
var arrName = [];
let Onezhi;
for(var i=0;i<myData.length;iPP){
let arr=[];
for(var j=0;j<myData[i].length;jPP){
arr.push(myData[i][j].item_value);
arrOne_FH.push(myData[i][j].record_time.slice(5, 16));//
}
arrName.push(myData[i][i].target_name);
optionFH.series[i].data = arr.reverse();
optionFH.series[i].name = myData[i][i].target_name;
}
var resv = arrOne_FH.reverse();
// arrOne_FH_val.reverse();
optionFH.legend.data = arrName; //
optionFH.xAxis.data = resv;
// optionFH.series[0].name =Onezhi;
// optionFH.series[0].data = arrOne_FH_val;//
myChart.setOption(optionFH,true);
window.onresize = function () {
//
myChart.resize();
};
if (optionFH.series[0].data.length==0) { // echarts
optionFH.yAxis.min="0";
optionFH.yAxis.max="3";
}
}, (error) => {
console.log(error)
});
}, then I see two post requests in network, but the parameters passed are the same
Why?
and the following div does not have canvas
how to solve this problem? "