echarts方形柱状图_echarts 方形柱状图-CSDN博客

本文链接：https://blog.csdn.net/weixin_43843679/article/details/124632456

该博客展示了如何利用ECharts库创建一款具有渐变色、钻石形状和数据标签的柱状图。代码示例详细解释了配置项，包括x轴、y轴的设置，以及不同类型的条形图（普通和图底图顶）的实现，旨在提升图表的视觉效果和信息传达能力。

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

在这里插入图片描述

import * as echarts from 'echarts' // 注:该项目运用5.0版本以上 原先import echarts from 'echarts'不适用
function goverChartConfig() {
  const dom = 800
  const barWidth = dom / 20
  const xAxisData = ['国境内婚生子女出生登记', '购买成套住房落户', '大中专学生毕业就业落户', '夫妻投靠落户', '务工落户（市外）']
  const yAxisData = [31212, 25634, 22156, 18647, 15608]
  const option = {
    // backgroundColor: '#010d3a',
    // 提示框
    // tooltip: {
    //   trigger: 'axis',
    //   formatter: '{b} : {c}',
    //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //   }
    // },
    // 区域位置
    grid: {
      left: '10%',
      right: '10%',
      top: '10%',
      bottom: '10%'
    },
    // X轴
    xAxis: [{
      data: xAxisData,
      type: 'category',
      show: true,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#ffffff'
          // shadowColor: 'rgba(255,255,255,1)'
          // shadowOffsetX: '20'
        }
        // symbol: ['none', 'arrow'],
        // symbolOffset: [0, 25]
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 20
        // fontSize: 20
      }
    }],
    yAxis: {
      show: true,
      splitNumber: 4,
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#3B69FF'
        }
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      { // 数据颜色
        //name: '日付费用户数',
        type: 'bar',
        barWidth: barWidth,
        showBackground: true,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#988F2C' },
                { offset: 1, color: '#FFF26D' }
              ]
            )
          }
        },
        label: {
          show: true,
          position: [barWidth / 2, -(barWidth + 20)],
          // position: 'top',
          color: '#FFE000 ',
          fontSize: 33,
          fontStyle: 'bold',
          align: 'center'
        },
        data: yAxisData
      },
      { // 底
        z: 2,
        type: 'pictorialBar',
        data: yAxisData,
        symbol: 'diamond',
        symbolOffset: [0, '50%'],
        symbolSize: [barWidth, barWidth * 0.5],
        itemStyle: {
          normal: {
            color: '#FFF26D'
          }
        }
      },
      { // 顶
        z: 3,
        type: 'pictorialBar',
        symbolPosition: 'end',
        data: yAxisData,
        symbol: 'diamond',
        symbolOffset: [0, '-50%'],
        symbolSize: [barWidth, barWidth * 0.5],
        itemStyle: {
          normal: {
            borderWidth: 0,
            color: '#FFF26D'
          }
        }
      }
    ]
  }
  return option
}

// 注 给高度宽度
<div id="goverEchart" class="efficientEchart"></div>
import * as echarts from 'echarts'
import { efficientChartConfig, trafficChartConfig, goverChartConfig } from '../config'
mounted() {
  this.paintGoverEchart()
      window.addEventListener('resize', () => {
        this.goverEchart.resize()
    })
},
methods: {
    paintGoverEchart() {
      this.goverEchart = echarts.init(document.getElementById('goverEchart'))
      this.goverEchart.setOption({}, true)
      const goverConfig = goverChartConfig()
      this.goverEchart.setOption(goverConfig, true)
    }
}