npm install vue-echarts echarts

// main.js 或組件內(nèi)引入均可
import { defineComponent } from 'vue'
import { BarChart } from 'vue-echarts'
 
export default defineComponent({
  components: {
    BarChart
  }
})

<template>
  <bar-chart :data="chartData" :settings="chartSettings" />
</template>

<script setup>
import { ref } from 'vue'
 
const chartData = ref({
  columns: ['月份', '銷售額'],
  rows: [
    { 月份: '一月', 銷售額: 120 },
    { 月份: '二月', 銷售額: 200 },
    { 月份: '三月', 銷售額: 180 },
    { 月份: '四月', 銷售額: 250 },
    { 月份: '五月', 銷售額: 300 }
  ]
})
 
const chartSettings = ref({})
</script>

npm install vue-echarts echarts

// 引入 Echarts 4.x
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入 Echarts 5.x
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入vue-echarts
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

// 從 echarts/core 導入必要的函數(shù)和組件
import { use, graphic } from 'echarts/core'
 
// 導入用于在畫布上渲染圖表的渲染器
import { CanvasRenderer } from 'echarts/renderers'
 
// 導入你想要使用的圖表類型，在這里是柱狀圖
import { BarChart } from 'echarts/charts'
 
// 導入圖表的各種組件，如標題、提示和圖例
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
// 從 vue-echarts 導入 VChart 組件用于 Vue 集成
import VChart from 'vue-echarts'
 
// 注冊導入的組件到 echarts 中
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])

<v-chart autoresize :data="data" :option="defaultOption" />

<!-- 縱向柱狀圖多柱 -->
<template>
  <div class="vChartVerticalBar">
    <v-chart :auto-resize="true" :data="data" :option="defaultOption" />
  </div>
</template>
 
<script>
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])
 
export default {
  name: 'vChartVerticalBar',
  components: { VChart },
  props: {
    option: {
      type: Object,
      default: function () {
        return {}
      },
    },
    data: {
      type: Object,
      default: function () {
        return {
          categories: ['被刪', '哈士奇', '楊不易呀', '三掌柜', '花花', '喵喵俠'],
          series: [
            {
              name: '2023',
              data: [233, 340, 666, 100, 340, 30],
            },
            {
              name: '2024',
              data: [233, 566, 666, 200, 300, 330],
            },
          ],
        }
      },
    },
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  computed: {
    defaultOption() {
      let that = this
      const colorGradients = [
        this.generateGradient('#188df0', '#83bff6'),
        this.generateGradient('#f08d1a', '#ffaf7b'),
        this.generateGradient('#0d1a4f', '#4a69bd'),
        this.generateGradient('#83bff6', '#188df0'),
        this.generateGradient('#ffaf7b', '#f08d1a'),
      ]
      const series = this.data?.series?.map((serie, index) => {
        return {
          type: 'bar',
          // showBackground: true,
          name: serie.name,
          itemStyle: {
            barBorderRadius: [20, 20, 0, 0],
            color: new graphic.LinearGradient(0, 1, 0, 0, colorGradients[index % 5]),
          },
          label: {
            show: false,
            position: 'top',
          },
          barWidth: '20%',
          data: serie.data,
        }
      })
      return {
        grid: {
          left: '3%',
          right: '4%',
          top: '25%',
          bottom: '1%',
          containLabel: true,
        },
        tooltip: {
          formatter: function (params) {
            const unit = that.option.unit ?? '' // 設置單位，可以根據(jù)需求修改
            let res = params[0].name + '<br/>'
            for (let i = 0; i < params.length; i++) {
              res += params[i].marker + params[i].seriesName + ' : ' + params[i].value + unit + '<br/>'
            }
            return res
          },
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          icon: 'circle',
          textStyle: {
            padding: [0, 0, 0, -8], // 設置圖例文字與圖例符號之間的間距，[上, 右, 下, 左]
          },
          itemGap: 20, // 設置圖例和圖例之間間距
        },
        yAxis: [
          {
            type: 'value',
            name: that.option.yAxisName || '',
            minInterval: this.option.minInterval || '', // 坐標軸最小間隔大小。
            nameTextStyle: {
              padding: [0, 24, 0, 0],
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //分割線
                color: '#DCDFE6',
                width: 1,
                type: 'dashed', //dotted：虛線 solid:實線
              },
            },
            axisLabel: {
              textStyle: {
                color: '#556677',
              },
              formatter: '{value}',
            },
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              color: '#858B9C',
              fontSize: '12',
              formatter: function (params) {
                let newParamsName = '' // 最終拼接成的字符串
                const paramsNameNumber = params.length // 實際標簽的個數(shù)
                const provideNumber = that.option.provideNumber ||  6 // 每行能顯示的字的個數(shù)
                const rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 換行的話，需要顯示幾行，向上取整
                /**
                 * 判斷標簽的個數(shù)是否大于規(guī)定的個數(shù)， 如果大于，則進行換行處理 如果不大于，即等于或小于，就返回原標簽
                 */
                // 條件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循環(huán)每一行,p表示行 */
                  for (let p = 0; p < rowNumber; p++) {
                    let tempStr = '' // 表示每一次截取的字符串
                    const start = p * provideNumber // 開始截取的位置
                    const end = start + provideNumber // 結束截取的位置
                    // 此處特殊處理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不換行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并換行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最終拼成的字符串
                  }
                } else {
                  // 將舊標簽的值賦給新標簽
                  newParamsName = params
                }
                //將最終的字符串返回
                return newParamsName
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: that.data.categories,
          },
        ],
        series: series || [],
      }
    },
  },
  watch: {},
  methods: {
    // 生成漸變顏色的方法
    generateGradient(startColor, endColor) {
      return [
        { offset: 0, color: startColor },
        { offset: 0.5, color: startColor },
        { offset: 1, color: endColor },
      ]
    },
  },
}
</script>
<style lang="less" scoped>
.vChartVerticalBar {
  width: 100%;
  height: 100%;
}
</style>