Projeto de visualização de dados ECharts - visualização de dados em tela grande - produção de gráficos echarts

1. Pilha de tecnologia do curso

Exibição do projeto

A conclusão deste projeto requer conhecimento de:

• layout div+css
• layout flexível
• Menos
• Use js + jquery nativos
• adaptação rem
• noções básicas de echarts
  

Experiência online (recomendado)

https://yangyanyan.top/echarts-jobmap/

Código fonte

Lembre-se de dar uma estrela
https://gitee.com/yyy1203/echarts-jobmap.git

2. Introdução à visualização de dados

Se você olhar apenas os dados, não terá uma sensação intuitiva.

3. Explicação detalhada das etapas do projeto

Introdução ao painel de visualização

Em resposta à tendência atual de visualização de dados, cada vez mais empresas precisam usar gráficos visuais para exibir dados em vários cenários (dados de marketing, dados de produção, dados do usuário), tornando os dados mais intuitivos e as características dos dados mais proeminentes.

01-Use tecnologia

A conclusão deste projeto requer conhecimento de:

• layout div+css
• layout flexível
• Menos
• Use js + jquery nativos
• adaptação rem
• noções básicas de echarts

02- Solução de adaptação de case

• O rascunho do design é 1920px

  1. flexível.js divide a tela em 24 partes iguais

  2. O valor base do plug-in cssrem é 80px

     Botão Plug-in-Configuração - Definir configurações de extensão - Configurações de tamanho da fonte raiz.
     
     Mas não se esqueça de reiniciar o software vscode para garantir que ele tenha efeito

03-Configurações básicas

• body define a imagem de fundo, zoom para 100%, altura da linha 1,15
• inicialização css

Layout de 04 cabeçalhos

• A altura é 100px
• Imagem de fundo, exibida dentro do contêiner
• A taxa de zoom é 100%
• h1 parte do título branco 38 pixels centralizado altura da linha de exibição 80 pixels
• O módulo de tempo showTime posiciona o lado direito em 30px, a altura da linha em 75px, a cor do texto em: rgba(255, 255, 255, 0.7) e o tamanho do texto em 20 pixels

// 格式： 当前时间：2020年3月17-0时54分14秒
<script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
      
      
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
 </script>

   
   
    
    

   
   
    
    

• Estilo CSS da parte do cabeçalho

header {
      
      
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
      
      
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
      
      
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

   
   
    
    

   
   
    
    

Módulo principal de 05 caixas principais

• Requer um preenchimento de 10px na parte superior e esquerda
• coluna contêiner de coluna, dividido em três colunas, representando 3:5:3

estilo css:

.mainbox {
      
      
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
      
      
    flex: 3;
  }
  &:nth-child(2) {
      
      
    flex: 5;
  }
}

   
   
    
    

   
   
    
    

Efeito atual

06-Painel de módulo de painel público

• A altura é 310px
• Borda rgba sólida de 1px (25, 186, 139, 0,17)
• Há uma imagem de fundo line.jpg
• O preenchimento é 0 na parte superior, 15px à esquerda e à direita e 40px na parte inferior.
• A margem inferior é de 15px
• Use a caixa do painel antes e depois para fazer os dois cantos superiores com 10px e a linha com 2px sólida #02a6b5
• Adicione uma nova caixa (rodapé do painel) antes e depois e faça com que a largura e a altura dos dois cantos inferiores sejam 10px

.panel {
      
      
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
      
      
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
      
      
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
      
      
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      
      
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      
      
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

   
   
    
    

   
   
    
    

     
     

    
    /ul>
   
   
    
    

Módulo 07-Bar (layout)

• A altura do módulo de título h2 é 48px, a cor do texto é branca, o tamanho do texto é 20px

• Altura do gráfico do módulo de conteúdo do ícone 240px

• O acima pode ser usado como parte de estilo público do painel

  h2 {
      
      
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
      
      
    height: 3rem;
    background-color: pink;
  }

   
   
    
    

   
   
    
    

08-Layout intermediário

• O acima não é nenhum módulo digital
• Abaixo está o módulo do mapa do mapa

1. O módulo digital não possui cor de fundo rgba (101, 132, 226, 0.1); e preenchimento de 15 pixels
2. Observe que a coluna do meio possui margens de 10px à esquerda e 15px na parte inferior.
3. O módulo no é dividido em partes superior e inferior. A parte superior são números (no-hd) e a parte inferior são descrições de texto relacionadas (no-bd).
4. módulos digitais no-hd têm uma borda de 1px rgba sólido (25, 186, 139, 0,17)
5. O módulo digital no-hd é dividido em dois li's pequenos. A altura de cada li pequeno é 80px, o tamanho do texto é 70px, a cor é #ffeb7b e a fonte é a fonte do ícone electronicFont.
6. no-hd usa depois e antes para criar 2 cantos pequenos, a borda é sólida de 2px #02a6b5, a largura é 30px e a altura é 10px
7. A pequena linha vertical para o primeiro li pequeno depois pode ter 1px de largura e a cor de fundo é rgba (255, 255, 255, 0,2); a altura é 50% e os 25% superiores são suficientes.
8. Existem também dois pequenos li's no no-bd. A altura é 40px, a cor do texto é rgba (255, 255, 255, 0,7), o tamanho do texto é 18px e a margem superior é 10px.

/* 声明字体*/
@font-face {
      
      
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

   
   
    
    

   
   
    
    

Produção de módulo de mapa:

1. A altura do módulo de mapa é 810px. Ele contém quatro gráficos de caixa. A caixa esférica que contém o módulo de gráfico gira 1 e gira 2.

2. O tamanho do módulo de imagem esférica map1 é 518px. Uma imagem de fundo precisa ser adicionada porque ela precisa ser dimensionada em 100% e posicionada no centro da transparência.3
   

3. Gire 1 mapa 2. O tamanho é 643px. Você precisa adicionar uma imagem de fundo porque ela precisa ser dimensionada em 100%. Posicione-a no centro para obter transparência. 6. Use o índice z para manter a esfera pressionada para animação de rotação.
   

4. O tamanho do mapa3 da rotação 2 é 566 px. Você precisa adicionar uma imagem de fundo porque ela precisa ser dimensionada em 100%. Posicione a animação de rotação central. Observe que ela está no sentido anti-horário.
   

 <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>125811</li>
                        <li>104563</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>

   
   
    
    

   
   
    
    

estilo intermediário

/* 声明字体*/
@font-face {
      
      
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
.no {
      
      
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd {
      
      
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      
      
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
      
      
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
      
      
      display: flex;
      li {
      
      
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
      
      
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }
  .no-bd ul {
      
      
    display: flex;
    li {
      
      
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}
.map {
      
      
  position: relative;
  height: 10.125rem;
  .chart {
      
      
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }
  .map1,
  .map2,
  .map3 {
      
      
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(../images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
      
      
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(../images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }
  .map3 {
      
      
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(../images/jt.png);
    animation: rotate1 10s linear infinite;
  }
  @keyframes rotate {
      
      
    from {
      
      
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      
      
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
      
      
    from {
      
      
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      
      
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

   
   
    
    

   
   
    
    

09-Echarts-Introdução

Bibliotecas comuns de visualização de dados:

• D3.js é atualmente a biblioteca de ferramentas de visualização Javascript com melhor classificação na Web (difícil de obter)
• ECharts.js é uma biblioteca de visualização de dados Javascript de código aberto produzida pela Baidu.
• Highcharts.js é uma biblioteca estrangeira de visualização de dados front-end, gratuita para uso não comercial e usada por muitas grandes empresas estrangeiras.
• Solução de visualização de dados de nova geração da AntV Ant Financial e muito mais
• Highcharts e Echarts são como a relação entre Office e WPS

ECharts é uma biblioteca de visualização de código aberto implementada em JavaScript. Ela pode ser executada sem problemas em PCs e dispositivos móveis. É compatível com a maioria dos navegadores atuais (IE8/9/10/11, Chrome, Firefox, Safari, etc.). A camada subjacente depende de gráficos vetoriais. A biblioteca ZRender fornece gráficos de visualização de dados intuitivos, interativos e altamente personalizáveis.

Vernáculo:

• É um plug-in JS
• Bom desempenho e pode funcionar perfeitamente em PC e dispositivos móveis
• Compatível com os principais navegadores
• Muitos gráficos comumente usados ​​são fornecidos e podem ser personalizados .
  • Gráfico de linhas , gráfico de barras , gráfico de dispersão , gráfico de pizza , gráfico de linhas K

Endereço do site oficial: https://www.echartsjs.com/zh/index.html

10-Echarts-Experiência

Tutorial oficial: [Comece a usar ECharts em cinco minutos](https://www.echartsjs.com/zh/tutorial.html#Comece a usar ECharts em cinco minutos)

• Baixe echarts https://github.com/apache/incubator-echarts/tree/4.5.0

Etapas para uso:

1. Introduzir o arquivo de plug-in echarts na página HTML
2. Prepare um contêiner DOM com um determinado tamanho

<div id="main" style="width: 600px;height:400px;"></div>

   
   
    
    

   
   
    
    

3. Inicializar objeto de instância de echarts

var myChart = echarts.init(document.getElementById('main'));

   
   
    
    

   
   
    
    

4. Especifique itens e dados de configuração (opção)

var option = {
      
      
    xAxis: {
      
      
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      
      
        type: 'value'
    },
    series: [{
      
      
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

   
   
    
    

   
   
    
    

5. Definir itens de configuração para objeto de instância echarts

myChart.setOption(option);

   
   
    
    

   
   
    
    

11-Echarts-Configuração básica

Isso exige que os alunos conheçam a função principal de cada módulo nas configurações a seguir.

Principais configurações que você precisa saber:series xAxis yAxis grid tooltip title legend color

• Series

  • Lista de séries. Cada série typedetermina seu próprio tipo de gráfico por
  • Em inglês simples: dados de ícone, especificando que tipo de ícone, vários gráficos podem se sobrepor.

• xAxis: eixo x na grade do sistema de coordenadas retangulares

  • borderGap: A estratégia de espaço em branco em ambos os lados do eixo de coordenadas é verdadeira. Neste momento, a escala é usada apenas como linha divisória, e os rótulos e pontos de dados estarão no meio da faixa entre as duas escalas.

• Eixo y: eixo y na grade do sistema de coordenadas retangulares

• grid: Grade de desenho no sistema de coordenadas cartesianas.

• título: componente do título

• dica de ferramenta: componente da caixa de prompt

• legenda: componente de legenda

• cor: lista de cores da paleta

  stackEmpilhamento de dados, após uma série no mesmo eixo de categoria ser configurada com o mesmo valor, o valor da próxima série será somado ao valor da série anterior.
  

option = {
      
      
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
      
      
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
      
      
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
      
      
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
      
      
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
      
      
        feature: {
      
      
            saveAsImage: {
      
      }
        }
    },
    // 设置x轴的相关配置
    xAxis: {
      
      
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
      
      
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
      
      
            name: '邮件营销',
            type: 'line',           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
      
      
            name: '联盟广告',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
      
      
            name: '视频广告',
            type: 'line',          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
      
      
            name: '直接访问',
            type: 'line',          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

   
   
    
    

   
   
    
    

Execução imediata de funções

Como existem vários itens de configuração de opções, este problema pode ser resolvido usando a função de execução imediata

12- Gráfico de barras (duas etapas)

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
• Personalize gráficos de acordo com suas necessidades

1. Introduzido na página HTML

// 柱状图1模块
(function() {
      
      
  // 实例化对象
  let myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  let option = {
      
      
    color: ["#3398DB"],
    tooltip: {
      
      
      trigger: "axis",
      axisPointer: {
      
      
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      
      
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
      
      
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
      
      
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
      
      
        type: "value"
      }
    ],
    series: [
      {
      
      
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };
  // 把配置给实例对象
  myChart.setOption(option);
})();

   
   
    
    

   
   
    
    

2. Personalizado de acordo com as necessidades

   • Modificar a cor da coluna do gráfico #2f89cf

   • Modifique o tamanho do gráfico superior para 10px e inferior para 4%.A grade determina o tamanho do nosso histograma.

   color: ["#2f89cf"],
   grid: {
      
      
     left: "0%",
     top: "10px",
     right: "0%",
     bottom: "4%",
     containLabel: true
   },

   
   
    
    

   
   
    
    

• Configurações relacionadas ao eixo X xAxis
• A cor do texto está definida como rgba (255.255.255,.6) e o tamanho da fonte é 12px
• O estilo da linha do eixo X não é exibido

   // 设置x轴标签文字样式
  // x轴的文字颜色和大小
        axisLabel: {
      
      
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
   //  x轴样式不显示
   axisLine: {
      
      
       show: false
       // 如果想要设置单独的线条样式 
       // lineStyle: {
      
      
       //    color: "rgba(255,255,255,.1)",
       //    width: 1,
       //    type: "solid"
      }
   }

   
   
    
    

   
   
    
    

• Personalização relacionada ao eixo Y
  • A cor do texto está definida como rgba (255.255.255,.6) e o tamanho da fonte é 12px
  • Altere o estilo da linha do eixo Y para uma borda rgba (255.255.255,.1) de 1 pixel
  • A cor do divisor é modificada para 1 pixel rgba (255.255.255,.1)

   // y 轴文字标签样式
   axisLabel: {
      
      
         color: "rgba(255,255,255,.6)",
          fontSize: "12"
   },
    // y轴线条样式
    axisLine: {
      
      
         lineStyle: {
      
      
            color: "rgba(255,255,255,.1)",
            // width: 1,
            // type: "solid"
         }
   5232},
    // y 轴分隔线样式
   splitLine: {
      
      
       lineStyle: {
      
      
          color: "rgba(255,255,255,.1)"
        }
   }

   
   
    
    

   
   
    
    

• Modifique o formato da coluna para cantos arredondados e defina a largura da coluna em série

 series: [
       {
      
      
         name: "直接访问",
         type: "bar",
         // 修改柱子宽度
         barWidth: "35%",
         data: [10, 52, 200, 334, 390, 330, 220],
         itemStyle: {
      
      
           // 修改柱子圆角
           barBorderRadius: 5
         }
       }
     ]
   };

   
   
    
    

   
   
    
    

• Substitua os dados correspondentes

   // x轴中更换data数据
    data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
   // series 更换数据
    data: [200, 300, 300, 900, 1500, 1200, 600]

   
   
    
    

   
   
    
    

• Faça o gráfico se adaptar à tela

  window.addEventListener("resize", function() {
      
      
    myChart.resize();
  });

   
   
    
    

   
   
    
    

Personalização do gráfico 2 de 13 barras

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  

• Personalize gráficos de acordo com suas necessidades

Requisito 1: Modifique a grade de tamanho gráfico

  // 图标位置
    grid: {
      
      
      top: "10%",
      left: "22%",
      bottom: "10%"
    },

   
   
    
    

   
   
    
    

Requisito 2: Não exibir o eixo x

   xAxis: {
      
      
      show: false
    },

   
   
    
    

   
   
    
    

Requisito 3: personalização relacionada ao eixo y

• Não exibir o eixo y e escalas relacionadas

//不显示y轴线条
axisLine: {
      
      
    show: false
        },
// 不显示刻度
axisTick: {
      
      
   show: false
},

   
   
    
    

   
   
    
    

• Defina a cor do texto do eixo y como branco

   axisLabel: {
      
      
          color: "#fff"
   },

   
   
    
    

   
   
    
    

Requisito 4: Modifique os estilos relacionados do primeiro grupo de colunas (faixas)

name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {
      
      
    normal: {
      
      
      barBorderRadius: 20,       
    }
},

   
   
    
    

   
   
    
    

• Defina os dados de exibição percentual no primeiro grupo de colunas

// 图形上的文本标签
label: {
      
      
    normal: {
      
      
         show: true,
         // 图形内显示
         position: "inside",
         // 文字的显示格式
         formatter: "{c}%"
     }
},

   
   
    
    

   
   
    
    

• Defina o primeiro grupo de colunas com uma cor diferente

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  itemStyle: {
      
      
          normal: {
      
      
            barBorderRadius: 20,  
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }         
},

   
   
    
    

   
   
    
    

Requisito 5: Modificar a configuração relacionada do segundo grupo de pilares (formato de caixa)

  	    name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        itemStyle: {
      
      
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }

   
   
    
    

   
   
    
    

Requisito 6: Adicione um segundo conjunto de dados ao eixo y

yAxis: [
      {
      
      
      type: "category",
      data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
      // 不显示y轴的线
      axisLine: {
      
      
        show: false
      },
      // 不显示刻度
      axisTick: {
      
      
        show: false
      },
      // 把刻度标签里面的文字颜色设置为白色
      axisLabel: {
      
      
        color: "#fff"
      }
    },
      {
      
      
        show: true,
        data: [702, 350, 610, 793, 664],
           // 不显示y轴的线
      axisLine: {
      
      
        show: false
      },
      // 不显示刻度
      axisTick: {
      
      
        show: false
      },
        axisLabel: {
      
      
          textStyle: {
      
      
            fontSize: 12,
            color: "#fff"
          }
        }
      }
    ],

   
   
    
    

   
   
    
    

Requisito 7: Configure dois conjuntos de pilhas de colunas e substitua os dados

// 给series  第一个对象里面的 添加 
yAxisIndex: 0,
// 给series  第二个对象里面的 添加 
yAxisIndex: 1,
// series 第一个对象里面的data
data: [70, 34, 60, 78, 69],
// series 第二个对象里面的data
data: [100, 100, 100, 100, 100],
// y轴更换第一个对象更换data数据
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// y轴更换第二个对象更换data数据
data:[702, 350, 610, 793, 664],

   
   
    
    

   
   
    
    

Depois de adicionar yAxiosIndex

e alterar os dados:

Código completo:

// 柱状图2
(function() {
      
      
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据
  var option = {
      
      
    grid: {
      
      
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
      
      
      show: false
    },
    yAxis: [
      {
      
      
        type: "category",
        inverse: true,
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // 不显示y轴的线
        axisLine: {
      
      
          show: false
        },
        // 不显示刻度
        axisTick: {
      
      
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
      
      
          color: "#fff"
        }
      },
      {
      
      
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示y轴的线
        axisLine: {
      
      
          show: false
        },
        // 不显示刻度
        axisTick: {
      
      
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
      
      
          color: "#fff"
        }
      }
    ],
    series: [
      {
      
      
        name: "条",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        // 修改第一组柱子的圆角
        itemStyle: {
      
      
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function(params) {
      
      
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
      
      
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%"
        }
      },
      {
      
      
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
      
      
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]
  };
  // 3. 把配置给实例对象
  myChart.setOption(option);
})();

   
   
    
    

   
   
    
    

14- Gráfico de linhas 1 Produção do módulo de mudança de pessoal

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  

• Personalize gráficos de acordo com suas necessidades

Requisito 1: Modifique o tamanho do gráfico de linhas, exiba a cor de configuração da borda: #012f4a e exiba o rótulo da escala.

    // 设置网格样式
    grid: {
      
       
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },

   
   
    
    

   
   
    
    

Requisito 2: Modifique a cor do texto #4c9bfd no componente da legenda e defina a distância correta para 10%

 // 图例组件
    legend: {
      
      
      textStyle: {
      
      
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },

   
   
    
    

   
   
    
    

Requisito 3: configuração relacionada ao eixo x

• remoção de incrustações
• cor da fonte do rótulo do eixo x: #4c9bfd
• Elimine a cor do eixo de coordenadas x (use a linha divisória do eixo Y no futuro)
• Não há necessidade de espaçamento interno borderGap em ambas as extremidades do eixo.

    xAxis: {
      
      
      type: 'category',
      data: ["周一", "周二"],
	  axisTick: {
      
      
         show: false // 去除刻度线
       },
       axisLabel: {
      
      
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
      
      
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

   
   
    
    

   
   
    
    

Requisito 4: Personalização do eixo y

• remoção de incrustações
• Cor da fonte: #4c9bfd
• Cor da linha divisória: #012f4a

    yAxis: {
      
      
      type: 'value',
      axisTick: {
      
      
        show: false  // 去除刻度
      },
      axisLabel: {
      
      
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
      
      
        lineStyle: {
      
      
          color: '#012f4a' // 分割线颜色
        }
      }
    },

   
   
    
    

   
   
    
    

Requisito 5: Personalização de gráficos de duas linhas

• Cores: #00f2f1 #ed3f35
• Modifique a polilinha para ser suave. Adicione suave para verdadeiro nos dados da série.

    color: ['#00f2f1', '#ed3f35'],
	series: [{
      
      
      name:'新增粉丝',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
      
      
      name:'新增游客',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

   
   
    
    

   
   
    
    

Requisito 6: Dados de configuração

// x轴的文字
xAxis: {
      
      
  type: 'category',
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

   
   
    
    

   
   
    
    

// 图标数据
    series: [{
      
      
      name:'新增粉丝',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
      
      
      name:'新增游客',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

   
   
    
    

   
   
    
    

Requisito 7: Novo clique de demanda nas alterações de dados em 2020 e 2021

A seguir estão os dados enviados em segundo plano (solicitados pelo ajax)

 var yearData = [
      {
      
      
        year: '2020',  // 年份
        data: [  // 两个数组是因为有两条线
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      },
      {
      
      
        year: '2021',  // 年份
        data: [  // 两个数组是因为有两条线
             [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
     		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
      }
     ];

   
   
    
    

   
   
    
    

• evento de troca da barra de guias
• Clicar no botão 2020 requer a alteração dos dados no primeiro objeto da série para dados[0] no objeto 2020.
• Clicar no botão 2020 requer a alteração dos dados do segundo objeto da série para os dados[1] do objeto 2020.
• O mesmo vale para o botão 2021.

Código completo:

// 折线图1模块制作
(function() {
      
      
  var yearData = [
    {
      
      
      year: "2020", // 年份
      data: [
        // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
      
      
      year: "2021", // 年份
      data: [
        // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line .chart"));
  // 2.指定配置
  var option = {
      
      
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      
      
      trigger: "axis"
    },
    legend: {
      
      
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
      
      
        color: "#4c9bfd"
      },
      // 这个10% 必须加引号
      right: "10%"
    },
    grid: {
      
      
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    xAxis: {
      
      
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      axisTick: {
      
      
        show: false // 去除刻度线
      },
      axisLabel: {
      
      
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
      
      
        show: false // 去除轴线
      }
    },
    yAxis: {
      
      
      type: "value",
      axisTick: {
      
      
        show: false // 去除刻度线
      },
      axisLabel: {
      
      
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
      
      
        show: false // 去除轴线
      },
      splitLine: {
      
      
        lineStyle: {
      
      
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
      
      
        name: "新增粉丝",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: yearData[0].data[0]
      },
      {
      
      
        name: "新增游客",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      }
    ]
  };
  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
      
      
    myChart.resize();
  });
  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
      
      
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();

   
   
    
    

   
   
    
    

15- Gráfico de Linhas 2 Ver Produção do Módulo de Volume

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  

• Personalize gráficos de acordo com suas necessidades

Requisito 1: Altere a cor do texto do componente de legenda para rgba(255.255.255,.5) e o tamanho do texto para 12

 legend: {
      
      
      top: "0%",
      textStyle: {
      
      
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
},

   
   
    
    

   
   
    
    

Requisito 2: Modifique o tamanho do gráfico

grid: {
      
      
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

   
   
    
    

   
   
    
    

Requisito 3: Modificar a configuração relacionada ao eixo x

• Modifique a cor do texto para rgba(255.255.255,.6) e o tamanho do texto para 12
• A cor do eixo x é rgba(255.255.255,.2)

     // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
     axisLabel: {
      
      
          textStyle: {
      
      
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
         // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
      
      
          lineStyle: {
      
      
            color: "rgba(255,255,255,.2)"
          }
        },

   
   
    
    

   
   
    
    

Requisito 4: Modifique a configuração relevante do eixo y

        axisTick: {
      
       show: false },
        axisLine: {
      
      
          lineStyle: {
      
      
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
      
      
          textStyle: {
      
      
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
	   // 修改分割线的颜色
        splitLine: {
      
      
          lineStyle: {
      
      
            color: "rgba(255,255,255,.1)"
          }
        }      

   
   
    
    

   
   
    
    

Requisito 5: Modificar a configuração dos dois módulos de linha (observe que é customizado na série)

       //第一条 线是圆滑
       smooth: true,
        // 单独修改线的样式
        lineStyle: {
      
      
            color: "#0184d5",
            width: 2 
        },
         // 填充区域
        areaStyle: {
      
      
              // 渐变色，只需要复制即可
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
      
      
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                },
                {
      
      
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
       itemStyle: {
      
      
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

   
   
    
    

   
   
    
    

       name: "转发量",
        type: "line",
        smooth: true,
        lineStyle: {
      
      
          normal: {
      
      
            color: "#00d887",
            width: 2
          }
         },
         areaStyle: {
      
      
          normal: {
      
      
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
      
      
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
      
      
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
         itemStyle: {
      
      
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

   
   
    
    

   
   
    
    

Requisito 6: Substitua os dados

// x轴更换数据
data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
// series  第一个对象data数据
 data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
// series  第二个对象data数据
 data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],

Produção do módulo de distribuição etária do gráfico de 16 pizzas 1

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  
  

• Personalize gráficos de acordo com suas necessidades

Requisitos de gráfico personalizado 1:

• Modifique o componente da legenda para ser exibido na parte inferior e centralizado.
• Altere a largura e a altura de cada ícone pequeno para 10px
• O tamanho do texto é 12 cores rgba (255.255.255, 0,5)

 legend: {
    
    
      // 距离底部为0%
      bottom: "0%",
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      data: ['直接访问', '邮件营销', 

1. Pilha de tecnologia do curso

Exibição do projeto

A conclusão deste projeto requer conhecimento de:

• layout div+css
• layout flexível
• Menos
• Use js + jquery nativos
• adaptação rem
• noções básicas de echarts
  

Experiência online (recomendado)

https://yangyanyan.top/echarts-jobmap/

Código fonte

Lembre-se de dar uma estrela
https://gitee.com/yyy1203/echarts-jobmap.git

2. Introdução à visualização de dados

Se você olhar apenas os dados, não terá uma sensação intuitiva.

3. Explicação detalhada das etapas do projeto

Introdução ao painel de visualização

Em resposta à tendência atual de visualização de dados, cada vez mais empresas precisam usar gráficos visuais para exibir dados em vários cenários (dados de marketing, dados de produção, dados do usuário), tornando os dados mais intuitivos e as características dos dados mais proeminentes.

01-Use tecnologia

A conclusão deste projeto requer conhecimento de:

• layout div+css
• layout flexível
• Menos
• Use js + jquery nativos
• adaptação rem
• noções básicas de echarts

02- Solução de adaptação de case

• O rascunho do design é 1920px

  1. flexível.js divide a tela em 24 partes iguais

  2. O valor base do plug-in cssrem é 80px

     Botão Plug-in-Configuração - Definir configurações de extensão - Configurações de tamanho da fonte raiz.
     
     Mas não se esqueça de reiniciar o software vscode para garantir que ele tenha efeito

03-Configurações básicas

• body define a imagem de fundo, zoom para 100%, altura da linha 1,15
• inicialização css

Layout de 04 cabeçalhos

• A altura é 100px
• Imagem de fundo, exibida dentro do contêiner
• A taxa de zoom é 100%
• h1 parte do título branco 38 pixels centralizado altura da linha de exibição 80 pixels
• O módulo de tempo showTime posiciona o lado direito em 30px, a altura da linha em 75px, a cor do texto em: rgba(255, 255, 255, 0.7) e o tamanho do texto em 20 pixels

// 格式： 当前时间：2020年3月17-0时54分14秒
<script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
    
    
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
 </script>

   
   
  
  

   
   
  
  

• Estilo CSS da parte do cabeçalho

header {
    
    
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    
    
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    
    
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

   
   
  
  

   
   
  
  

Módulo principal de 05 caixas principais

• Requer um preenchimento de 10px na parte superior e esquerda
• coluna contêiner de coluna, dividido em três colunas, representando 3:5:3

estilo css:

.mainbox {
    
    
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
    
    
    flex: 3;
  }
  &:nth-child(2) {
    
    
    flex: 5;
  }
}

   
   
  
  

   
   
  
  

Efeito atual

06-Painel de módulo de painel público

• A altura é 310px
• Borda rgba sólida de 1px (25, 186, 139, 0,17)
• Há uma imagem de fundo line.jpg
• O preenchimento é 0 na parte superior, 15px à esquerda e à direita e 40px na parte inferior.
• A margem inferior é de 15px
• Use a caixa do painel antes e depois para fazer os dois cantos superiores com 10px e a linha com 2px sólida #02a6b5
• Adicione uma nova caixa (rodapé do painel) antes e depois e faça com que a largura e a altura dos dois cantos inferiores sejam 10px

.panel {
    
    
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
    
    
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    
    
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    
    
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
    
    
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
    
    
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

   
   
  
  

   
   
  
  

   
   

    
    /ul>
   
   
  
  

Módulo 07-Bar (layout)

• A altura do módulo de título h2 é 48px, a cor do texto é branca, o tamanho do texto é 20px

• Altura do gráfico do módulo de conteúdo do ícone 240px

• O acima pode ser usado como parte de estilo público do painel

  h2 {
    
    
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
    
    
    height: 3rem;
    background-color: pink;
  }

   
   
  
  

   
   
  
  

08-Layout intermediário

• O acima não é nenhum módulo digital
• Abaixo está o módulo do mapa do mapa

1. O módulo digital não possui cor de fundo rgba (101, 132, 226, 0.1); e preenchimento de 15 pixels
2. Observe que a coluna do meio possui margens de 10px à esquerda e 15px na parte inferior.
3. O módulo no é dividido em partes superior e inferior. A parte superior são números (no-hd) e a parte inferior são descrições de texto relacionadas (no-bd).
4. módulos digitais no-hd têm uma borda de 1px rgba sólido (25, 186, 139, 0,17)
5. O módulo digital no-hd é dividido em dois li's pequenos. A altura de cada li pequeno é 80px, o tamanho do texto é 70px, a cor é #ffeb7b e a fonte é a fonte do ícone electronicFont.
6. no-hd usa depois e antes para criar 2 cantos pequenos, a borda é sólida de 2px #02a6b5, a largura é 30px e a altura é 10px
7. A pequena linha vertical para o primeiro li pequeno depois pode ter 1px de largura e a cor de fundo é rgba (255, 255, 255, 0,2); a altura é 50% e os 25% superiores são suficientes.
8. Existem também dois pequenos li's no no-bd. A altura é 40px, a cor do texto é rgba (255, 255, 255, 0,7), o tamanho do texto é 18px e a margem superior é 10px.

/* 声明字体*/
@font-face {
    
    
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

   
   
  
  

   
   
  
  

Produção de módulo de mapa:

1. A altura do módulo de mapa é 810px. Ele contém quatro gráficos de caixa. A caixa esférica que contém o módulo de gráfico gira 1 e gira 2.

2. O tamanho do módulo de imagem esférica map1 é 518px. Uma imagem de fundo precisa ser adicionada porque ela precisa ser dimensionada em 100% e posicionada no centro da transparência.3
   

3. Gire 1 mapa 2. O tamanho é 643px. Você precisa adicionar uma imagem de fundo porque ela precisa ser dimensionada em 100%. Posicione-a no centro para obter transparência. 6. Use o índice z para manter a esfera pressionada para animação de rotação.
   

4. O tamanho do mapa3 da rotação 2 é 566 px. Você precisa adicionar uma imagem de fundo porque ela precisa ser dimensionada em 100%. Posicione a animação de rotação central. Observe que ela está no sentido anti-horário.
   

 <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>125811</li>
                        <li>104563</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>

   
   
  
  

   
   
  
  

estilo intermediário

/* 声明字体*/
@font-face {
    
    
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
.no {
    
    
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd {
    
    
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
    
    
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
    
    
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
    
    
      display: flex;
      li {
    
    
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
    
    
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }
  .no-bd ul {
    
    
    display: flex;
    li {
    
    
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}
.map {
    
    
  position: relative;
  height: 10.125rem;
  .chart {
    
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }
  .map1,
  .map2,
  .map3 {
    
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(../images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    
    
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(../images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }
  .map3 {
    
    
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(../images/jt.png);
    animation: rotate1 10s linear infinite;
  }
  @keyframes rotate {
    
    
    from {
    
    
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
    
    
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
    
    
    from {
    
    
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
    
    
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

   
   
  
  

   
   
  
  

09-Echarts-Introdução

Bibliotecas comuns de visualização de dados:

• D3.js é atualmente a biblioteca de ferramentas de visualização Javascript com melhor classificação na Web (difícil de obter)
• ECharts.js é uma biblioteca de visualização de dados Javascript de código aberto produzida pela Baidu.
• Highcharts.js é uma biblioteca estrangeira de visualização de dados front-end, gratuita para uso não comercial e usada por muitas grandes empresas estrangeiras.
• Solução de visualização de dados de nova geração da AntV Ant Financial e muito mais
• Highcharts e Echarts são como a relação entre Office e WPS

ECharts é uma biblioteca de visualização de código aberto implementada em JavaScript. Ela pode ser executada sem problemas em PCs e dispositivos móveis. É compatível com a maioria dos navegadores atuais (IE8/9/10/11, Chrome, Firefox, Safari, etc.). A camada subjacente depende de gráficos vetoriais. A biblioteca ZRender fornece gráficos de visualização de dados intuitivos, interativos e altamente personalizáveis.

Vernáculo:

• É um plug-in JS
• Bom desempenho e pode funcionar perfeitamente em PC e dispositivos móveis
• Compatível com os principais navegadores
• Muitos gráficos comumente usados ​​são fornecidos e podem ser personalizados .
  • Gráfico de linhas , gráfico de barras , gráfico de dispersão , gráfico de pizza , gráfico de linhas K

Endereço do site oficial: https://www.echartsjs.com/zh/index.html

10-Echarts-Experiência

Tutorial oficial: [Comece a usar ECharts em cinco minutos](https://www.echartsjs.com/zh/tutorial.html#Comece a usar ECharts em cinco minutos)

• Baixe echarts https://github.com/apache/incubator-echarts/tree/4.5.0

Etapas para uso:

1. Introduzir o arquivo de plug-in echarts na página HTML
2. Prepare um contêiner DOM com um determinado tamanho

<div id="main" style="width: 600px;height:400px;"></div>

   
   
  
  

   
   
  
  

3. Inicializar objeto de instância de echarts

var myChart = echarts.init(document.getElementById('main'));

   
   
  
  

   
   
  
  

4. Especifique itens e dados de configuração (opção)

var option = {
    
    
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

   
   
  
  

   
   
  
  

5. Definir itens de configuração para objeto de instância echarts

myChart.setOption(option);

   
   
  
  

   
   
  
  

11-Echarts-Configuração básica

Isso exige que os alunos conheçam a função principal de cada módulo nas configurações a seguir.

Principais configurações que você precisa saber:series xAxis yAxis grid tooltip title legend color

• Series

  • Lista de séries. Cada série typedetermina seu próprio tipo de gráfico por
  • Em inglês simples: dados de ícone, especificando que tipo de ícone, vários gráficos podem se sobrepor.

• xAxis: eixo x na grade do sistema de coordenadas retangulares

  • borderGap: A estratégia de espaço em branco em ambos os lados do eixo de coordenadas é verdadeira. Neste momento, a escala é usada apenas como linha divisória, e os rótulos e pontos de dados estarão no meio da faixa entre as duas escalas.

• Eixo y: eixo y na grade do sistema de coordenadas retangulares

• grid: Grade de desenho no sistema de coordenadas cartesianas.

• título: componente do título

• dica de ferramenta: componente da caixa de prompt

• legenda: componente de legenda

• cor: lista de cores da paleta

  stackEmpilhamento de dados, após uma série no mesmo eixo de categoria ser configurada com o mesmo valor, o valor da próxima série será somado ao valor da série anterior.
  

option = {
    
    
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
    
    
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
    
    
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
    
    
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
    
    
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
    
    
        feature: {
    
    
            saveAsImage: {
    
    }
        }
    },
    // 设置x轴的相关配置
    xAxis: {
    
    
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
    
    
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
    
    
            name: '邮件营销',
            type: 'line',           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
    
    
            name: '联盟广告',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
    
    
            name: '视频广告',
            type: 'line',          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
    
    
            name: '直接访问',
            type: 'line',          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

   
   
  
  

   
   
  
  

Execução imediata de funções

Como existem vários itens de configuração de opções, este problema pode ser resolvido usando a função de execução imediata

12- Gráfico de barras (duas etapas)

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
• Personalize gráficos de acordo com suas necessidades

1. Introduzido na página HTML

// 柱状图1模块
(function() {
    
    
  // 实例化对象
  let myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  let option = {
    
    
    color: ["#3398DB"],
    tooltip: {
    
    
      trigger: "axis",
      axisPointer: {
    
    
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
    
    
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
    
    
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
    
    
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
    
    
        type: "value"
      }
    ],
    series: [
      {
    
    
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };
  // 把配置给实例对象
  myChart.setOption(option);
})();

   
   
  
  

   
   
  
  

2. Personalizado de acordo com as necessidades

   • Modificar a cor da coluna do gráfico #2f89cf

   • Modifique o tamanho do gráfico superior para 10px e inferior para 4%.A grade determina o tamanho do nosso histograma.

   color: ["#2f89cf"],
   grid: {
    
    
     left: "0%",
     top: "10px",
     right: "0%",
     bottom: "4%",
     containLabel: true
   },

   
   
  
  

   
   
  
  

• Configurações relacionadas ao eixo X xAxis
• A cor do texto está definida como rgba (255.255.255,.6) e o tamanho da fonte é 12px
• O estilo da linha do eixo X não é exibido

   // 设置x轴标签文字样式
  // x轴的文字颜色和大小
        axisLabel: {
    
    
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
   //  x轴样式不显示
   axisLine: {
    
    
       show: false
       // 如果想要设置单独的线条样式 
       // lineStyle: {
    
    
       //    color: "rgba(255,255,255,.1)",
       //    width: 1,
       //    type: "solid"
      }
   }

   
   
  
  

   
   
  
  

• Personalização relacionada ao eixo Y
  • A cor do texto está definida como rgba (255.255.255,.6) e o tamanho da fonte é 12px
  • Altere o estilo da linha do eixo Y para uma borda rgba (255.255.255,.1) de 1 pixel
  • A cor do divisor é modificada para 1 pixel rgba (255.255.255,.1)

   // y 轴文字标签样式
   axisLabel: {
    
    
         color: "rgba(255,255,255,.6)",
          fontSize: "12"
   },
    // y轴线条样式
    axisLine: {
    
    
         lineStyle: {
    
    
            color: "rgba(255,255,255,.1)",
            // width: 1,
            // type: "solid"
         }
   5232},
    // y 轴分隔线样式
   splitLine: {
    
    
       lineStyle: {
    
    
          color: "rgba(255,255,255,.1)"
        }
   }

   
   
  
  

   
   
  
  

• Modifique o formato da coluna para cantos arredondados e defina a largura da coluna em série

 series: [
       {
    
    
         name: "直接访问",
         type: "bar",
         // 修改柱子宽度
         barWidth: "35%",
         data: [10, 52, 200, 334, 390, 330, 220],
         itemStyle: {
    
    
           // 修改柱子圆角
           barBorderRadius: 5
         }
       }
     ]
   };

   
   
  
  

   
   
  
  

• Substitua os dados correspondentes

   // x轴中更换data数据
    data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
   // series 更换数据
    data: [200, 300, 300, 900, 1500, 1200, 600]

   
   
  
  

   
   
  
  

• Faça o gráfico se adaptar à tela

  window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

   
   
  
  

   
   
  
  

Personalização do gráfico 2 de 13 barras

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  

• Personalize gráficos de acordo com suas necessidades

Requisito 1: Modifique a grade de tamanho gráfico

  // 图标位置
    grid: {
    
    
      top: "10%",
      left: "22%",
      bottom: "10%"
    },

   
   
  
  

   
   
  
  

Requisito 2: Não exibir o eixo x

   xAxis: {
    
    
      show: false
    },

   
   
  
  

   
   
  
  

Requisito 3: personalização relacionada ao eixo y

• Não exibir o eixo y e escalas relacionadas

//不显示y轴线条
axisLine: {
    
    
    show: false
        },
// 不显示刻度
axisTick: {
    
    
   show: false
},

   
   
  
  

   
   
  
  

• Defina a cor do texto do eixo y como branco

   axisLabel: {
    
    
          color: "#fff"
   },

   
   
  
  

   
   
  
  

Requisito 4: Modifique os estilos relacionados do primeiro grupo de colunas (faixas)

name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {
    
    
    normal: {
    
    
      barBorderRadius: 20,       
    }
},

   
   
  
  

   
   
  
  

• Defina os dados de exibição percentual no primeiro grupo de colunas

// 图形上的文本标签
label: {
    
    
    normal: {
    
    
         show: true,
         // 图形内显示
         position: "inside",
         // 文字的显示格式
         formatter: "{c}%"
     }
},

   
   
  
  

   
   
  
  

• Defina o primeiro grupo de colunas com uma cor diferente

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  itemStyle: {
    
    
          normal: {
    
    
            barBorderRadius: 20,  
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }         
},

   
   
  
  

   
   
  
  

Requisito 5: Modificar a configuração relacionada do segundo grupo de pilares (formato de caixa)

  	    name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        itemStyle: {
    
    
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }

   
   
  
  

   
   
  
  

Requisito 6: Adicione um segundo conjunto de dados ao eixo y

yAxis: [
      {
    
    
      type: "category",
      data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
      // 不显示y轴的线
      axisLine: {
    
    
        show: false
      },
      // 不显示刻度
      axisTick: {
    
    
        show: false
      },
      // 把刻度标签里面的文字颜色设置为白色
      axisLabel: {
    
    
        color: "#fff"
      }
    },
      {
    
    
        show: true,
        data: [702, 350, 610, 793, 664],
           // 不显示y轴的线
      axisLine: {
    
    
        show: false
      },
      // 不显示刻度
      axisTick: {
    
    
        show: false
      },
        axisLabel: {
    
    
          textStyle: {
    
    
            fontSize: 12,
            color: "#fff"
          }
        }
      }
    ],

   
   
  
  

   
   
  
  

Requisito 7: Configure dois conjuntos de pilhas de colunas e substitua os dados

// 给series  第一个对象里面的 添加 
yAxisIndex: 0,
// 给series  第二个对象里面的 添加 
yAxisIndex: 1,
// series 第一个对象里面的data
data: [70, 34, 60, 78, 69],
// series 第二个对象里面的data
data: [100, 100, 100, 100, 100],
// y轴更换第一个对象更换data数据
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// y轴更换第二个对象更换data数据
data:[702, 350, 610, 793, 664],

   
   
  
  

   
   
  
  

Depois de adicionar yAxiosIndex

e alterar os dados:

Código completo:

// 柱状图2
(function() {
    
    
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据
  var option = {
    
    
    grid: {
    
    
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
    
    
      show: false
    },
    yAxis: [
      {
    
    
        type: "category",
        inverse: true,
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // 不显示y轴的线
        axisLine: {
    
    
          show: false
        },
        // 不显示刻度
        axisTick: {
    
    
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
    
    
          color: "#fff"
        }
      },
      {
    
    
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示y轴的线
        axisLine: {
    
    
          show: false
        },
        // 不显示刻度
        axisTick: {
    
    
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
    
    
          color: "#fff"
        }
      }
    ],
    series: [
      {
    
    
        name: "条",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        // 修改第一组柱子的圆角
        itemStyle: {
    
    
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function(params) {
    
    
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
    
    
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%"
        }
      },
      {
    
    
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
    
    
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]
  };
  // 3. 把配置给实例对象
  myChart.setOption(option);
})();

   
   
  
  

   
   
  
  

14- Gráfico de linhas 1 Produção do módulo de mudança de pessoal

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  

• Personalize gráficos de acordo com suas necessidades

Requisito 1: Modifique o tamanho do gráfico de linhas, exiba a cor de configuração da borda: #012f4a e exiba o rótulo da escala.

    // 设置网格样式
    grid: {
    
     
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },

   
   
  
  

   
   
  
  

Requisito 2: Modifique a cor do texto #4c9bfd no componente da legenda e defina a distância correta para 10%

 // 图例组件
    legend: {
    
    
      textStyle: {
    
    
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },

   
   
  
  

   
   
  
  

Requisito 3: configuração relacionada ao eixo x

• remoção de incrustações
• cor da fonte do rótulo do eixo x: #4c9bfd
• Elimine a cor do eixo de coordenadas x (use a linha divisória do eixo Y no futuro)
• Não há necessidade de espaçamento interno borderGap em ambas as extremidades do eixo.

    xAxis: {
    
    
      type: 'category',
      data: ["周一", "周二"],
	  axisTick: {
    
    
         show: false // 去除刻度线
       },
       axisLabel: {
    
    
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
    
    
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

   
   
  
  

   
   
  
  

Requisito 4: Personalização do eixo y

• remoção de incrustações
• Cor da fonte: #4c9bfd
• Cor da linha divisória: #012f4a

    yAxis: {
    
    
      type: 'value',
      axisTick: {
    
    
        show: false  // 去除刻度
      },
      axisLabel: {
    
    
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
    
    
        lineStyle: {
    
    
          color: '#012f4a' // 分割线颜色
        }
      }
    },

   
   
  
  

   
   
  
  

Requisito 5: Personalização de gráficos de duas linhas

• Cores: #00f2f1 #ed3f35
• Modifique a polilinha para ser suave. Adicione suave para verdadeiro nos dados da série.

    color: ['#00f2f1', '#ed3f35'],
	series: [{
    
    
      name:'新增粉丝',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
    
    
      name:'新增游客',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

   
   
  
  

   
   
  
  

Requisito 6: Dados de configuração

// x轴的文字
xAxis: {
    
    
  type: 'category',
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

   
   
  
  

   
   
  
  

// 图标数据
    series: [{
    
    
      name:'新增粉丝',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
    
    
      name:'新增游客',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

   
   
  
  

   
   
  
  

Requisito 7: Novo clique de demanda nas alterações de dados em 2020 e 2021

A seguir estão os dados enviados em segundo plano (solicitados pelo ajax)

 var yearData = [
      {
    
    
        year: '2020',  // 年份
        data: [  // 两个数组是因为有两条线
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      },
      {
    
    
        year: '2021',  // 年份
        data: [  // 两个数组是因为有两条线
             [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
     		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
      }
     ];

   
   
  
  

   
   
  
  

• evento de troca da barra de guias
• Clicar no botão 2020 requer a alteração dos dados no primeiro objeto da série para dados[0] no objeto 2020.
• Clicar no botão 2020 requer a alteração dos dados do segundo objeto da série para os dados[1] do objeto 2020.
• O mesmo vale para o botão 2021.

Código completo:

// 折线图1模块制作
(function() {
    
    
  var yearData = [
    {
    
    
      year: "2020", // 年份
      data: [
        // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
    
    
      year: "2021", // 年份
      data: [
        // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line .chart"));
  // 2.指定配置
  var option = {
    
    
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
    
    
      trigger: "axis"
    },
    legend: {
    
    
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
    
    
        color: "#4c9bfd"
      },
      // 这个10% 必须加引号
      right: "10%"
    },
    grid: {
    
    
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    xAxis: {
    
    
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      axisTick: {
    
    
        show: false // 去除刻度线
      },
      axisLabel: {
    
    
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
    
    
        show: false // 去除轴线
      }
    },
    yAxis: {
    
    
      type: "value",
      axisTick: {
    
    
        show: false // 去除刻度线
      },
      axisLabel: {
    
    
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
    
    
        show: false // 去除轴线
      },
      splitLine: {
    
    
        lineStyle: {
    
    
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
    
    
        name: "新增粉丝",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: yearData[0].data[0]
      },
      {
    
    
        name: "新增游客",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      }
    ]
  };
  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });
  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    
    
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();

   
   
  
  

   
   
  
  

15- Gráfico de Linhas 2 Ver Produção do Módulo de Volume

• Encontre exemplos semelhantes no site oficial, analise-os adequadamente e introduza-os na página HTML
  

• Personalize gráficos de acordo com suas necessidades

Requisito 1: Altere a cor do texto do componente de legenda para rgba(255.255.255,.5) e o tamanho do texto para 12

 legend: {
    
    
      top: "0%",
      textStyle: {
    
    
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
},

   
   
  
  

   
   
  
  

Requisito 2: Modifique o tamanho do gráfico

grid: {
    
    
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

   
   
  
  

   
   
  
  

Requisito 3: Modificar a configuração relacionada ao eixo x

• Modifique a cor do texto para rgba(255.255.255,.6) e o tamanho do texto para 12
• A cor do eixo x é rgba(255.255.255,.2)

     // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
     axisLabel: {
    
    
          textStyle: {
    
    
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
         // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
    
    
          lineStyle: {
    
    
            color: "rgba(255,255,255,.2)"
          }
        },

   
   
  
  

   
   
  
  

Requisito 4: Modifique a configuração relevante do eixo y

        axisTick: {
    
     show: false },
        axisLine: {
    
    
          lineStyle: {
    
    
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
    
    
          textStyle: {
    
    
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
	   // 修改分割线的颜色
        splitLine: {
    
    
          lineStyle: {
    
    
            color: "rgba(255,255,255,.1)"
          }
        }      

   
   
  
  

   
   
  
  

Requisito 5: Modificar a configuração dos dois módulos de linha (observe que é customizado na série)

       //第一条 线是圆滑
       smooth: true,
        // 单独修改线的样式
        lineStyle: {
    
    
            color: "#0184d5",
            width: 2 
        },
         // 填充区域
        areaStyle: {
    
    
              // 渐变色，只需要复制即可
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
    
    
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                },
                {
    
    
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
       itemStyle: {
    
    
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

   
   
  
  

   
   
  
  

       name: "转发量",
        type: "line",
        smooth: true,
        lineStyle: {
    
    
          normal: {
    
    
            color: "#00d887",
            width: 2
          }
         },
         areaStyle: {
    
    
          normal: {
    
    
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
    
    
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
    
    
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
         itemStyle: {
    
    
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

   
   
  
  

   
   
  
  

Requisito 6: Substitua os dados

// x轴更换数据
data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
// series  第一个对象data数据
 data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
// series  第二个对象data数据
 data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],