suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die Einstellung der Polylinienlinienfarbe und der Polylinienpunktfarbe in Echarts

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

小云云
小云云Original
2018-05-18 09:46:2311806Durchsuche

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>

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

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

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

(2) Legen Sie die Farbe des Polylinienscheitelpunkts fest 

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung zur Verwendung von jQuery-Plug-in-Echarts zum Entfernen vertikaler GitterlinienNächster Artikel：Ausführliche Erläuterung zur Verwendung von jQuery-Plug-in-Echarts zum Entfernen vertikaler Gitterlinien

In Verbindung stehende Artikel

Mehr sehen