当前位置: 首页>前端>正文

eshart柱状图进度条 echarts柱状图series

Echarts-基本图表

  • 柱状图
  • 基础
  • 普通柱状图
  • 堆叠柱状图
  • 样式
  • 柱条样式
  • 柱条宽度和高度
  • 柱条间距
  • 为柱条添加背景色
  • 折线图
  • 基础
  • BUG
  • 笛卡尔坐标系中的折线图
  • 空数据
  • 堆叠折线图
  • 本文贡献者
  • 样式
  • 折线的样式
  • 数据点的样式
  • 数据显示
  • 饼图
  • 基础
  • 半径
  • 不显示饼图
  • 玫瑰图
  • 圆环图

柱状图

基础

普通柱状图

option = {
//横轴
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
//纵轴,多个表示多列
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

堆叠柱状图

使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 stack 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 stack 值的系列将堆积在一组。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'bar',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'bar',
      stack: 'x'
    }
  ]
};

样式

柱条样式

柱条的样式可以通过 series.itemStyle 设置,包括:

  • 柱条的颜色(color);
  • 柱条的描边颜色(borderColor)、宽度(borderWidth)、样式(borderType);
  • 柱条圆角的半径(barBorderRadius);
  • 柱条透明度(opacity);
  • 阴影(shadowBlurshadowColorshadowOffsetXshadowOffsetY)。

柱条宽度和高度

柱条宽度可以通过 barWidth 设置(百分比)。

还可以设置 barMaxWidth 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 barMinHeight,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。

柱条间距

柱条间距分为两种,一种是不同系列在同一类目下的距离 barGap,另一种是类目与类目的距离 barCategoryGap。

为柱条添加背景色

有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 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)'
      }
    }
  ]
};

折线图

基础

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line',
      smooth: true //平滑曲线
    }
  ]
};

BUG

问题:echart折线图“有点无线”问题
原因:echarts存在动画,通过getDataURL()获取的图片会延迟加载。因动画原因没有出来线。

解决:

第一种:延迟使用getDataURL()获取图片,加个setTimeout
第二种:禁用动画,option配置animation:false

笛卡尔坐标系中的折线图

如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 seriesdata 每个数据用一个包含两个元素的数组表示就行了。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]
};

空数据

在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望–空数据不应被其左右的数据连接。

在 ECharts 中,我们使用字符串 '-' 表示空数据,这对其他系列的数据也是适用的。

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

eshart柱状图进度条 echarts柱状图series,eshart柱状图进度条 echarts柱状图series_ecmascript,第1张

堆叠折线图

同((20220718141915-m4vn5zu ‘堆叠柱状图’))

但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'line',
      stack: 'x',
      areaStyle: {}
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'line',
      stack: 'x',
      areaStyle: {}
    }
  ]
};

eshart柱状图进度条 echarts柱状图series,eshart柱状图进度条 echarts柱状图series_eshart柱状图进度条_02,第2张

本文贡献者

样式

折线的样式

折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 series.lineStyle 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。

数据点的样式

数据点的样式可以通过 series.itemStyle 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。

数据显示

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

饼图

基础

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 1548,
          name: '搜索引擎'
        }
      ]
    }
  ]
};

半径

饼图的半径可以通过 series.radius 设置,可以是诸如 '60%' 这样相对的百分比字符串,或是 200 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。

不显示饼图

在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 series.stillShowZeroSum 设为 false

玫瑰图

在series中设置roseType: ‘area’

圆环图

在series中设置radius: [‘40%’, ‘70%’],40%为内半径,70%为外半径

在圆环图中间显示高亮扇形对应的文字

上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 label(默认用扇形颜色显示数据的 name),显示在圆环图中间。在默认情况下不显示系列的 label,在高亮时显示。具体的代码如下:

option = {
  legend: {
    orient: 'vertical',
    x: 'left',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
        emphasis: {
          show: true
        }
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};

其中,avoidLabelOverlap 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 true,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 false

这样,圆环图中间会显示高亮数据的 name 值。



https://www.xamrdz.com/web/2tv1923282.html

相关文章: