Proyecto de visualización de datos ECharts

Introducción al panel de visualización.

En respuesta a la tendencia actual de visualización de datos, cada vez más empresas necesitan utilizar gráficos visuales para mostrar datos en muchos escenarios (datos de marketing, datos de producción, datos de usuario), lo que hace que los datos sean más intuitivos y sus características más destacadas.

01-Usa la tecnología

Para completar este proyecto se requieren conocimientos de:

• diseño div + css
• diseño flexible
• Menos
• Utilice js + jquery nativo
• adaptación remota
• Conceptos básicos de echarts

02- Solución de adaptación de caso

• El borrador del diseño es de 1920px.

  1. flexible.js divide la pantalla en 24 partes iguales

  2. El valor base del complemento cssrem es 80px

     Botón de configuración del complemento-Configurar ajustes de extensión-Configuraciones de tamaño de fuente raíz.

     Pero no olvide reiniciar el software vscode para asegurarse de que surta efecto.

03-Configuraciones básicas

• cuerpo establece la imagen de fondo, zoom al 100%, altura de línea 1,15
• inicialización css

Diseño de 04 encabezados

• La altura es 100px.
• Imagen de fondo, mostrada dentro del contenedor.
• La relación de zoom es del 100%.
• h1 parte del título blanco 38 píxeles altura de la línea de visualización centrada 80 píxeles
• El módulo de tiempo showTime posiciona el lado derecho en 30px, la altura de la línea en 75px, el color del texto en: rgba(255, 255, 255, 0.7) y el tamaño del texto en 20 píxeles.

// 格式： 当前时间：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 de la parte del encabezado

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);
  }
}

05-módulo principal de la caja principal

• Requiere un relleno de 10px en la parte superior e izquierda

• contenedor de columnas de columnas, dividido en tres columnas, que representan 3:5:3

estilo css:

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

06-Panel del módulo del panel público

• La altura es 310px.
• Borde rgba sólido de 1 px (25, 186, 139, 0,17)
• Hay una imagen de fondo line.jpg
• El relleno es 0 en la parte superior, 15 px a la izquierda y a la derecha y 40 px en la parte inferior.
• El margen inferior es de 15px.
• Utilice el cuadro del panel antes y después para hacer que las dos esquinas superiores sean de 10 px y la línea de 2 px sólida #02a6b5
• Agregue un nuevo cuadro antes y después y haga que el ancho y alto de las dos esquinas inferiores sean de 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;
    }
  }
}

Módulo 07-Bar (diseño)

• La altura del módulo de título h2 es de 48 px, el color del texto es blanco y el tamaño del texto es de 20 px

• Altura del gráfico del módulo de contenido del icono 240 px

• Lo anterior se puede utilizar como parte de estilo público del panel.

  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-diseño medio

• Lo anterior no es un módulo digital.
• A continuación se muestra el módulo de mapa del mapa.

1. El módulo digital no tiene un color de fondo rgba (101, 132, 226, 0.1); y un relleno de 15 píxeles
2. Tenga en cuenta que la columna del medio tiene márgenes de 10 px a la izquierda y 15 px en la parte inferior.
3. El módulo no se divide en partes superior e inferior: la parte superior son números (no-hd) y la parte inferior son descripciones de texto relacionadas (no-bd).
4. Los módulos digitales no-hd tienen un borde de 1px rgba sólido (25, 186, 139, 0,17)
5. El módulo digital no-hd está dividido en dos li pequeños: la altura de cada li pequeño es de 80 px, el tamaño del texto es de 70 px, el color es # ffeb7b y la fuente es la fuente del icono electronicFont.
6. no-hd usa after y before para crear 2 esquinas pequeñas, el borde es de 2px sólido #02a6b5, el ancho es de 30px y el alto es de 10px
7. La pequeña línea vertical para el primer li pequeño después puede tener 1 px de ancho y el color de fondo es rgba (255, 255, 255, 0.2); la altura es 50% y el 25% superior es suficiente.
8. También hay dos li pequeños en no-bd: la altura es de 40 px, el color del texto es rgba (255, 255, 255, 0.7), el tamaño del texto es de 18 px y el margen superior es de 10 px.

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

Producción del módulo de mapas:

1. La altura del módulo de mapa es de 810 px. Contiene 4 gráficos de cuadro. El cuadro de esfera que contiene el módulo de gráfico gira 1 y gira 2.
2. El tamaño del mapa del módulo de imagen de esfera1 es 518 px. Es necesario agregar una imagen de fondo porque debe escalarse al 100 % y colocarse en el centro de la transparencia.3
3. Gira 1 mapa 2. El tamaño es 643 px. Debes agregar una imagen de fondo porque debe escalarse al 100%. Colócalo en el centro para lograr transparencia. 6. Usa el índice z para mantener presionada la esfera para la animación de rotación.
4. El tamaño del mapa 3 de rotación 2 es 566 px. Debes agregar una imagen de fondo porque debe escalarse al 100%. Coloca la animación de rotación central. Ten en cuenta que es en sentido antihorario.

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

/* 声明字体*/
@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-Introducción

Bibliotecas de visualización de datos comunes:

• D3.js es actualmente la biblioteca de herramientas de visualización Javascript mejor valorada en la Web (difícil de conseguir)
• ECharts.js es una biblioteca de visualización de datos Javascript de código abierto producida por Baidu.
• Highcharts.js es una biblioteca de visualización de datos front-end extranjera, gratuita para uso no comercial y utilizada por muchas grandes empresas extranjeras.
• La solución de visualización de datos de nueva generación de AntV Ant Financial y más
• Highcharts y Echarts son como la relación entre Office y WPS

ECharts es una biblioteca de visualización de código abierto implementada mediante JavaScript. Puede ejecutarse sin problemas en PC y dispositivos móviles. Es compatible con la mayoría de los navegadores actuales (IE8/9/10/11, Chrome, Firefox, Safari, etc.). Se basa en gráficos vectoriales. La biblioteca ZRender proporciona gráficos de visualización de datos intuitivos, interactivos y altamente personalizables.

Vernáculo:

• Es un complemento JS
• Buen rendimiento y puede funcionar sin problemas en PC y dispositivos móviles.
• Compatible con los principales navegadores
• Se proporcionan muchos gráficos de uso común que se pueden personalizar .
  • Gráfico de líneas , gráfico de barras , gráfico de dispersión , gráfico circular , gráfico de líneas K

Dirección del sitio web oficial: https://www.echartsjs.com/zh/index.html

10-Echarts-Experiencia

Tutorial oficial: [Comience con ECharts en cinco minutos](https://www.echartsjs.com/zh/tutorial.html#Comience con ECharts en cinco minutos)

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

Pasos de uso:

1. Introduzca el archivo del complemento echarts en la página html
2. Prepare un contenedor DOM con un tamaño determinado.

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

3. Inicializar el objeto de instancia echarts

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

4. Especificar elementos y datos de configuración (opción)

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. Establecer elementos de configuración en el objeto de instancia echarts

myChart.setOption(option);

11-Echarts-Configuración básica

Esto requiere que los estudiantes conozcan la función principal de cada módulo en las siguientes configuraciones.

Principales configuraciones que necesitas saber:series xAxis yAxis grid tooltip title legend color

• serie

  • Lista de series. Cada serie typedetermina su propio tipo de gráfico mediante
  • En términos sencillos: datos de iconos, especificando qué tipo de icono, se pueden superponer varios gráficos.

• xAxis: eje x en la cuadrícula del sistema de coordenadas rectangular

  • borderGap: la estrategia de espacios en blanco en ambos lados del eje de coordenadas es verdadera. En este momento, la escala solo se usa como línea divisoria y las etiquetas y los puntos de datos estarán en el medio de la banda entre las dos escalas.

• yAxis: eje y en la cuadrícula del sistema de coordenadas rectangular

• grid: Dibujo de grilla en sistema de coordenadas cartesiano.

• título: componente del título

• Información sobre herramientas: componente del cuadro de aviso

• leyenda: componente de leyenda

• color: lista de colores de la paleta

  Apilamiento de datos, después de configurar stackuna serie en el mismo eje de categorías con el mismo valor, el valor de la siguiente serie se agregará al valor de la serie 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]
        }
    ]
};

12- Gráfico de barras (dos pasos)

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en la página HTML.
• Personaliza los gráficos según tus necesidades.

1. Introducido en la 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 según las necesidades

   • Modificar el color de la columna del gráfico #2f89cf

   • Modifique el tamaño del gráfico en la parte superior a 10 px y en la parte inferior al 4%. La cuadrícula determina el tamaño de nuestro histograma.

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

• Configuraciones relacionadas con el eje XxEje
  • El color del texto está configurado en rgba(255,255,255,.6) y el tamaño de fuente es 12px
  • El estilo de la línea del eje X no se muestra

// Establecer el estilo de texto de la etiqueta del eje x
// El color del texto y el tamaño del eje x

axisLabel: {
    
    
  color: "rgba(255,255,255,.6)",
  fontSize: "12"
},

// el estilo del eje x no se muestra

   axisLine: {
    
    
       show: false
       // 如果想要设置单独的线条样式 
       // lineStyle: {
    
    
       //    color: "rgba(255,255,255,.1)",
       //    width: 1,
       //    type: "solid"
      }
   }

• Personalización relacionada con el eje Y
  • El color del texto está configurado en rgba(255,255,255,.6) y el tamaño de fuente es 12px
  • Cambie el estilo de línea del eje Y a un borde rgba(255,255,255,.1) de 1 píxel
  • El color del divisor se modifica a 1 píxel 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 la forma de la columna a esquinas redondeadas y establezca el ancho de la columna en serie

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

• Reemplazar los datos correspondientes

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

• Hacer que el gráfico se adapte a la pantalla.

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

Personalización del gráfico de 13 barras 2

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en la página HTML.
• Personaliza los gráficos según tus necesidades.

Requisito 1: modificar la cuadrícula de tamaño gráfico

//Posición del icono

grid: {
    
    
  top: "10%",
  left: "22%",
  bottom: "10%"
},

Requisito 2: no mostrar el eje x

   xAxis: {
    
    
      show: false
    },

Requisito 3: personalización relacionada con el eje y

• No mostrar el eje y y las escalas relacionadas

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

• Establecer el color del texto del eje y en blanco

   axisLabel: {
    
    
          color: "#fff"
   },

Requisito 4: Modificar los estilos relacionados del primer grupo de columnas (tiras)

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

• Establecer los datos de visualización de porcentaje en el primer grupo de columnas

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

• Establecer el primer grupo de columnas en un color 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 la configuración relacionada del segundo grupo de pilares (forma de caja)

    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: agregar un segundo conjunto de datos al eje 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: configurar dos conjuntos de pilas de columnas y reemplazar datos

// 给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],

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- Diagrama de líneas 1 Producción del módulo de cambio de personal

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en la página HTML.
• Personaliza los gráficos según tus necesidades.

Requisito 1: Modifique el tamaño del gráfico de líneas, muestre el color de configuración del borde: # 012f4a y muestre la etiqueta de escala.

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

Requisito 2: Modificar el color del texto #4c9bfd en el componente de leyenda y establecer la distancia correcta al 10%

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

Requisito 3: configuración relacionada con el eje x

• eliminación de incrustaciones
• Color de fuente de la etiqueta de marca del eje x: #4c9bfd
• Elimine el color del eje de coordenadas x (use la línea divisoria del eje Y en el futuro)
• No hay necesidad de un límite de espaciado interno en ambos extremos del eje.

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

Requisito 4: Personalización del eje y

• eliminación de incrustaciones
• Color de fuente: #4c9bfd
• Color de la línea divisoria: #012f4a

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

Requisito 5: Personalización de gráficos de dos líneas

• Colores: #00f2f1 #ed3f35
• Modifique la polilínea para que sea suave. Agregue suavidad a verdadero en los datos de la serie.

    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: Datos de configuración

// 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: Nueva demanda de clic en cambios de datos en 2020 y 2021

Los siguientes son los datos enviados desde segundo plano (solicitados por 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 cambio de barra de pestañas
• Hacer clic en el botón 2020 requiere cambiar los datos en el primer objeto de la serie a datos [0] en el objeto 2020.
• Hacer clic en el botón 2020 requiere cambiar los datos del segundo objeto de la serie a los datos[1] del objeto 2020.
• Lo mismo ocurre con el botón 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 líneas 2 Ver producción del módulo de volumen

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en la página HTML.
• Personaliza los gráficos según tus necesidades.

Requisito 1: cambiar el color del texto del componente de leyenda a rgba(255,255,255,.5) y el tamaño del texto a 12

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

Requisito 2: modificar el tamaño del gráfico

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

Requisito 3: modificar la configuración relacionada con el eje x

• Modifique el color del texto a rgba(255,255,255,.6) y el tamaño del texto a 12
• El color del eje x es 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: modificar la configuración relevante del eje 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 la configuración de los dos módulos de línea (tenga en cuenta que está personalizada en la serie)

       //第一条 线是圆滑
       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: Reemplazar datos

// 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],

Gráfico circular de 16 1 Producción del módulo de distribución de edades

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en la página HTML.
• Personaliza los gráficos según tus necesidades.

Requisitos de gráficos personalizados 1:

• Modifique el componente de leyenda para que se muestre en la parte inferior y centrado.
• Cambie el ancho y alto de cada ícono pequeño a 10px
• El tamaño del texto es rgba de 12 colores (255,255,255,.5)

 legend: {
    
    
      // 距离底部为0%
      bottom: "0%",
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      // 修改图例组件的文字为 12px
      textStyle: {
    
    
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
 },

Requisito de personalización 2:

• Modificar el centrado horizontal y el centrado vertical.
• Modifique el radio del círculo interior y el radio del círculo exterior a ["40%", "60%"] Recordatorio amigable para el maestro rosa, con un sistema de coordenadas rectangular como un gráfico de líneas y un gráfico de columnas, modifique el tamaño del gráfico a través de la cuadrícula, y nuestro gráfico circular usa radio Modificar tamaño

series: [
      {
    
    
        name: "年龄分布",
        type: "pie",
        // 设置饼形图在容器中的位置
        center: ["50%", "50%"],
        //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
        radius: ["40%", "60%"],
        // 不显示标签文字
        label: {
    
     show: false },
        // 不显示连接线
        labelLine: {
    
     show: false },
      }
    ]

Requisito de personalización 3: reemplazar datos

// legend 中的data  可省略
data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
//  series 中的数据
 data: [
          {
    
     value: 1, name: "0岁以下" },
          {
    
     value: 4, name: "20-29岁" },
          {
    
     value: 2, name: "30-39岁" },
          {
    
     value: 2, name: "40-49岁" },
          {
    
     value: 1, name: "50岁以上" }
 ] ,

Requisito de personalización 4: cambiar color

color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
        ],

 // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

Gráfico circular de 17 2 Producción del módulo de distribución regional (gráfico Nightingale Rose)

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en la página HTML.
• Personaliza los gráficos según tus necesidades.

Paso 2: Personaliza según las necesidades

• Requisito 1: configuración de color

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

• Requisito 2: modificar el tamaño del gráfico circular (objeto de serie)

radius: ['10%', '70%'],

• Requisito 3: cambiar el modo de visualización del gráfico circular al modo de radio

 roseType: "radius",

• Requisito 4: Reemplazo del uso de datos (objeto de datos dentro del objeto de serie)

  {
    
     value: 20, name: '云南' },
  {
    
     value: 26, name: '北京' },
  {
    
     value: 24, name: '山东' },
  {
    
     value: 25, name: '河北' },
  {
    
     value: 20, name: '江苏' },
  {
    
     value: 25, name: '浙江' },
  {
    
     value: 30, name: '四川' },
  {
    
     value: 42, name: '湖北' }

• Requisito 5: hacer la fuente un poco más pequeña en 10 px (establecida en el objeto de la serie)

  Las etiquetas de texto en el gráfico circular pueden controlar algunos estilos del texto del gráfico circular. configuración del objeto de etiqueta

series: [
      {
    
    
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
    
    
          fontSize: 10
        },
      }
    ]
  };

• Requisito 6: Evite que la línea guía sea demasiado larga al escalar. La línea guía es ligeramente más corta (configuración del objeto labelLine en el objeto de serie)
  • Diagrama de conexión 6 px
  • Conectar texto 8 px

+        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {
+          // 连接扇形图线长
+          length: 6,
+          // 连接文字线长
+          length2: 8
+        } 
+      }
+    ],

• Requisito 6: Cuando se hace zoom en el navegador, el gráfico se adaptará automáticamente.

// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

18-Echarts-Introducción a la comunidad

La comunidad es un lugar donde los usuarios activos de echart pueden comunicarse y contribuir con gráficos personalizados.

• Aquí puede encontrar algunos gráficos altamente personalizados basados ​​​​en echart, que son equivalentes a los complementos desarrollados en base a jquery, aquí hay gráficos de terceros desarrollados en base a echarts.

19-Uso del mapa Echarts (extensión)

Consulte el ejemplo de la comunidad: https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (ruta de avión simulada)

Pasos de implementación:

• Primero, debe descargar china.js para proporcionar el archivo js del mapa de China.
• En segundo lugar, debido a que contiene mucho código, creamos un nuevo archivo js myMap.js y lo presentamos.
• Simplemente use la configuración proporcionada por la comunidad.

Necesidad de modificar:

• Eliminar componente de título
• eliminar color de fondo
• Modifique el fondo de la provincia del mapa #142957 areaColor y realice cambios en él
• Para ampliar el mapa, simplemente configúrelo en 1.2 mediante zoom.

geo: {
    
    
  map: 'china',
  zoom: 1.2,
  label: {
    
    
    emphasis: {
    
    
      show: false
    }
  },
  roam: false,
  itemStyle: {
    
    
    normal: {
    
    
      areaColor: '#142957',
      borderColor: '#0692a4'
    },
    emphasis: {
    
    
      areaColor: '#0b1c2d'
    }
  }
},

Resumen: este ejemplo es un caso ampliado. Podrás ver más casos en la comunidad en el futuro.

20- Escalado de restricción final

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
    
    
  html {
    
    
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
    
    
  html {
    
    
    font-size: 80px !important;
  }
}