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

官网: Apache ECharts

• 按照

npm install echarts --save

• 封装组件

  src/components/IndexChart.vue

  <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>

...略

• 效果图