Echarts displays different data on the left and right y-axes, with normal values on the left and percentages on the right.

problem description

echarts displays different data on the left and right y axes, with normal values on the left and percentages on the right.
clipboard.png

the environmental background of the problems and what methods you have tried

checked Baidu and echarts"s official website, but couldn"t find an accurate answer.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
const echartBaseSetting = {
tooltip: {

trigger: "axis"

},
legend: {

textStyle: {
  color: "-sharpccc"              // TODO: -sharpcccinactiveColor, theme
}

},
yAxis: {

type: "value",
axisLine: {
  lineStyle: {
    color: "-sharpccc"
  }
},
splitLine: {
  lineStyle: {
    color: "-sharpccc",
    type: "dashed"
  }
}

},
dataZoom: [{

]
type: "slider",
dataBackground: {
  lineStyle: {
    color: "-sharpccc"
  },
  areaStyle: {
    color: "-sharpe6f7ff"
  }
},
borderColor: "-sharpccc",
textStyle: {
  color: "-sharpccc"
},
handleIcon: "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%"

}, {

type:"inside"

}],
}

@ observer
class RollingSharpComponent extends React.Component {
store = new Store ();
/ *

  • get icon configuration

* /
getChartSharpRatio = () = > {

const { chartData: { date, sharpe, fut_ret } } = this.store;//
return {
  ...echartBaseSetting,
  xAxis:{
    data: date,
    axisLine: {
      lineStyle: {
        color:"-sharpccc",
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [{
    name:"",
    type: "value",
    nameLocation:"center",
    axisLine: {
      lineStyle: {
        color: "-sharpccc",
      }
    },
    show:true,
    splitLine: {
      show: false,
      
    }
  },{
    name:"%",
    type: "value",
    nameLocation:"center",
    axisLine: {
      lineStyle: {
        color: "-sharpccc",
      }
    },
    splitLine:{
      show:false,
    }
  }],
  series: [{
    name: "",
    data: sharpe,
    type: "line",
    symbol: "none",
    symbolSize: 0,
    color:["red"]
  },{
    name: "",
    data:  fut_ret,
    type: "line",
    symbol:"none",
    symbolSize: 0,
    color:["-sharp000"]
  }]
}

};
/ *

  • get icon configuration

* /
getChartDeviation = () = > {

const { chartData: { date, devt_std, fut_ret } } = this.store;

return {
  ...echartBaseSetting,
  xAxis: {
    data: date,
    
    axisLine: {
      lineStyle: {
        color: "-sharpccc",
      },
    },
    splitLine: {
      show: false,
    }
  },
  yAxis:[{
    name:"",
    type: "value",
    nameLocation:"center",
    axisLine: {
      lineStyle: {
        color: "-sharpccc",
      }
    },
    splitLine: {
      show: false,
    }
  },{
    name:"%",
    type: "value",
    position:"right",
    nameLocation:"center",
    axisLine: {
      lineStyle: {
        color: "-sharpccc",
      }
    },
    splitLine: {
      show: false,
    }
  }],
  series:[{
    name: "",
    data:devt_std,
    type: "line",
    symbol: "none",
    symbolSize: 0,
    color: ["red"]
  },{
    name: "",
    data: fut_ret,
    type: "line",
    symbol: "none",
    symbolSize:0,
    color: ["-sharp000"]
  }]
};

};

what result do you expect? What is the error message actually seen?

would like to see the big god solve the problem than attach the code.

Jul.19,2022

is close to correct for your next two configuration items, you have set two y-axes. But how do you tell series below which axis to use for each item? series will use the first axis by default, and you need to set yAxisIndex:1 in the future rate of return item to indicate the use of the second y axis.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-e357b5-4d5d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-e357b5-4d5d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?