Echarts 自定义象形柱图Spirits

最新推荐文章于 2024-05-16 03:06:11 发布

zmyalh

最新推荐文章于 2024-05-16 03:06:11 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/zmyalh/article/details/127735940

本文介绍如何使用ECharts实现自定义象形柱图，通过更换图片来展示不同的统计数据。文章提供了组件化的封装示例，并展示了如何设置图表的各项属性以达到预期的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts 自定义象形柱图Spirits

效果
在这里插入图片描述

封装的组件，使用时可直接换spirit与spirit1改变图片

//外部调用方法
<echarts2 class="peoples" v-if="loadshow" :myChartdata="[70]"></echarts2>
//注：数据重新渲染时，需要加v-if，如果只是展示一次，不需要再次渲染则可不要v-if
<template>
  <div class="nunEchars">
    <div ref="people" id="people" class="peoples"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      myChart2:'',
      myChart1num:  this.myChartdata,
      spirit:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABHNCSVQICAgIfAhkiAAAAIRJREFUGFdVjjEOgzAMRb9XQ3sThDp0aJcmp2RCSDB0qHqGJiejdn4QYCmL/3v+ERznswYofmht2ZSX5QR812TLVwkdahF3YDH7YvYWKjJ6CTvwrvZ2XhHRSSIwmd3UbmU37hI8IjAfulkRcZNEYDD7arabPJ/xpE1gNFvrz9327gdtnz+TNR65eud2WwAAAABJRU5ErkJggg==',
      spirit1:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABHNCSVQICAgIfAhkiAAAAE5JREFUGFdjZEAFLAxqxgJwoT8MvxlR5JWM+RlYGFjhYrcYPiIrwNDNcO8skgIsuhkYzsKtwKobZBXEChy6YQpw6oYowNB99gNQ/A/MJwDdIR+ljpg5AwAAAABJRU5ErkJggg==',//统计图图片
      myChart1data:[],
      maxData:100
    }
  },
  props:{
    myChartdata:{
      type:Array,
      default:[]
    },
  },
  created () {},
  mounted () {
    this.myChart2 = echarts.init(this.$refs.people)
    this.peopleNum()
    window.addEventListener('resize', () => {
      this.myChart2.resize();
    })
  },
  methods:{
    peopleNum () {//人员分布
      this.myChart2.setOption({
        // tooltip: {},
        xAxis: {
          max: this.maxData,
          show: false,
        },
        yAxis: {
          data: this.myChart1data,
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: '#C8FFFF',
            fontSize: 16
          }
        },
        grid: {
          top: 'center',
          height: 130,
          left: 30,
          right: 65
        },
        series: [
          {
            // current data
            type: 'pictorialBar',
            symbol: this.spirit,
            symbolRepeat: 'fixed',
            symbolMargin: '5%',
            symbolClip: true,
            symbolSize: 8,
            symbolBoundingData: this.maxData,
            data: this.myChart1num,
            markLine: {
              symbol: 'none',
              label: {
                formatter: 'max: {c}',
                position: 'start',
                fontSize: 16
              },
              lineStyle: {
                color: 'green',
                type: 'dotted',
                opacity: 0.2,
                width: 2
              },
              data: [
                // {
                //   type: 'max'
                // }
              ]
            },
            z: 10
          },
          {
            type: 'pictorialBar',
            itemStyle: {
              opacity: 0.9
            },
            label: {
              show: true,
              formatter:  (params) => {
                return  params.value   + ' %';
              },
              position: 'right',
              offset: [10, 0],
              color: '#000000',
              fontSize: 14
            },
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '5%',
            symbol: this.spirit1,
            symbolSize: 8,
            symbolBoundingData: this.maxData,
            data: this.myChart1num,
            z: 5,
           }
        ]
      });
    },
  }
}
</script>

<style scoped lang="stylus">
.nunEchars
  .peoples
    width:100%
    height:100%
    position: absolute
    top 0px
    left 0px
    // transform:scaleY(0.8)
</style>