Echarts Introducción a la tecnología de visualización

Introducción al panel de visualización

​ En respuesta a la tendencia actual de visualización de datos, cada vez más empresas necesitan usarlo en muchos escenarios (datos de marketing, datos de producción, datos de usuario). Los gráficos visuales se utilizan para mostrar y reflejar los datos, haciéndolos más intuitivos y las características de los datos más prominentes.

01 - Uso de la tecnología

La realización de este proyecto requiere conocimientos de:

• diseño div + css
• diseño flexible
• Menos
• Uso nativo de js + jquery
• adaptacion rem
• básicos de echart

02- Plan de adaptación del caso

• El borrador del diseño es 1920px

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

  2. El valor base del complemento cssrem es 80px

     Complemento-Botón de configuración-Configurar ajustes extendidos-Tamaño de fuente raíz.

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

03-Configuraciones básicas

• body establece la imagen de fondo, escalada al 100%, altura de fila 1.15
• inicialización css

diseño de 04 encabezados

• la altura es 100px
• Imagen de fondo, que se muestra dentro del contenedor.
• Escala al 100%
• h1 parte del título blanco 38 píxeles la altura de la fila de la pantalla centrada es de 80 píxeles
• El módulo de tiempo showTime ubica el lado derecho a 30 px, la altura de la línea es de 75 px, el color del texto es: rgba (255, 255, 255, 0.7) y el tamaño del texto es de 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

• Necesita un relleno de 10px a la izquierda y a la derecha

• columna columna contenedor, dividida en tres columnas, relación 3:5:3

estilo css:

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

06-Placa de módulo de placa pública

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

07- Módulo de barra de gráfico de columnas (diseño)

• La altura h2 del módulo de encabezado es de 48 px, el color del texto es blanco, 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 usar como la 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 intermedio

• Lo anterior no es un módulo digital.
• El siguiente es el módulo de mapa de mapa

1. El módulo numérico no tiene un color de fondo rgba(101, 132, 226, 0.1); tiene un relleno de 15 píxeles
2. Tenga en cuenta que la columna central tiene un margen de 15 px a la izquierda y 10 px a la derecha
3. no Las divisiones superior e inferior del módulo son números en la parte superior (no-hd) y descripciones de texto relacionadas debajo (no-bd)
4. Los bloques digitales sin HD tienen un borde 1px sólido rgba (25, 186, 139, 0.17)
5. El módulo digital no-hd se divide en dos lis 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 Use after y before para hacer 2 esquinas pequeñas, borde 2px sólido #02a6b5 ancho 30px alto 10px
7. La pequeña línea vertical se puede asignar al primer li pequeño después. El color de fondo es rgba (255, 255, 255, 0.2), la altura es 50% arriba 25%.
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 relleno superior es de 10 px

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

Producción de módulos de mapas:

1. La altura del módulo de mapa es de 810 px, que contiene un gráfico de 4 cuadros, coloque el módulo de gráfico cuadro de esfera rotación 1 rotación 2
2. El tamaño del mapa del módulo de imagen de esfera1 es de 518 px. Es necesario agregar una imagen de fondo porque debe escalarse al 100 % y colocarse en la transparencia más central.3
3. Gire 1 mapa 2 con un tamaño de 643 px para agregar una imagen de fondo porque debe escalarse al 100 % y colocarse en la transparencia central 6 Haga una animación de rotación y use el índice z para presionar la esfera
4. Rotar 2 El tamaño de map3 es de 566 píxeles. Se debe agregar una imagen de fondo porque se debe escalar al 100 % para colocarla en el centro. Tenga en cuenta que la animación de rotación es en sentido contrario a las agujas del reloj.

 <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 comunes de visualización de datos:

• D3.js es actualmente la biblioteca de herramientas de visualización de Javascript mejor calificada en la Web (difícil de comenzar)
• ECharts.js Una biblioteca de visualización de datos Javascript de código abierto producida por Baidu
• Highcharts.js Biblioteca de visualización de datos front-end extranjeros, no comercial y gratuita, utilizada por muchas grandes empresas extranjeras
• La nueva generación de soluciones de visualización de datos de AntV Ant Financial, etc.
• Highcharts y Echarts son como la relación entre Office y WPS

ECharts, una biblioteca de visualización de código abierto implementada con 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.) y se basa en gráficos vectoriales en la parte inferior La biblioteca ZRender proporciona gráficos de visualización de datos intuitivos, interactivos y altamente personalizables.

Vernáculo:

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

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

10-Echarts-Experiencia

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

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

Pasos para el uso:

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

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

3. Inicializar objeto de instancia de 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. Establezca el elemento de configuración en el objeto de instancia echarts

myChart.setOption(option);

11-Echarts-configuración básica

Esto es para exigir a los estudiantes que conozcan la función principal de cada módulo en la siguiente configuración.

La configuración principal que debe entenderse:series xAxis yAxis grid tooltip title legend color

• serie

  • lista de series. Cada serie typedetermina
  • Vernáculo: datos de íconos, especifique qué tipo de ícono, múltiples gráficos pueden superponerse.

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

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

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

• cuadrícula: La cuadrícula de dibujo en el sistema de coordenadas cartesianas.

• título: componente del título

• información sobre herramientas: componente de cuadro de solicitud

• leyenda: componente de leyenda

• color: lista de colores de la paleta

  stackApilamiento de datos, después de que las series en el mismo eje de categoría se configuren 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 histograma (dos pasos)

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en páginas HTML
• Personaliza el gráfico 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 necesidades

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

   • Modifique el tamaño del gráfico de arriba a 10px de abajo a 4% de cuadrícula para determinar el tamaño de nuestro histograma

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

   • Ajustes relacionados con el eje X xAxis
     • El color del texto se establece en rgba (255,255,255, .6) y el tamaño de fuente es 12px
     • No se muestra el estilo del eje X

   // 设置x轴标签文字样式
   

// El color y tamaño del texto del eje x
axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12" }, // El estilo del eje x no muestra axisLine: { show: false // Si desea establecer estilos de línea individuales // lineStyle: { // color: "rgba(255,255,255,.1)", // ancho: 1, // tipo: "sólido" } }

- Y 轴相关定制
  - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px
  - Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框
  - 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)   

~~~JavaScript
// 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 para que se redondee y establezca en la serie de ancho de columna

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

13-Histograma 2 personalización

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en páginas HTML
• Personaliza el gráfico según tus necesidades

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

  // 图标位置
    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 marcas asociadas

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

• El color del texto del eje y se establece en blanco.

   axisLabel: {
    
    
          color: "#fff"
   },

Requisito 4: Modificar el primer grupo de estilos relacionados con columnas (barras)

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}%"
     }
},

• Establezca el primer grupo de columnas en diferentes colores.

// 声明颜色数组
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 columnas (forma de marco)

  	    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 apilamiento 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- Cuadro de Líneas 1 Módulo de Creación de Cambio de Personal

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en páginas HTML
• Personaliza el gráfico según tus necesidades

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

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

Requisito 2: modifique el color del texto #4c9bfd en el componente de la leyenda, y la distancia de derecha a derecha es del 10 %.

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

Requisito 3: configuración relacionada con el eje x

• Eliminación de escamas
• Color de fuente de la etiqueta de la escala del eje X: #4c9bfd
• Elimine el color del eje x (utilice la línea divisoria del eje Y en el futuro)
• Los dos extremos del eje no necesitan el límite de separación interiorGap

    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 escamas
• Color de fuente: #4c9bfd
• Color del divisor: #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 respectivamente: #00f2f1 #ed3f35
• Modifique la polilínea como suave y agregue suave 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: Nuevos requisitos haga clic en los cambios de datos en 2020 y 2021

Los siguientes son los datos enviados desde el fondo (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
• Haga clic en el botón 2020 para reemplazar los datos en el primer objeto de la serie con datos[0] en el objeto 2020
• Haga clic en el botón 2020 para reemplazar los datos del segundo objeto de la serie con los datos del objeto 2020[1]
• 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 Producción del módulo de volumen de reproducción

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en páginas HTML
• Personaliza el gráfico según tus necesidades

Requisito 1: cambiar el color del texto del componente de leyenda rgba(255,255,255,.5) y el tamaño del texto es 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 dos módulos de línea (nota que es personalizado 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 de 16 sectores 1 Módulo de distribución por edad Producción

• Encuentre ejemplos similares en el sitio web oficial, analícelos adecuadamente e introdúzcalos en páginas HTML
• Personaliza el gráfico según tus necesidades

Gráfico personalizado Requisito 1:

• Modifique el componente de la leyenda para que se muestre en la parte inferior y centrado.
• El ancho y la altura de cada ícono pequeño se modifican a 10px
• el tamaño del texto es de 12 colores rgba (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 centro horizontal y centro vertical
• Modifique el radio del círculo interior y el radio del círculo exterior a ["40 %", "60 %"] Recordatorio amistoso del maestro rosa, con un sistema de coordenadas cartesianas, como un histograma de un gráfico de líneas, es una cuadrícula para modificar el tamaño del gráfico, y nuestro gráfico circular es a través del cambio de tamaño del radio

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

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

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

Gráfico de 17 sectores 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 páginas HTML
• Personaliza el gráfico según tus necesidades

Paso 2: personaliza según sea necesario

• 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 en 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: la fuente es un poco más pequeña en 10 px (establecida en el objeto de la serie)

  La etiqueta de texto en el gráfico circular puede controlar algunos estilos del texto del gráfico circular. configuración de objetos de etiqueta

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

• Requisito 6: evite que la línea de guía sea demasiado larga al hacer zoom. La línea de guía es ligeramente más corta (establecida por el objeto labelLine en el objeto de la serie)
  • Diagrama de conexión 6 px
  • texto del enlace 8 px

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

• Requisito 6: cuando se amplía el navegador, el gráfico se adaptará automáticamente.

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

18-Echarts-Comunidad Introducción

La comunidad es un lugar donde los usuarios activos de echart se comunican y contribuyen con cartas personalizadas.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-oThqj6mk-1639030724855)(docs/media/1576664444951.png)]

• 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 echart.

19-Echarts-uso del mapa (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 el archivo js de china.js para proporcionar el mapa de China
• El segundo es porque hay más códigos en él, creamos un nuevo archivo js myMap.js para importar
• Simplemente use la configuración proporcionada por la comunidad.

Necesidad de modificar:

• Eliminar el componente de título
• eliminar el color de fondo
• Modifique el fondo de la provincia del mapa #142957 areaColor para hacer modificaciones
• El mapa se puede ampliar ajustando el zoom a 1,2

    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 extendido. Puede leer más casos en la comunidad en el futuro.

20- Escalado de Restricciones Finales

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