经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
Echarts Bar横向柱状图实例代码
来源:jb51  时间:2021/8/26 10:36:26  对本文有异议

接上一篇# Echart Bar柱状图样式详解续写,可以先看看上一篇,不看的话,影响也不是特别大。

横向柱状图

动态更新数据和样式

实现数据按月统计和按日统计的动态切换。按月统计时,每个月数据都会展示,x 轴显示 12 个标签;按日统计时,x 轴不完全显示所有标签,间隔显示,而且柱状体的宽度也会变化。主要是采用的是setOption方法。

官方文档[setOption]:echarts.apache.org/zh/api.html

  1. <script>
  2. import * as R from "ramda";
  3.  
  4. const source1 = [
  5. ["1月", 1330, 666, 560],
  6. ["2月", 820, 760, 660],
  7. ......
  8. ["11月", 901, 880, 360],
  9. ["12月", 934, 600, 700],
  10. ];
  11. const source2 = [
  12. ["1日", 1330, 666, 560],
  13. ["2日", 820, 760, 660],
  14. ......
  15. ["29日", 934, 600, 700],
  16. ["30日", 1330, 666, 560],
  17. ];
  18.  
  19. // 具体配置如之前所示,详细省略,只做基本示例展示
  20. const initOption = {
  21. ...
  22. dataset: { source: source1 },
  23. };
  24.  
  25. export default {
  26. data() {
  27. return {
  28. charts: null,
  29. isDaily: false,
  30. };
  31. },
  32. mounted() {
  33. this.charts = this.$echarts.init(
  34. document.getElementById("barCharts"),
  35. null,
  36. {
  37. renderer: "svg",
  38. }
  39. );
  40. this.charts.setOption(R.clone(initOption));
  41. },
  42. methods: {
  43. handleSource() {
  44. this.isDaily = !this.isDaily;
  45. this.charts.setOption(
  46. R.mergeDeepRight(initOption, {
  47. // 动态更新数据源
  48. dataset: {
  49. source: this.isDaily ? source2 : source1,
  50. },
  51. xAxis: {
  52. // 动态更新标签间隔
  53. axisLabel: {
  54. interval: this.isDaily ? 4 : "auto",
  55. },
  56. },
  57. series: R.map(
  58. // 动态更新柱体宽度
  59. (o) => ((o.barWidth = this.isDaily ? 12 : 24), o),
  60. initOption.series
  61. ),
  62. }),
  63. true
  64. );
  65. this.charts.resize();
  66. },
  67. },
  68. };
  69. </script>

解决 echarts 宽高自适应问题

在 web 项目中做图表时,图表的宽高不是固定的,需要随着浏览器宽度高度自适应,使用的方法就是resize。如果有多个图表,需要同时进行resize处理。

  1. <script>
  2. export default {
  3. mounted() {
  4. window.addEventListener("resize", this.handleResize, false);
  5. },
  6. destroyed() {
  7. window.removeEventListener("resize", this.handleResize);
  8. },
  9. methods: {
  10. handleResize() {
  11. const _this = this;
  12. const timer = setTimeout(() => {
  13. _this.lineCharts.resize();
  14. _this.barCharts.resize();
  15. }, 500);
  16. // 清除定时器
  17. this.$once("hook:beforeDestroy", () => {
  18. setTimeout(timer);
  19. });
  20. },
  21. },
  22. };
  23. </script>

纵向柱状图

纵向柱状图实现

本质和横向是一样的,就是将 x,y 轴值更换一下;x 轴为value,y 轴为category

  1. let option = {
  2. xAxis: {
  3. type: "value",
  4. },
  5. yAxis: {
  6. type: "category",
  7. },
  8. };

坐标指示器背景渐变色

其实原理和横向的一样,就是渐变色处理的地方 x,y 值更换一下

  1. let horizontalColor = {
  2. type: "linear",
  3. x: 1, // 更换
  4. y: 0,
  5. x2: 0,
  6. y2: 0, // 更换
  7. colorStops: [
  8. { offset: 0, color: "rgba(234,244,255,1)" },
  9. { offset: 1, color: "rgba(234,244,255,0.3)" },
  10. ],
  11. global: false,
  12. };

柱体设置不同颜色

柱体的属性设置series中color可以是一个函数,在函数中处理。核心代码为colorList[params.dataIndex]

  1. let colorList = [
  2. "#1890ff",
  3. "#52c41a",
  4. "#faad14",
  5. "#f5222d",
  6. "#1DA57A",
  7. "#d9d9d9",
  8. ];
  9. let series = [
  10. {
  11. type: "bar",
  12. barWidth: 16,
  13. itemStyle: {
  14. // 定制显示(按顺序),实现不同颜色的柱体
  15. color: (params) => {
  16. return colorList[params.dataIndex];
  17. },
  18. },
  19. dimensions: ["类型", "销售数量"],
  20. },
  21. ];

柱状图上方显示数值

柱体的属性设置series中label可以是一个函数,在函数中处理。可以设置位置,字体颜色和大小等。核心代码为params.value[params.encode.x[0]]。

  1. let series = [
  2. {
  3. // ......
  4. type: "bar",
  5. label: {
  6. // 柱图头部显示值
  7. show: true,
  8. position: "right",
  9. color: "#333",
  10. fontSize: "12px",
  11. formatter: (params) => {
  12. return params.value[params.encode.x[0]];
  13. },
  14. },
  15. },
  16. ];

tooltip 提示框自定义

和横向的一样,就是要注意取值params[0].axisValue, item.seriesName, item.value[item.encode.x[0]]

  1. let tooltip = R.merge(tooltip, {
  2. formatter: function(params) {
  3. let html = `<div style="height:auto;width:163px;">
  4. <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
  5. ${params[0].axisValue}
  6. </div>
  7. ${params
  8. .map(
  9. (
  10. item
  11. ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
  12. <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
  13. item.color
  14. };"></span>
  15. ${item.seriesName}
  16. <span style="flex:1;text-align:right;">${
  17. item.value[item.encode.x[0]]
  18. }</span>
  19. </div>`
  20. )
  21. .join("")}
  22. </div>`;
  23. return html;
  24. },
  25. });

总体实现

  1. charts.setOption({
  2. title: {
  3. text: "销售数量分布",
  4. },
  5. dataset: {
  6. source: [
  7. ["苹果", 200],
  8. ["桃子", 180],
  9. ["葡萄", 340],
  10. ["香蕉", 250],
  11. ["芒果", 166],
  12. ["榴莲", 185],
  13. ],
  14. },
  15. xAxis: R.merge(yAxis, {
  16. type: "value",
  17. }),
  18. yAxis: R.mergeDeepRight(xAxis, {
  19. type: "category",
  20. axisPointer: {
  21. shadowStyle: {
  22. color: horizontalColor,
  23. },
  24. },
  25. }),
  26. series,
  27. tooltip,
  28. });

总结

到此这篇关于Echarts Bar横向柱状图的文章就介绍到这了,更多相关Echarts Bar横向柱状图内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号