> For the complete documentation index, see [llms.txt](https://close.gitbook.io/yun-wei-bi-ji/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/2-19.echarts-tu-biao-zu-jian-kai-fa-he-jiao-hu.md).

# 2 19.echarts图表组件开发和交互

> 官网: [Apache ECharts](https://echarts.apache.org/zh/index.html)

* #### 按照

```js
npm install echarts --save
```

* #### 封装组件

  > src/components/IndexChart.vue

  ```js
  <template>
      <el-card shadow="never">
          <template #header>
              <div class="flex justify-between">
                  <span class="text-sm">订单统计</span>
                  <div>
                      <el-check-tag 
                      v-for="(item,index) in options" 
                      :key="index"
                      :checked="current == item.value"
                      style="margin-right: 8px;"
                      @click="handleChoose(item.value)"
                      >{{ item.text }}</el-check-tag>
                  </div>
              </div>
          </template>

          <div ref="el" id="chart" style="width: 100%; height: 300px"></div>
      </el-card>

  </template>
  <script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue'
    import * as echarts from 'echarts';
    import { getStatistics3 } from '~/api/index'
    import { useResizeObserver } from '@vueuse/core'

    const current = ref('week')

    const options = [
        {
            text: '近1个月',
            value: 'month'
        },
        {
            text: '近1周',
            value: 'week'
        },
        {
            text: '近24小时',
            value: 'hour'
        },
    ]

    const handleChoose = (type) =>{
        current.value = type
        getData()
    }


    var myChart = null
    onMounted(()=> {
        var chartDom = document.getElementById('chart');
        myChart = echarts.init(chartDom);

        getData()
    })

    // 销毁实例
    onBeforeUnmount(()=>{
        if(myChart) echarts.dispose(myChart)
    })

    function getData() {
        let option = {
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
                }
            ]
            };

        // 加载动画;
        myChart.showLoading()
        // 请求
        getStatistics3(current.value).then((res) => {
            option.xAxis.data = res.x
            option.series[0].data = res.y

            myChart.setOption(option);
        }).finally(()=>{
            myChart.hideLoading()
        })
    }


    const el = ref(null)
    useResizeObserver(el, (entries) => myChart.resize())

    </script>
  ```

````
- ### 引用

```js
import IndexNavs from '~/components/IndexNavs.vue';
import IndexChart from '~/components/IndexChart.vue';

...略
      <!-- 分类组件 -->
      <IndexNavs></IndexNavs>

      <!-- 图表组件 -->
      <el-row :gutter="20">
          <el-col :span="12" :offset="0">
              <IndexChart></IndexChart>
          </el-col>
          <el-col :span="12" :offset="0"></el-col>
      </el-row>

...略
````

* #### 效果图

<div><img src="C:%5CUsers%5CAdministrator.DESKTOP-UK43ECI%5CAppData%5CRoaming%5Cmarktext%5Cimages%5C2023-02-22-20-06-57-image.png" alt=""> <figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FkbrMNABkaRzOvluXcoJj%2F2023-02-22-20-06-57-image.png?alt=media&amp;token=40ab258f-f8d7-4246-8637-76d9b9be8427" alt=""><figcaption></figcaption></figure></div>