echarts初探

Posted 2020-10-16 Wayne Zhu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts初探相关的知识，希望对你有一定的参考价值。

　　最近经常看到echarts，觉得很有意思，并且这个库是百度开发的，目前来说使用的也很广泛，包括百度、阿里、腾讯、网易、小米、新浪、华为、联想、美团等一大批一线互联网公司在使用，且github上的star数也有2万多了，还是挺不错的。

　　echarts是一个纯javascript图标库，可以流畅的运行在PC和移动端，兼容性也不错，底层依赖的时canvas类库ZRender，它可以提供生动、直观、可定制的数据可视化图表。具体来说，可以提供常规的折线图、散点图、柱状图、饼图、K线图，地理数据可视化的地图、热力图、线图等等。且Echarts3开始独立出了“坐标系”的概念，支持直角坐标系、极坐标系、地理坐标系等。且对于流量非常珍贵的移动端的文件体积做了优化，且可以在移动端缩放、平移等等。且借助canvas的能力，可以在散点图中轻松展现上万甚至上十万的数据。且其特效绚丽。

　　使用Echarts很简单，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>echarts</title>
  <script type="text/javascript" src="./echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 700px; height: 300px;"></div>
  <script>
      var myChar = echarts.init(document.getElementById(\'main\'), \'light\');
      var option = {
        title: {
          text: \'宝宝的抖音喜欢的个数变化\'
        },
        legend: {
          data: [\'数量\']
        },
        xAxis: {
          data: [\'第一次\', \'第二次\', \'第三次\', \'第四次\', \'第五次\', \'第六次\', \'第七次\',]
        }, 
        yAxis: {},
        series: [{
          name: \'数量\',
          type: \'bar\',
          data: [439, 454, 448, 452, 468, 488, 493],         
        }],
        // 全局样式设置
        backgroundColor: \'pink\',
        textStyle: {
          color: \'black\'
        },
        // 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图
        itemStyle: {
          color: \'yellow\', // 柱状图的颜色
          shadowBlur: 40,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: \'red\',
          emphasis: {
            color: \'green\',
            shadowBlur: 200,
            shadowColor: \'black\'
          }
        },
      }
      myChar.showLoading();
      setTimeout(function () {
        myChar.setOption(option);
        myChar.hideLoading();
      }, 1500);

  </script>
</body>
</html>

即这里我们先写一个div用于容纳这个canvas，接下来，我们使用echarts.init函数进行初始化，第一个参数接受的的是一个DOM，第二个参数接受的是主题配置，如\'light\'或\'dart\'。

接下来，我们就可以写一个配置了，这个配置中有title、legend、xAxis、yAxis、series，值得注意的是，这里的legend的数据要和series中的数据一一对应。另外，我们还可以对整个图标的样式做出定义。最后我们只要setOption即可。

注意，数据是获取到的，有时为了不让用户等待，我们可以用showLoading提示用户很快就会加载，这样的用户体验会更好一些。

但是，仅仅从上面的例子中，我们就可以发现一个问题：legend、坐标轴和series中的数据一般是从后端获取到的，所以，如果按照这种写法显然会严重降低效率，所以，Echarts 4中使用了dataset来简化操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>echarts</title>
  <script type="text/javascript" src="./echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 700px; height: 300px;"></div>
  <script>
      var myChar = echarts.init(document.getElementById(\'main\'), \'light\');
      var option = {
        title: {
          text: \'宝宝的抖音喜欢的个数变化\'
        },
        legend: {
          data: [\'数量\']
        },
        dataset: {
          source:[   
          [\'product\', \'数量\'],
          [\'第一次\', 439],
          [\'第二次\', 454],
          [\'第三次\', 448],
          [\'第四次\', 452],
          [\'第五次\', 468],
          [\'第六次\', 488],
          [\'第七次\', 493]
          ]
        },
        xAxis: {
          type: \'category\'
        }, 
        yAxis: {},
        series: [
          {type: \'bar\'},
        ],
        // 全局样式设置
        backgroundColor: \'pink\',
        textStyle: {
          color: \'black\'
        },
        // 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图
        itemStyle: {
          color: \'yellow\', // 柱状图的颜色
          shadowBlur: 40,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: \'red\',
          emphasis: {
            color: \'green\',
            shadowBlur: 200,
            shadowColor: \'black\'
          }
        },
      }
      myChar.showLoading();
      setTimeout(function () {
        myChar.setOption(option);
        myChar.hideLoading();
      }, 1500);

  </script>
</body>
</html>

可以看到，我们这里使用了dataset，然后就可以将之前xAxis和series的内容全部放在这个dataset里，尤其是数据量比较大的时候，这种方法更为方便。

另外，Echarts中还是一个是dataZoom组件，即可以对图表的X轴进行zoom，添加如下代码即可：

        dataZoom: [
          {
            type: \'slider\',
            start: 10,
            end: 60
          }
        ],

因为在前端，表格也是需要和用户进行交互的，所以Echart也支持常规的事件，比如：click、dbclick、mousedown、mousemove、mouseup、mouseover、mouseout等。

      myChar.on(\'click\', function (params) {
        alert((params.data[0] + \': \').concat(params.data[1]))
      });

全部代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>echarts</title>
  <script type="text/javascript" src="./echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 700px; height: 300px;"></div>
  <script>
      var myChar = echarts.init(document.getElementById(\'main\'), \'light\');
      var option = {
        title: {
          text: \'宝宝的抖音喜欢的个数变化\'
        },
        legend: {
          data: [\'数量\']
        },
        dataset: {
          source:[   
          [\'product\', \'数量\'],
          [\'第一次\', 439],
          [\'第二次\', 454],
          [\'第三次\', 448],
          [\'第四次\', 452],
          [\'第五次\', 468],
          [\'第六次\', 488],
          [\'第七次\', 493]
          ]
        },
        xAxis: {
          type: \'category\'
        }, 
        yAxis: {},
        dataZoom: [
          {
            type: \'slider\',
            start: 10,
            end: 60
          }
        ],
        series: [
          {type: \'bar\'},
        ],
        // 全局样式设置
        backgroundColor: \'pink\',
        textStyle: {
          color: \'black\'
        },
        // 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图
        itemStyle: {
          color: \'yellow\', // 柱状图的颜色
          shadowBlur: 40,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: \'red\',
          emphasis: {
            color: \'green\',
            shadowBlur: 200,
            shadowColor: \'black\'
          }
        },
      }
      myChar.showLoading();
      setTimeout(function () {
        myChar.setOption(option);
        myChar.hideLoading();
      }, 800);

      myChar.on(\'click\', function (params) {
        alert((params.data[0] + \': \').concat(params.data[1]))
      });

  </script>
</body>
</html>

View Code

选择使用canvas或者是svg进行渲染

　我们之前提到了使用canvas渲染和svg渲染的不同，而使用Echarts配置何种渲染引擎也是非常简单的，如下所示：

 var myChar = echarts.init(document.getElementById(\'main\'), \'light\', {renderer: \'svg\'});

　　即我们只需要添加第三个参数 {renderer: \'svg\'}这样就使用了svg进行渲染了。

参考文章：Echarts

以上是关于echarts初探的主要内容，如果未能解决你的问题，请参考以下文章

echart-悬浮框-初探

初探JSP与LEeclipse

小程序里echarts画的饼图在安卓手机上效果不正常？

百度开源e-chart初探

shader开发_4.Surface shader初探

echarts分组插件echarts.group代码分享