Beispiel für die Einstellung der Polylinienlinienfarbe und der Polylinienpunktfarbe in Echarts-js-Tutorial-php.cn

Beispiel für die Einstellung der Polylinienlinienfarbe und der Polylinienpunktfarbe in Echarts

小云云

Freigeben： 2018-05-18 09:46:23

Original

11786 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode des jQuery-Plug-in-Echarts zum Festlegen der Farbe der Polylinienlinien und der Farbe der Linienpunkte im Liniendiagramm vorgestellt. Er analysiert die zugehörigen Bedienungsfähigkeiten des festzulegenden jQuery-Plug-in-Echarts Das Liniendiagramm in Form von Beispielen kann darauf zurückgreifen. Ich hoffe, es kann allen helfen.

1. Problemhintergrund

Entwerfen Sie ein Liniendiagramm, aber die Grafiken verwenden nicht die Farben, die mit dem Plug-in geliefert werden. Sie müssen die Farben anpassen die Linien und Eckpunkte

2. Quellcode implementieren

(1) Grafiken selbst zugewiesene Farbe

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #line{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById(&#39;line&#39;);
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: &#39;&#39;
          },
          tooltip: {
            trigger: &#39;axis&#39;
          },
          legend: {
            data:[&#39;销售量&#39;]
          },
          grid: {
            left: &#39;3%&#39;,
            right: &#39;4%&#39;,
            bottom: &#39;3%&#39;,
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: &#39;category&#39;,
            boundaryGap: false,
            data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;]
          },
          yAxis: {
            type: &#39;value&#39;
          },
          series: [
            {
              name:&#39;销售量&#39;,
              type:&#39;line&#39;,
              stack: &#39;销售量&#39;,
              data:[220, 132, 601, 314, 890, 230, 510]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="line"></p>
  </body>
</html>

Nach dem Login kopieren

(2) Benutzerdefinierte Linienfarbe

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #line{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById(&#39;line&#39;);
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: &#39;&#39;
          },
          tooltip: {
            trigger: &#39;axis&#39;
          },
          legend: {
            data:[&#39;销售量&#39;]
          },
          grid: {
            left: &#39;3%&#39;,
            right: &#39;4%&#39;,
            bottom: &#39;3%&#39;,
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: &#39;category&#39;,
            boundaryGap: false,
            data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;]
          },
          yAxis: {
            type: &#39;value&#39;
          },
          series: [
            {
              name:&#39;销售量&#39;,
              type:&#39;line&#39;,
              stack: &#39;销售量&#39;,
              itemStyle : {
                normal : {
                  lineStyle:{
                    color:&#39;#00FF00&#39;
                  }
                }
              },
              data:[220, 132, 601, 314, 890, 230, 510]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="line"></p>
  </body>
</html>

Nach dem Login kopieren

(3) Benutzerdefinierte Scheitelpunktfarbe

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #line{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById(&#39;line&#39;);
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: &#39;&#39;
          },
          tooltip: {
            trigger: &#39;axis&#39;
          },
          legend: {
            data:[&#39;销售量&#39;]
          },
          grid: {
            left: &#39;3%&#39;,
            right: &#39;4%&#39;,
            bottom: &#39;3%&#39;,
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: &#39;category&#39;,
            boundaryGap: false,
            data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;]
          },
          yAxis: {
            type: &#39;value&#39;
          },
          series: [
            {
              name:&#39;销售量&#39;,
              type:&#39;line&#39;,
              stack: &#39;销售量&#39;,
              itemStyle : {
                normal : {
                  color:&#39;#00FF00&#39;,
                  lineStyle:{
                    color:&#39;#00FF00&#39;
                  }
                }
              },
              data:[220, 132, 601, 314, 890, 230, 510]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="line"></p>
  </body>
</html>

Nach dem Login kopieren

3. Implementierungsergebnisse

(1) Diagramm selbst zugewiesene Farbe

(2) Benutzerdefinierte Linienfarbe

(3) Benutzerdefinierte Scheitelpunktfarbe

4. Beschreibung des Problems

(1) Legen Sie die Farbe der Polylinienlinie fest

lineStyle:{
 color:&#39;#00FF00&#39;
}

Nach dem Login kopieren

(2) Legen Sie die Farbe des Polylinienscheitelpunkts fest

itemStyle : {
 normal : {
  color:&#39;#00FF00&#39;
 }
}

Nach dem Login kopieren

verwandt Empfohlen:

Detaillierte Erläuterung der Verwendung von jQuery-Plug-in-Echarts zum Entfernen vertikaler Gitterlinien

Beispielfreigabe von Von Echarts implementierter Schleifengenerierungsdiagrammeffekt

Teilen Sie Beispiele dafür, wie Echarts die X-Achse, Y-Achse und Gitterlinien entfernen kann

Das obige ist der detaillierte Inhalt vonBeispiel für die Einstellung der Polylinienlinienfarbe und der Polylinienpunktfarbe in Echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!