jQuery プラグイン echart を使用して垂直グリッド線を削除する方法の詳細な説明-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-23 16:04:19

オリジナル

2252 人が閲覧しました

この記事では、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) 縦グリッド線なし