关于echarts:echarts中的柱状图设置最大值最小值和平均值线条vue项目中

效果图

柱状图有时候须要特地标注最大值、最小值，也可能会加均匀一条线，用来辨别数据是否高于或者低于,本文记录一下对应的配置项。咱们先看一下效果图：

代码附上

次要是通过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>

更多细节的管制能够去官网看对应配置项