ECharts(七)

ECharts 基础图表

ECharts 基本柱状图

  1. 柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。

  2. 设置柱状图的方式,是将 series 的 type 设为 'bar'

    option = {
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      实现多系列的柱状图,只需要在 series 多添加一项就可以了
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        },
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    
  3. 柱条的样式可以通过 series.itemStyle 设置:

    1. 柱条的颜色(color
    2. 柱条的描边颜色(borderColor)、宽度(borderWidth)、样式(borderType);
    3. 柱条圆角的半径(barBorderRadius);
    4. 柱条透明度(opacity);
    5. 阴影(shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY)。
    option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [
            10,
            22,
            28,
            {
              value: 43,
              // 设置单个柱子的样式
              itemStyle: {
                color: '#91cc75',
                shadowColor: '#91cc75',
                borderType: 'dashed',
                opacity: 0.5
              }
            },
            49
          ],
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 1,
            borderType: 'solid',
            borderColor: '#73c0de',
            shadowColor: '#5470c6',
            shadowBlur: 3
          }
        }
      ]
    };
    
  4. 柱条宽度可以通过barWidth 设置,将 barWidth 设为 ‘20%’,表示每个柱条的宽度就是类目宽度的 20%。由于每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。

    option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [10, 22, 28, 43, 49],
          barWidth: '20%'
        }
      ]
    };
    
  5. 可以设置 barMaxWidth 限制柱条的最大宽度,

  6. 可以设置 barMinHeight 限制柱条的最小高度,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。

  7. 柱条间距分为两种:

    1. 一种是不同系列在同一类目下的距离barWidth
    2. 一种是类目与类目的距离 barCategoryGap
      option = {
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 18],
            barGap: '20%',
            barCategoryGap: '40%'
          },
          {
            type: 'bar',
            data: [12, 14, 9, 9, 11]
          }
        ]
      };
      
  8. 为柱条添加背景色;用 showBackground开启,并且可以通过backgroundStyle配置。

    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }
      ]
    };
    

ECharts 基础折线图

  1. 折线图是一种通过折线来表现数据大小的一种常用图表类

  2. series 中,我们将系列类型设为 line·设置折线图,且通过 data 指定了折线图三个点的取值

    option = {
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150],
          type: 'line'
        }
      ]
    };
    
  3. 折线图中折线的样式可以通过 lineStyle设置,可以为其指定颜色、线宽、折线类型、阴影、不透明度等等

    option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 23, 19],
          type: 'line', // 折线图分为很多类型
          lineStyle: {
            normal: {
              color: 'green', // 设置颜色
              width: 4, // 设置宽度
              type: 'dashed' // 设置类型
            }
          }
        }
      ]
    };
    
  4. 数据点的样式可以通过 series.itemStyle填充颜色(color)、描边颜色(borderColor)、描边``宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等

  5. 在数据点处显示数值:数据点的标签通过 series.label属性指定。如果将label下的 show 指定为true,则表示该数值默认时就显示;如果为 false,而 series.emphasis.label.show 为 true,则表示只有在鼠标移动到该数据时,才显示数值

    option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 23, 19],
          type: 'line',
          label: {
            show: true,
            position: 'bottom',
            textStyle: {
              fontSize: 20
            }
          }
        }
      ]
    };
    
  6. 在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望–空数据不应被其左右的数据连接。

    option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [0, 22, '-', 23, 19],
          type: 'line'
        }
      ]
    };
    

Echarts 基础饼图

  1. 饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例

  2. 饼图通过设置 :type: 'pie',

  3. 饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中

    option = {
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 234,
              name: '联盟广告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ],
           radius: '50%'
        }
      ]
    };
    
  4. 这里是 value 不需要是百分比数据,ECharts 会根据所有数据的value ,按比例分配它们在饼图中对应的弧度。

  5. 饼图的半径可以通过series.radius设置,可以是60%’ 这样相对的百分比字符串,或是 200这样的绝对像素数值

  6. 如果数据和为0,不显示饼图可以将 series.stillShowZeroSum 设为 false。

    option = {
      series: [
        {
          type: 'pie',
          stillShowZeroSum: false,
           label: {
            show: false
          },
          data: [
            {
              value: 0,
              name: '直接访问'
            },
            {
              value: 0,
              name: '联盟广告'
            },
            {
              value: 0,
              name: '搜索引擎'
            }
          ]
        }
      ]
    };
    

异步数据的加载与动态更新

  1. Charts 中实现异步数据的更新,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题,图例和空的坐标轴
    myChart.setOption({
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: []
        }
      ]
    });
    
    // 异步加载数据
    $.get('data.json').done(function(data) {
      // 填入数据
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [
          {
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
          }
        ]
      });
    });
    

loading 动画

  1. ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

    myChart.showLoading();
    $.get('data.json').done(function (data) {
        myChart.hideLoading();
        myChart.setOption(...);
    });
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值