Réalisation d'un diagramme de zone de ligne brisée - Diagramme Rose - Diagramme à barres

1.Obtenir des résultats

2.Principe de réalisation

Site officiel：https://echarts.apache.org/zh/index.html
echartsCommunauté：http://www.ppchart.com/#/

Quelques types de diagrammes：

series-line

Les diagrammes linéaires sont des diagrammes qui relient les marqueurs de points de données individuels par des lignes brisées,Utilisé pour montrer l'évolution des données.Disponible en coordonnées rectangulaires et polaires.
Tip: Paramètres areaStyle Vous pouvez ensuite tracer une carte de la zone.
Tip: Type de segment d'accouplement visualMap Les composants peuvent être pliés/Les cartes de zone sont divisées par différentes couleurs.

series-bar

Histogramme（Ou barre）C'est une hauteur de colonne（Dans le cas transversal, la largeur）Un type de diagramme couramment utilisé pour représenter la taille des données.

series-pictorialBar

.Les pictogrammes à colonnes sont des éléments graphiques qui peuvent être configurés pour représenter（Comme les photos、SVG PathData Attendez.）Histogramme de.Souvent utilisé dans les infographies.Utilisé dans un système de coordonnées rectangulaires avec au moins un axe de catégorie ou un axe temporel.

series-pie

Les diagrammes à secteurs sont principalement utilisés pour représenter la part des données de différentes catégories dans la somme...Chaque radian représente la proportion du nombre de données.
 Pour les scènes avec plusieurs diagrammes à secteurs dans un seul diagramme ,Peut être utilisé left、right、top、bottom、width、height  Configurer l'emplacement et la taille du viewport pour chaque série de diagrammes circulaires .radius、label.edgeDistance  Et d'autres éléments de configuration qui supportent le pourcentage , Est par rapport à la taille du rectangle déterminée par cet élément de configuration .
Tip:  Les diagrammes à secteurs sont plus appropriés pour représenter des relations telles que le pourcentage de données par rapport au total . Si vous ne représentez que la taille des données entre les différentes catégories ,Utilisation recommandée Histogramme, Les gens sont moins sensibles aux petites différences de radians qu'aux petites différences de longueur , Ou en configurant  roseType Ça s'affiche comme un dingertu du Sud, Sensible à la taille des données par la taille du rayon .

Certains paramètres signifient ：

grid：

Grille de dessin dans un système de coordonnées rectangulaires,Unique grid Jusqu'à deux en haut et en bas peuvent être placés à l'intérieur X Axe,Deux à gauche et deux à droite Y Axe. Vous pouvez dessiner un diagramme linéaire sur une grille ,Histogramme,Diagramme de dispersion（Diagramme à bulles）.

Par exemple:：

 grid: {
     // Distance entre le diagramme et la bordure 
    left: 10,
    right:20,
    top: 40,
    bottom: 10,
    containLabel: true,
  },

animation

Si l'animation est activée.

animationDuration

Durée de l'animation initiale,Prise en charge des fonctions de rappel, Un effet d'animation initial plus dramatique peut être obtenu en renvoyant une durée différente pour chaque donnée ：

showSymbol

 En ligne brisée ：Est - ce que symbol, Si false Seulement si tooltip hover Afficher quand.

symbol

Dessins marqués.

ECharts Les types d'étiquettes fournis comprennent:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'.
Peut passer 'image://url' Définir comme image,Parmi eux URL Lien vers l'image,Ou dataURI.

eg：

showSymbol: true, //Afficher les points par défaut
symbol: "circle", // La valeur par défaut est un cercle vide（Blanc au milieu）,Remplacer par un cercle solide

graphic

graphic  Est un composant d'élément graphique natif . Les éléments graphiques qui peuvent être pris en charge sont ：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group.

3.Code de mise en œuvre

<view class="box">
  <ec-canvas id="mychart-dom-bar" ec="{
    { ec }}"></ec-canvas>
</view>
<view class="box">
  <ec-canvas id="mychart-dom-line" ec="{
    { ec }}"></ec-canvas>
</view>
<view class="box">
  <ec-canvas id="mychart-dom-line1" ec="{
    { ec }}"></ec-canvas>
</view>
<view class="box">
  <ec-canvas id="mychart-dom-pie" ec="{
    { ec }}"></ec-canvas>
</view>

page {
    
  background: linear-gradient(90deg, #03224e 0%, #011030 100%);
}

.box {
    
  width: 100%;
  height: 550rpx;
}

import * as echarts from '../../components/ec-canvas/echarts';
Page({
    
  data: {
    
    ec: {
    
      lazyLoad: true // Chargement différé
    }
  },

  onLoad: function (options) {
    
    this.echartsComponnet = this.selectComponent('#mychart-dom-bar');
    this.getData('echartsComponnet', 0); //Obtenir des données
    this.echartsComponnetLine = this.selectComponent('#mychart-dom-line');
    this.getData('echartsComponnetLine', 1); //Obtenir des données
    this.echartsComponnetLine1 = this.selectComponent('#mychart-dom-line1');
    this.getData('echartsComponnetLine1', 2); //Obtenir des données
    this.echartsComponnetpie = this.selectComponent('#mychart-dom-pie');
    this.getData('echartsComponnetpie', 3); //Obtenir des données
  },

  /** *  Obtenir des données graphiques  */
  getData(type, action) {
    
    this[type].init((canvas, width, height, dpr) => {
    
      const Chart = echarts.init(canvas, null, {
    
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      Chart.setOption(this.getOption(action));
      return Chart;
    });
  },
  /** * Graphiqueinit */
  getOption(e) {
    
    if (e == 0) {
    
      return this.getBar(["Services1", "Services2", "Services3", "Services4", "Services5"], [2, 5, 1, 8, 1])
    }
    if (e == 1) {
    
      return this.getLine(["Services1", "Services2", "Services3", "Services4", "Services5"], [2, 5, 1, 8, 1], 1)
    }
    if (e == 2) {
    
      return this.getLine(["Services1", "Services2", "Services3", "Services4", "Services5"], [2, 22, 55, 22, 44], 2)
    }
    if (e == 3) {
    
      return this.getPie()
    }
  },
  /** * Obtenir des données */
  getBar(xData, yData) {
    
    let colorArr = ["#2886c6", "#50bfda", "#89e3ec"],
      color = {
    
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
    
            offset: 0,
            color: colorArr[0],
          },
          {
    
            offset: 0.5,
            color: colorArr[0],
          },
          {
    
            offset: 0.5,
            color: colorArr[1],
          },
          {
    
            offset: 1,
            color: colorArr[1],
          },
        ],
      },
      barWidth = 20,
      bottomData = [],
      topData = [];
    yData.filter((item) => {
    
      if (item) {
    
        bottomData.push(1);
        topData.push(item);
      } else {
    
        bottomData.push(0);
        topData.push({
    
          value: 1,
          itemStyle: {
    
            normal: {
    
              borderColor: "rgba(0,0,0,0)",
              borderWidth: 2,
              color: "rgba(0,0,0,0)",
            },
          },
        });
      }
    });
    let option = {
    
      animation: true, // Contrôle si l'animation est activée 
      animationDuration: 5000, // Durée de l'animation,C'est en millisecondes
      tooltip: {
    
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.5)",
        axisPointer: {
    
          type: "cross",
          label: {
    
            backgroundColor: "rgba(0,0,0,.5)",
          },
        },
        textStyle: {
    
          color: "#fff",
          fontSize: 14,
        },
      },
      grid: {
     // Distance entre le diagramme et la bordure 
        left: 10,
        right:20,
        top: 40,
        bottom: 10,
        containLabel: true,
      },
      xAxis: {
    
        data: xData,
        axisTick: {
    
          show: false,
        },
        axisLabel: {
    
          color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées 
          fontSize: 12,
        },
      },
      yAxis: {
    
        axisLine: {
    
          show: true,
        },
        axisLabel: {
    
          show: true,
          color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées 
          fontSize: 12,
        },
        splitLine: {
    
          show: true,
          lineStyle: {
    
            color: "rgba(255,255,255,.25)",
            type: "dashed",
          },
          //Couleur de la grille
        },
      },
      series: [{
    
          z: 1,
          name: "Données",
          type: "bar",
          barWidth: barWidth,
          barGap: "0%",
          data: yData,
          itemStyle: {
    
            normal: {
    
              color: color,
            },
          },
        },
        {
    
          z: 2,
          name: "Données",
          type: "pictorialBar",
          data: bottomData,
          symbol: "diamond",
          symbolOffset: ["0%", "50%"],
          symbolSize: [barWidth, 10],
          itemStyle: {
    
            normal: {
    
              color: color,
            },
          },
          tooltip: {
    
            show: false,
          },
        },
        {
    
          z: 3,
          name: "Données",
          type: "pictorialBar",
          symbolPosition: "end",
          data: topData,
          symbol: "diamond",
          symbolOffset: ["0%", "-50%"],
          symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
          itemStyle: {
    
            normal: {
    
              borderColor: colorArr[2],
              borderWidth: 2,
              color: colorArr[2],
            },
          },
          tooltip: {
    
            show: false,
          },
        },
      ],
    };
    return option;
  },
  getLine(xData, yData, type) {
    
    let datacoords = [{
    
      coords: [],
    }, ];
    for (let i = 0; i < xData.length; i++) {
    
      datacoords[0].coords.push([xData[i], yData[i]]);
    }
    console.log(datacoords)
    let s1 = [{
    
        name: "Susu, petit Susu.",
        type: "line",
        smooth: type == 2,
        smoothMonotone: "x",
        lineStyle: {
    
          width: 1.5,
          type: "solid",
          shadowOffsetX: 0, //  Polyline XOffset
          shadowOffsetY: 3, //  Polyline YOffset
          shadowBlur: 4, //  Lignes floues 
          opcity: 1,
          shadowColor: "rgba(220,120,40,0.95)", //Couleur polyligne
        },
        showSymbol: false,
        itemStyle: {
    
          color: "#DC7828",
        },
        areaStyle: {
    
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    
              offset: 1,
              color: "rgba(220,120,40,0.3)",
            },
            {
    
              offset: 0.74,
              color: "rgba(220,120,40,0.26)",
            },
            {
    
              offset: 0,
              color: "rgba(220,120,40,0)",
            },
          ]),
        },
        emphasis: {
    
          focus: "series",
        },
        data: yData,
      }],
      s2 = [{
    
          name: "Susu, petit Susu.222",
          type: "line",
          smooth: type == 2,
          lineStyle: {
    
            color: "#00CCA9",
            width: 1.5,
            type: "solid",
            shadowOffsetX: 0, //  Polyline XOffset
            shadowOffsetY: 3, //  Polyline YOffset
            shadowBlur: 4, //  Lignes floues 
            shadowColor: "rgba(0,204,169,0.95)", //Couleur polyligne
          },
          showSymbol: true, //Afficher les points par défaut
          symbol: "circle", // La valeur par défaut est un cercle vide（Blanc au milieu）,Remplacer par un cercle solide
          symbolSize: 7, // Définir la taille des points solides 
          itemStyle: {
    
            color: "#021E47", // Couleur de fond des points solides ----- Cercle transparent ！！！！！！！
            borderWidth: 1, // Taille de la bordure du point 
            borderColor: "#00CCA9", // Couleur solide de la bordure du point 
          },
          areaStyle: {
    
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    
                offset: 1,
                color: "rgba(0,204,169,0.3)",
              },
              {
    
                offset: 0,
                color: "rgba(0,204,169,0)",
              },
            ]),
          },
          emphasis: {
    
            focus: "series",
          },
          data: yData,
        },
      ];
    let option = {
    
      animation: true, // Contrôle si l'animation est activée 
      animationDuration: 3000, // Durée de l'animation,C'est en millisecondes
      backgroundColor: "transparent",
      color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
      tooltip: {
    
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.5)",
        axisPointer: {
    
          type: "cross",
          label: {
    
            backgroundColor: "rgba(0,0,0,.5)",
          },
        },
        textStyle: {
    
          color: "#fff",
          fontSize: 14,
        },
      },
      grid: {
    
        left: 10,
        top: 40,
        bottom: 10,
        right:20,
        containLabel: true,
      },
      xAxis: [{
    
        nameGap: 3,
        nameTextStyle: {
    
          // Unités axiales 
          color: "rgba(255,255,255,.8)",
          fontSize: 12,
        },
        type: "category",
        data: xData,
        boundaryGap: false, //De0C'est parti.
        axisLine: {
    
          rotate: 30, // Rotation excessive du contenu de l'axe 
          interval: 0,
          lineStyle: {
    
            color: "#636E7C",
          },
        },
        axisLabel: {
    
          color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées 
          fontSize: 12,
        },
        axisTick: {
    
          // Couleur de l'échelle de l'axe  xEtyNon.
          show: false,
        },
      }, ],
      yAxis: [{
    
        name: "Les gens",
        min: 0,
        max: function (value) {
    
          return Math.ceil(value.max / 5) * 5;
        },
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
    
          // Unités axiales 
          color: "rgba(255,255,255,.89)",
          fontSize: 12,
        },
        splitLine: {
    
          show: true,
          lineStyle: {
    
            color: "rgba(255,255,255,.25)",
            type: "dashed",
          },
          //Couleur de la grille
        },
        axisTick: {
    
          // Couleur de l'échelle de l'axe 
          show: false,
        },
        axisLine: {
    
          //Couleur de l'axe des coordonnées
          show: true,
          lineStyle: {
    
            color: "#636E7C",
          },
        },
        axisLabel: {
    
          color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées 
          fontSize: 12,
        },
      }, ],
      series: type == 1 ? s2 : s1
    }
    return option;
  },
  getPie() {
    
    let option = {
    
      color: [
        "#3D75FC",
        "#3E46CE",
        "#E45C7E",
        "#2DB4D1",
        "#CBAE2E",
        "#5ECAB9",
        "#D36640",
      ],
      animation: true, // Contrôle si l'animation est activée 
      animationDuration: 5000, // Durée de l'animation,C'est en millisecondes
      animationEasing: "bounceOut", //Animation lente
      animationThreshold: 8, // Seuil de l'élément d'animation 
      tooltip: {
    
        trigger: "item",
        formatter: "Susu.{b} : {c} ({d}%",
        position: function (point, params, dom, rect, size) {
    
          let x = 0;
          let y = 0;
          let pointX = point[0];
          let pointY = point[1];
          let boxWidth = size.contentSize[0];
          let boxHeight = size.contentSize[1];
          if (boxWidth > pointX) {
    
            x = 5;
          } else {
    
            x = pointX - boxWidth;
          }
          if (boxHeight > pointY) {
    
            y = 5;
          } else {
    
            y = pointY - boxHeight;
          }
          return [x, y];
        },
      },
      legend: {
    
        type: "scroll",
        orient: "vertical",
        right: '10%',
        top: "center",
        icon: "rect",
        itemWidth: 10, // Définir la largeur
        itemHeight: 10, // Réglage de la hauteur
        selectedMode: true,
        textStyle: {
    
          color: "#fff",
          fontSize: 12,
        },
        formatter: function (name) {
    
          return name.length > 5 ? name.substr(0, 5) + "..." : name;
        },
        tooltip: {
    
          show: true,
        },
      },
      series: [{
    
        minAngle: 5, // Angle minimal du secteur （0 ~ 360）, Utilisé pour empêcher qu'une valeur trop petite provoque un secteur trop petit pour affecter l'interaction 
        avoidLabelOverlap: true, //Si la politique de prévention du chevauchement des étiquettes est activée
        labelLine: {
    
          minTurnAngle: 0,
        },
        type: "pie",
        radius: [20, 120],
        center: ["30%", "50%"],
        roseType: "area",
        itemStyle: {
    
          borderRadius: 0,
        },
        label: {
    
          show: false,
        },
        data: [{
    
            value: 88,
            name: "rose 1"
          },
        ],
      }, ],
    };
    return option
  }
})

4. Plus d'applets liés à ,Attention au numéro public Suzu.bug,Plus d'appletsdemo,Oui.Le nuage de code de Su Su SuSi ça t'aide,Bienvenue à votrestar+Abonnements！