• 周五. 12月 2nd, 2022

5G编程聚合网

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

热门标签

echarts中的柱状图设置最大值、最小值、和平均值线条(vue项目中)

[db:作者]

1月 6, 2022

效果图

柱状图有时候需要特别标注最大值、最小值,也可能会加平均一条线,用来区分数据是否高于或者低于,本文记录一下对应的配置项

代码附上

主要是通过series里面的markPoint属性配置最大值和最小值,以及markLine设置平均线

<template>
<div id="echart"></div>
</template>
<script>
import Echarts from "echarts";
export default {
data() {
return {
myChart: null,
option: {
tooltip: {
show: true,
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {
type: "value",
},
color:"#baf",
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
// ----------------------看这里往下---------------------------------
markPoint: { // 设置最大值和最小值
data: [
{
type: "max",
name: "我是最大值",
},
{
type: "min",
name: "我是最小值",
},
],
},
markLine:{ // 设置平均线
data:[
{
type:"average",
name:"我是平均值",
color:"#baf"
}
]
},
// --------------------看这里往上---------------------------------
label:{ // 展示具体柱状图的数值
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>

更多细节的控制可以去官网看对应配置项

发表回复

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