Echarts组件简单封装

https://echarts.apache.org/examples/zh/index.html

           communityOption: {
                xAxis: {
                    type: \"category\",
                    data: [
                        \"文章总量\",
                        \"文章本月新增\",
                        \"文章本周新增\",
                        \"\",
                        \"观点总量\",
                        \"观点本月新增\",
                        \"观点本周新增\",
                        \"\",
                        \"回答总量\",
                        \"回答本月新增\",
                        \"回答本周新增\",
                        \"\",
                        \"话题总量\",
                        \"话题本月新增\",
                        \"话题本周新增\",
                        \"\",
                        \"问题总量\",
                        \"问题本月新增\",
                        \"问题本周新增\"
                    ],
                    //文本放不下，倾斜显示
                    axisLabel: {
                        interval: 0,
                        rotate: -20
                    }
                },
                yAxis: {
                    type: \"value\"
                },
                series: [
                    {
                        data: [],
                        //柱图宽度
                        barWidth: 10,
                        type: \"bar\"
                    }
                ]
            }

<template>
    <div class=\"echarts\">
        <div :id=\"id\" :style=\"[size]\"></div>
    </div>
</template>

<script>
import * as echarts from \"echarts\";
export default {
    name: \"pieChart\",

    props: {
        //echarts配置文件
        option: {
            type: Object,
            default: null
        },
        //div的id，同一页面使用多个图库，id要不一样
        id: {
            type: String,
            default: null
        },

        //宽度
        width: {
            type: String,
            default: \"400px\"
        },
        //高度
        height: {
            type: String,
            default: \"400px\"
        }
    },

    data() {
        return {
            size: {
                width: this.width,
                height: this.height
            }
        };
    },
    mounted() {},

    //监听数据是否改变，改变就重新渲染
    watch: {
        option: {
            handler(newValue, oldValue) {
                this.myEcharts();
            },
            immediate: true,
            deep: true
        }
    },

    methods: {
        myEcharts() {
            this.$nextTick(() => {
                const chartDom = document.getElementById(this.id);
                const myChart = echarts.init(chartDom);
                this.option && myChart.setOption(this.option);
            });
        }
    }
};
</script>

<style></style>

<template>
  <div class=\"echarts\">
    <div :id=\"id\" :style=\"[size]\"></div>
  </div>
</template>

<script lang=\"ts\" setup>
  import * as echarts from 'echarts/core';
  import {
    PieChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    LineSeriesOption,
  } from 'echarts/charts';
  import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    // 数据集组件
    DatasetComponent,
    DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
  } from 'echarts/components';
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';

  // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
  type ECOption = echarts.ComposeOption<
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
  >;

  // 注册必须的组件
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    PieChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
  ]);

  const props = defineProps({
    //echarts配置文件
    option: {
      type: Object,
      default: null,
    },
    //div的id，同一页面使用多个图库，id要不一样
    id: {
      type: String,
      default: null,
    },

    //宽度
    width: {
      type: String,
      default: '400px',
    },
    //高度
    height: {
      type: String,
      default: '400px',
    },
  });

  const size = reactive({
    width: props.width,
    height: props.height,
  });

  const myEcharts = () => {
    nextTick(() => {
      const chartDom = document.getElementById(props.id);

      if (chartDom) {
        const myChart = echarts.init(chartDom);
        props.option && myChart.setOption(props.option);

        window.addEventListener('resize', () => {
          myChart.resize();
        });
      }
    });
  };

  watch(props.option, (newValue, oldValue) => {
    myEcharts();
  });
</script>

<style></style>