• 周五. 12月 9th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

The histogram in ecarts sets the maximum value, minimum value, and average value lines (in Vue proje

[db:作者]

1月 6, 2022

design sketch

Sometimes it is necessary to mark the maximum value on the histogram 、 minimum value , It might even add a line , It is used to distinguish whether the data is higher or lower than , This article records the corresponding configuration items

Code attached

Mainly through series Inside markPoint Property configuration maximum and minimum values , as well as markLine Set average

<template>
<div id="echart"></div>
</template>
<script>
import Echarts from "echarts";
export default {
data() {
return {
myChart: null,
option: {
tooltip: {
show: true,
},
xAxis: {
data: [" shirt ", " Woolen sweater ", " Snow spins unlined upper garment ", " The trousers ", " High heels ", " socks "],
},
yAxis: {
type: "value",
},
color:"#baf",
series: [
{
name: " sales ",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
// ---------------------- Look down here ---------------------------------
markPoint: { // Set the maximum and minimum values
data: [
{
type: "max",
name: " I'm the maximum ",
},
{
type: "min",
name: " I'm the minimum ",
},
],
},
markLine:{ // Set average
data:[
{
type:"average",
name:" I'm the average ",
color:"#baf"
}
]
},
// -------------------- Look up here ---------------------------------
label:{ // Show the value of the specific histogram
show:true
}
},
],
},
};
},
mounted() {
this.drawEcharts();
},
methods: {
drawEcharts() {
this.myChart = Echarts.init(document.getElementById("echart"));
this.myChart.setOption(this.option);
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
},
};
</script>
<style lang="less" scoped>
#echart {
width: 100%;
height: 600px;
}
</style>

For more detailed control, you can go to the official website to see the corresponding configuration items

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注