echarts 饼图柱状图封装

echarts 图表

在Vue3项目中,每次使用图表封装组件都要处理,很多配置老是记不住,烦死了!索性封装为class 记录下来方便后面使用

老规矩 先上效果图

vue3 页面元素部分

 <div ref="chartContainer" style="width: 600px; height: 100%;"></div>

业务逻辑部分

<script lang='ts'>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import { devBarChart, devPieChart } from '../commchart/myEcharst';
export default defineComponent({
  name: 'DataPanel',
  components: {},
  setup() {
    const chartContainer = ref<HTMLElement | null>(null);
    const chartContainer1 = ref<HTMLElement | null>(null);
    const pieChartContainer = ref<HTMLElement | null>(null);
    let barChart: devBarChart | null = null;
    let pieChart: devPieChart | null = null;
    // 柱状图1执行
    const runBarChartFun = () => {
      // 柱壮图 堆叠
      if (chartContainer.value) {
        const data = {
          categories: ['设备一', '设备二', '设备三', '设备四', '设备五', '设备六'],
          series: [
            {
              name: '运行',
              type: 'bar',
              stack: 'total',
              barWidth: '30%', // 设置柱子宽度为50%
              itemStyle: {
                color: '#4ecb73', // 设置柱子颜色为天蓝色
              },
              emphasis: {
                focus: 'series'
              },
              data: [2, 3, 3, 3, 9, 3, 2]
            },
            {
              name: '停机',
              type: 'bar',
              stack: 'total',
              barWidth: '50%', // 设置柱子宽度为50%
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                color: '#ff6600', // 设置柱子颜色为天蓝色
              },
              data: [1, 3, 1, 13, 9, 2, 21]
            }]
        };
        const options = {
          title: '设备运行/停机图表',
          legend: ['运行', '停机'],
          yAxis: {
            name: '时长 (h)'
          }
        };

        barChart = new devBarChart(chartContainer.value, options);
        barChart.renderChart(data);

      }
    }
    // 柱状图2执行 非堆叠
    const runBarChart1Fun = () => {
      if (chartContainer1.value) {
        const data = {
          categories: ['设备一', '设备二', '设备三', '设备四', '设备五', '设备六'],
          series: [
            {
              name: 'NG数量',
              type: 'bar',
              barWidth: '30%', // 设置柱子宽度为50%
              itemStyle: {
                color: '#f2cc76', // 设置柱子颜色为天蓝色
              },
              emphasis: {
                focus: 'series'
              },
              data: [2, 3, 3, 3, 9, 3, 2]
            },
            {
              name: '生产数量',
              type: 'bar',
              barWidth: '30%', // 设置柱子宽度为50%
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                color: '#3387de', // 设置柱子颜色为天蓝色
              },
              data: [1, 3, 1, 13, 9, 2, 21]
            }]
        };
        const options = {
          title: '设备生产数量图表',
          legend: ['NG数量', '生产数量'],
          yAxis: {
            name: '数量 (个)'
          }
        };
        barChart = new devBarChart(chartContainer1.value, options);
        barChart.renderChart(data);
      }
    };
    // 饼图执行
    const runPieChartFun = () => {
      if (pieChartContainer.value) {
        const data = {
          series: [
            {
              name: 'Access From',
              type: 'pie',
              label: {
                show: true,
                formatter: '{b}: {d}%', // 显示扇形名称和百分比
                backgroundColor: 'transparent', // 设置提示文字的背景色为透明
                color:'white'
              },
              labelLine: {
                smooth: true, // 设置提示线为曲线类型
                length: 50, // 设置提示线的长度
              
              },
              radius: ['1%', '40%'],
              center: ['50%', '65%'],
              startAngle: 360,
              data: [
                { value: 1048, name: '电机报警' },
                { value: 735, name: '气缸报警' },
                { value: 580, name: '气源报警' },
                { value: 484, name: '真空报警' },
              ]
            }
          ]
        };
        const options = {
          title: '告警类型统计',
        };
        pieChart = new devPieChart(pieChartContainer.value, options);
        pieChart.renderChart(data);
      }

    };
    onMounted(() => {
      runBarChartFun();
      runBarChart1Fun();
      runPieChartFun();
    });

    onBeforeUnmount(() => {
      if (barChart) {
        barChart.destroy();
      }
      if (pieChart) {
        pieChart.destroy();
      }
    });

    return {
      refData,
      eqDatas,
      alarmDatas,
      eqStates,
      chartContainer,
      chartContainer1,
      pieChartContainer
    }

  }
});
</script>

封装 部分

import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
export class devBarChart {
  private chart: any;
  private container: HTMLElement;
  private options: any;
  constructor(container: HTMLElement, options: any) {
    this.container = container;
    this.chart = echarts.init(container);
    this.options = options;
  }

  renderChart(data: any) {
    this.chart.setOption({
      grid: {
        left: "5%", // 左边距
        bottom: "4%", // 下边距
        right: "1%",
        containLabel: false, // 自动计算 label 大小
      },
      title: {
        text: this.options.title,
        textStyle: {
          color: "white",
          fontSize: 16, // 设置字体大小为16px，根据需要调整
        },
      },
      tooltip: {},
      legend: {
        data: this.options.legend,
        top: "1%",
        textStyle: {
          color: "#fff",
          //   padding: [11, 0, 11, 0],
        },
      },
      xAxis: {
        type: "category",
        data: data.categories,
        axisLabel: {
          textStyle: {
            color: "white", // 设置刻度标签为白色
          },
        },
      },
      yAxis: {
        ...this.options.yAxis,
        type: "value",
        // name: '时长 (h)',
        position: "left",
        alignTicks: true,
        axisLabel: {
          textStyle: {
            color: "white", // 设置刻度标签为白色
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: data.series,
    });
    window.onresize = () => {
      this.chart.resize();
    };
  }
  destroy() {
    this.chart.dispose();
  }
}

export class devPieChart {
  private chart: any;
  private container: HTMLElement;
  private options: any;
  constructor(container: HTMLElement, options: any) {
    this.container = container;
    this.chart = echarts.init(container);
    this.options = options;
  }

  renderChart(data: any) {
    this.chart.setOption({
      title: {
        text: this.options.title,
        top: "1px",
        textStyle: {
          color: "white",
          fontSize: 16, // 设置字体大小为16px，根据需要调整
        },
      },
      tooltip: {},
      legend: {
        ...this.options?.legend,
        top: "15%",
        textStyle: {
          color: "#fff",
          //   padding: [11, 0, 11, 0],
        },
      },
      series: data.series,
    });
    window.onresize = () => {
      this.chart.resize();
    };
  }
  destroy() {
    this.chart.dispose();
  }
}