search

Home  >  Article  >  Web Front-end  >  Share an example of how echarts implements the effect of removing the X-axis, Y-axis and grid lines

Share an example of how echarts implements the effect of removing the X-axis, Y-axis and grid lines

小云云
小云云Original
2018-01-23 14:38:116817browse

This article mainly introduces the effect of removing the X-axis, Y-axis and grid lines implemented by the jQuery plug-in echarts. It analyzes the operation skills of the echarts plug-in for drawing table diagrams and setting graphics-related attributes in the form of examples. It also comes with demo source code for readers to download for reference. , friends in need can refer to it, I hope it can help everyone.

The example in this article describes the effect of removing the X-axis, Y-axis and grid lines achieved by the jQuery plug-in echarts. Share it with everyone for your reference, the details are as follows:

1. Problem background:

How to remove the X-axis, Y-axis and grid lines in echarts, leaving only the data graphics

2. Implementation source code: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-去掉X轴、Y轴和网格线</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="echarts.js" ></script>
    <script>
      $(function(){
        function randomDataArray() {
          var d = [];
          var arr = [3,5,7,9,10,1,2,4,8,6];
          var len = 10;
          for(var i=0;i<len;i++)
          {
            d.push([i+1,0,arr[i],]);
          }
          return d;
        }
        var chart = document.getElementById('chart');
        var echart = echarts.init(chart);
        var option = {
          legend: {
            data:['scatter1'],
            show:false
          },
          textStyle:{
            fontSize:16
          },
          xAxis : [
            {
              type : 'value',
              splitNumber: 2,
              scale: true,
              show:false,
              splitLine:{
            　　　　show:false
            　　}
            }
          ],
          yAxis : [
            {
              type : 'value',
              splitNumber: 2,
              scale: true,
              show:false,
              splitLine:{
            　　　　show:false
            　　 }
            }
          ],
          series : [
            {
              name:'scatter1',
              type:'scatter',
              symbol: 'emptyCircle',
              symbolSize: 20,
              itemStyle : {
                normal: {
                  label:{
                    show: true,
                    position: 'inside',
                    textStyle : {
                      fontSize : 24,
                      fontFamily : '微软雅黑',
                      color:'#FF0000'
                    }
                  }
                }
              },
              data: randomDataArray()
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="chart" style="width: 1200px; height: 220px;"></p>
  </body>
</html>

3. Implementation renderings:

## Related recommendations:


Detailed explanation of using Echarts chart in vue

PHP Detailed explanation of using Echarts to generate data statistical reports

ECharts3 implements dynamic data + time axis operate

The above is the detailed content of Share an example of how echarts implements the effect of removing the X-axis, Y-axis and grid lines. For more information, please follow other related articles on the PHP Chinese website!

php jquery echarts
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example of jQuery implementation of Snake game methodNext article：Example of jQuery implementation of Snake game method

Related articles

See more