echarts柱状图的常见效果

Qwe7

发布于 2022-06-14 00:43:31

64700

代码可运行

文章被收录于专栏：网络收集网络收集

运行总次数：0

代码可运行

2.柱状图的常见效果

标记:

最大值\最小值 markPoint

series: [{
  ......
  markPoint: {
    data: [{
      type: 'max',
      name: '最大值'
    }, {
      type: 'min',
      name: '最小值'
    }]
  }
}]

平均值 markLine

series: [{
  ......markLine: {
    data: [{
      type: 'average',
      name: '平均值'
    }]
  }
}]

显示

数值显示 label

series: [{
  ......
  label: {
    show: true, // 是否可见 
    rotate: 60 // 旋转角度 
  } 
} ]

柱宽度 barWidth

series: [{
  ......
  barWidth: '30%' // 柱的宽度 
}]

横向柱状图

所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可


var option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: xDataAr
  },
  series: [{
    type: 'bar',
    data: yDataAr
  }]
}

3.柱状图特点

柱状图描述的是分类数据，呈现的是每一个分类中『有多少？』, 图表所表达出来的含义在于不同类别数据的排名\对比情况

4.通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.

标题: title

var option = {
  title: {
    text: "成绩", // 标题文字 
    textStyle: {
      color: 'red' // 文字颜色 
    },
    borderWidth: 5, // 标题边框 
    borderColor: 'green', // 标题边框颜色 
    borderRadius: 5, // 标题边框圆角 
    left: 20, // 标题的位置 
    top: 20 // 标题的位置 
  }
}

提示框: tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框

触发类型: trigge

可选值有item\axis

触发时机: triggerOn

可选值有 mouseOver\click

格式化显示: formatte

字符串模板

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: '{b}:{c}'
  }
}

这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

回调函数

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: function (arg) {
      return arg.name + ':' + arg.data
    }
  }
}

工具按钮: toolbox

toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具

工具栏的按钮是配置在 feature 的节点之下

var option = {
  toolbox: {
    feature: {
      saveAsImage: {}, // 将图表保存为图片 
      dataView: {}, // 是否显示出原始数据 
      restore: {}, // 还原图表 
      dataZoom: {}, // 数据缩放 
      magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持 
        type: ['bar', 'line']
      }
    }
  }
}

图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用

legend 中的 data 是一个数组

legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

var option = {
  legend: {
    data: ['语文', '数学']
  },
  xAxis: {
    type: 'category',
    data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '语文',
    type: 'bar',
    data: [88, 92, 63, 77, 94, 80, 72, 86]
  }, {
    name: '数学',
    type: 'bar',
    data: [93, 60, 61, 82, 95, 70, 71, 86]
  }]
}