Gráfico de linhas de tendência (gráfico burndown) mostrando echarts na tabela el

Efeito de exibição: o gráfico de tendências à direita consulta o volume de dados de 30 dias da linha atual.

 Antecedentes: Para imitar o gráfico de burndown do ZenTao, mas olhando seu código-fonte, descobrimos que ele foi escrito em PHP, queríamos usar Vue para implementá-lo.

 Etapas de implementação: 1. Primeiro use el-table para desenhar a tabela 

Observação: neste momento, os dados são colocados na lista, mas o ID no gráfico de tendências não pode ser exclusivo e o dev precisa ser alterado para um gráfico de linhas de echarts baseado no ID, então use d="'main_ '+scope.row.rank " para substituir. O estilo a seguir pode controlar o tamanho do gráfico de tendências

<el-table
      :data="list"
      :height='570'
      @selection-change="setSelectRows"
    >
      <el-table-column prop="rank" label="排名" :style="{margin,left: '50px'}" show-overflow-tooltip ></el-table-column>
      <el-table-column prop="name" label="名称" show-overflow-tooltip ></el-table-column>
      <el-table-column prop="city" label="所属市" show-overflow-tooltip ></el-table-column>
      <el-table-column prop="province" label="所属省" show-overflow-tooltip ></el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip ></el-table-column>
      <el-table-column label="趋势图" show-overflow-tooltip>
        <template #default="scope">
            <!--为echarts准备一个具备大小的容器dom-->
          <div :id="'main_'+scope.row.rank" style="width:70%;height:30px;margin: 0 auto;"></div>
        </template>
      </el-table-column>

2. Atribuição de dados em gráficos de tendências: aquisição de dados em segundo plano

Nota: 1 A essência aqui está em Promise.then() no método initEcharts : O objetivo de Promise.then é permitir que a execução de código assíncrono seja executada de cima para baixo na ordem especificada , quebrando as limitações do código assíncrono . O método trendQuery é um método assíncrono. Não existe um método initEcharts. Se você chamar diretamente o método síncrono de initData, o id será chamado antes que o div seja renderizado e um erro que não pode ser chamado aparecerá: Erro não detectado: Falha na inicialização : dom inválido---- --- Isso ocorre porque o echarts precisa obter o dom durante a inicialização.  2. Use "main_" + state.list[i].rank) para obter os campos da linha correspondente correspondente ao id em o html acima.

import * as echarts from 'echarts'



const fetchData = async () => {
      state.listLoading = true
      const {
        retCode, success, data, msg
      } = await trendQuery(state.queryForm)
      if (retCode == 0) {
        state.list = data.records;

        initEcharts();
      } else {
        proxy.$baseMessage(msg, 'error', 'vab-hey-message-error');
      }
    }

// 方法
const initEcharts = () => {
      // 新建一个promise对象
      let newPromise = new Promise((resolve) => {
        resolve()
      })
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        //	此dom为echarts图标展示dom
        // echarts.init(DOm)
        initData();
      })
    }

const initData = () => {
      console.log(" initData 执行中 ")
      for (let i = 0; i < state.list.length; i++) {
        let myChart = echarts.init(document.getElementById("main_" + state.list[i].rank));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            show: false, //取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show:false
            },
            data: []
          },
          grid: {
            left: "0",
            top: "0",
            right: "0",
            bottom: "0",
            containLabel: true,
          },
          yAxis: {
            axisLabel: { // 取消显示坐标值
              show: false
            },
            splitLine: { //取消网格线
              show:false
            },
            type: 'value'
          },
          series: [
            {
              symbol: "none",
              smooth: true,//平滑
              type: "line",
              data: state.list[i].trend,
              areaStyle: {}
            }
          ]
        });
        window.onresize = function () { // 自适应大小
          myChart.resize();
        };
      }
    }

 3. Desenhe a imagem

MyChart.setOption({......}) é usado.Se você estiver interessado, você pode ver a Documentação - Apache ECharts e exercícios do caso no site oficial dos echarts.

Exemplos - Apache ECharts