ECharts 创建图表示例

一.项目中导入ECharts

pnpm i echarts

效果图 ：

import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';


const mainOneRef = ref()

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(mainOneRef.value);
  // 绘制图表
  myChart.setOption({
    title: {
      //标题
      text: '年度收入统计'
    },
    //鼠标悬浮显示数据
    tooltip: {},
    xAxis: {
      data: ["12月", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"]
    },
    yAxis: {},
    // 图例
    legend: {
      data: ['物业费', '停车收入']
    },
    series: [
      {
        name: '物业费',
        type: 'bar',
        // 堆叠
        stack: 'x',
        data: [3708.34, 3750, 3750, 3666.67, 3750, 3708.34, 3750, 3708.34, 3750, 3750, 3708.34, 3750],
        // 柱状图样式
        itemStyle: {
          // 颜色
          color: 'rgba(54, 86, 255, 1)'
        },
        barWidth: 20
      },
      {
        name: '停车收入',
        type: 'bar',
        data: [2900, 1640, 1640, 1800, 2040, 2660, 1200, 1200, 1640, 560, 800, 2440],
        itemStyle: {
          color: 'rgba(205, 228, 255, 1)'
        },
        stack: 'x',
        barWidth: 20
      }
    ]
  });
})



<!-- 柱状图 -->
          <div ref="mainOneRef"></div>