Home > Web Front-end > JS Tutorial > body text

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

小云云
Release: 2018-01-23 14:38:11
Original
6793 people have browsed it

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!