柱状图 markpoint

今天接到一个新需求，要在指定的柱子上添加markpoint，这个需求最关键的是确定柱子。
1、先上图，给大家看下效果，在最后的日期柱子添加markpoint
[图片上传中...(1630466837453.jpg-33b219-1630466848745-0)]
2、直接上代码
默认配置的option.js

import { translateWidth } from '@/utils/common';

export default {
  // tooltip: {
  //   show: true,
  //   trim: 'axis',
  //   showContent: true,
  //   triggerOn: 'click',
  //   alwaysShowContent: false
  // },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#EBEDF0'
        }
      },
      axisLabel: {
        color: '#000000'
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#000000'
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#EBEDF0'
      }
    }
  },
  series: [
    {
      type: 'bar',
      itemStyle: {
        // barBorderRadius: [5, 5, 0, 0],

        normal: {
          label: {
            show: false,    
            position: 'top',
            textStyle: { // 数值样式
              color: '#000',
              fontSize: translateWidth(12)
            }
          },
          color: function (params) {
            // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            const colorList = ['rgba(135,163,210,.4)', 'rgba(135,163,210,.4)', 'rgba(135,163,210,.4)', 'rgba(135,163,210,.4)', 'rgba(135,163,210,.4)', 'rgba(135,163,210,.4)', '#005EFE'];
            return colorList[params.dataIndex];
          }
        }
        // color: 'rgba(135,163,210,.4)'
      },
      emphasis: {
        itemStyle: {
          color: 'rgba(135,163,210,.4)'
        }
      },
      barMaxWidth: 20,
      data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]
    }
  ]
};

2、在页面中引入

<template>
  <div v-if="data && data.length" class="bar-charts">
    <VChart
      :key="key"
      :options="options"
      autoresize
    />
  </div>
  <div v-else class="nodata">
    <NoContent/>
  </div>
</template>


<script>
import option from './option';
import _ from 'lodash';
import { translateWidth } from '@/utils/common';
import NoContent from '@/views/common/base/NoContent';

export default {
  name: 'BarEchart',
  components: {
    NoContent
  },
  props: {
    data: {
      type: Array,
      default: () => ([502.84, 205.97, 332.79, 281.55, 398.35, 214.02])
    },
    xAxisData: {
      type: Array,
      default: () => (['A', 'B', 'C', 'D', 'E', 'F'])
    },
    // 分隔线是否垂直方向
    vertical: {
      type: Boolean,
      default: true
    },
    grid: {
      type: Object,
      default: () => ({
        top: translateWidth(40),
        bottom: translateWidth(38),
        right: translateWidth(15)
      })
    },
    time: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      option,
      key: 0,
      setValueNum: ''
    };
  },

  computed: {
     lastNum() {
       const cloneData = _.cloneDeep(this.data);
       return cloneData[cloneData.length - 1];
     },
     barPoint() {
      return {
        //对应项目中图片存在的位置
        symbol: 'image:// ' + require(`../../../../assets/images/barIcon.png`),
        // symbol: 'circle',
        symbolKeepAspect: false,
        symbolSize: [translateWidth(32), translateHeight(15)],
        symbolOffset: [0, '-50%'],
        silent: true,
        label: {
          show: true,
          offset: [0, -3],
          // textStyle: {
          color: '#fff',
          fontSize: translateWidth(12),
          fontWeight: 'bold'
        },
       /**最主要的是这一行，去确定需要展示的值以及位置**/
        data: [{ name: '某个坐标', value: this.lastNum, coord: [6, this.lastNum] }]
      };
    },

    options() {
      const option = _.cloneDeep(this.option);
      option.grid = this.grid;
      option.xAxis[0] = {
        ...option.xAxis[0],
        data: this.xAxisData
      };
      option.yAxis = {
        ...option.yAxis
      };
      option.series[0] = {
        ...option.series[0],
        data: this.data
        // 在这边将series的markPoint重置
        markPoint: this.barPoint
      };
      return option;
    }

  },
  watch: {
    data() {
      this.key++;
    }
  },
  created() {
    // this.option;
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.bar-charts {
  height: 100%;

  .echarts {
    width: 100%;
    height: 100%;
  }
}

.nodata {
  // height: 100%
}
</style>

完结

今天写的有点潦草，但愿没给看的各位造成困扰，看不明白的可以私信滴滴。