Vue3+Echarts5.x

引入 ECharts

import * as echarts from 'echarts';

规定Type类型

type EChartsOption = echarts.EChartsOption;
const barChart = ref<any>(null);//实例化Dom对象
let barChartSeries: any;

初始化图表

// 图表初始化
onMounted(() => {
  if (barChart.value) {
    nextTick(() => {
      barChartSeries = echarts.init(barChart.value, '', {
        devicePixelRatio: 3,
      });
      barChartSeries.setOption(option.value);
    });
  }
});

柱状图案例

上一个柱状图简单案例，一目了然。

<template>
  <div ref="barChart" class="barChart"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;
const barChart = ref<any>(null);
let barChartSeries: any;
const option = ref<EChartsOption>({
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],

    axisLine: {
      lineStyle: {
        color: '#D1DFFD',
      },
    },
    // 坐标轴文字颜色
    axisLabel: {
      color: '#44494F',
      fontSize: 14,
      margin: 20,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',

    axisLabel: {
      margin: 20,
      // align: 'left',
      color: '#44494F',
      fontSize: 14,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F8F8FC',
        width: 2,
      },
    },
  },
  series: [
    {
      barWidth: 32,
      itemStyle: {
        color: '#60A1FF',
        borderWidth: 4.5,
        borderRadius: [4, 4, 0, 0],
      },
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: '#FFAA00',
          },
        },
        150,
        80,
        70,
        110,
        130,
      ],
      type: 'bar',
    },
  ],
});
// 图表初始化
onMounted(() => {
  if (barChart.value) {
    nextTick(() => {
      barChartSeries = echarts.init(barChart.value, '', {
        devicePixelRatio: 3,
      });
      barChartSeries.setOption(option.value);
    });
  }
});
window.onresize = () => {
  barChartSeries.resize();
};
</script>

<style scoped lang="less">
.barChart {
  width: 100%;
  height: 85%;
}
</style>