Echarts前端可视化库使用教程

Echarts介绍

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
官网:https://echarts.apache.org/zh/index.html

快速上手

  1. 引入 Apache ECharts
    在刚才保存 echarts.js 的目录新建一个 index.html 文件,内容如下:
DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    
    <script src="echarts.js">script>
  head>
html>
  1. 绘制一个简单的图表
    在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后,添加:
<body>
  
  <div id="main" style="width: 600px;height:400px;">div>
body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>EChartstitle>
    
    <script src="echarts.js">script>
  head>
  <body>
    
    <div id="main" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    script>
  body>
html>

这样你的第一个图表就诞生了!
Echarts前端可视化库使用教程_第1张图片
同时Echarts官网给除了很多示例供大家选择使用,如图
Echarts前端可视化库使用教程_第2张图片

主要配置(常用的)

需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

series
– 系列列表。每个系列通过 type 决定自己的图表类型
– 通俗的理解:图标数据,指定什么类型的图标,可以多个图表重叠。

xAxis:直角坐标系 grid 中的 x 轴

– boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

yAxis:直角坐标系 grid 中的 y 轴

grid:直角坐标系内绘图网格。

title:标题组件

tooltip:提示框组件

legend:图例组件

color:调色盘颜色列表

stack:数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

还有很多怕配置项,具体可参考配置链接

你可能感兴趣的:(echarts,前端,信息可视化)