ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery プラグイン echart を使用して垂直グリッド線を削除する方法の詳細な説明

jQuery プラグイン echart を使用して垂直グリッド線を削除する方法の詳細な説明

小云云オリジナル: 2018-01-23 16:04:192378ブラウズ

この記事では、jQuery プラグイン echarts の垂直グリッド線を削除するための使用方法を主に紹介し、jQuery アイコンプラグイン echarts の垂直グリッド線に関する設定と操作スキルを例の形式で比較および分析します。皆さんの参考になれば幸いです。

1. 問題の背景

グリッド線に縦線のないポリラインを設計する

(1) 縦線がある

(2) 縦グリッド線なし

<!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" >
    <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;
      }
      #chart{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById(&#39;chart&#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,
            splitLine:{
              show:true
            },
            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:[1220, 4132, 6101, 3134, 1890, 6230, 3210]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="chart"></p>
  </body>
</html>

3. 実装結果

(1) 縦グリッド線あり

(2) 縦グリッド線なし

4. 問題の説明

グリッドの縦線を削除し、xAxis に追加するだけです

jQuery プラグイン echart を使用して垂直グリッド線を削除する方法の詳細な説明

関連記事