Echarts-横向柱状图实现

╰半橙微兮° 2022-11-06 14:52 268阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

*  label，bar的颜色设置
 *  y轴label文字样式设置
    
     *  文字居左展示
     *  前缀序号，圆圈样式

--------------------

let colors = {
        1: "rgba(216,70,10,1)",
        2: "rgba(216,121,10,1)",
        3: "rgba(226,187,32,1)",
        4: "rgba(2,189,229,1)",
    }
    option = {
        title: {
            text: '世界人口总量'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '-7%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
            },
        },
        yAxis: {
            type: 'category',
            inverse: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                margin: 120,
                textStyle: {
                  align: 'left',
                  color: (value, index) => {
                    let sequence = index + 1;
                    return sequence < 4 ? colors[sequence] : colors[4];
                  },
                },
                formatter: (value, index) => {
                  let sequence = index + 1;
                  if (sequence == 1) {
                    return "{one|1} {a|" + value + "}";
                  } else if (sequence == 2) {
                    return "{two|2} {b|" + value + "}";
                  } else if (sequence == 3) {
                    return "{three|3} {c|" + value + "}";
                  }
                  return "{default|} {d|" + value + "}";
                },
                rich: {
                  a: {
                    color: "rgba(216,70,10,1)",
                  },
                  b: {
                    color: "rgba(216,121,10,1)",
                  },
                  c: {
                    color: "rgba(226,187,32,1)",
                  },
                  d: {
                    color: "white",
                  },
                  one: {
                    backgroundColor: "rgba(216,70,10,1)",
                    width: 20,
                    height: 20,
                    align: "center",
                    color: "white",
                    borderRadius: 10,
                  },
                  two: {
                    backgroundColor: "rgba(216,121,10,1)",
                    width: 18,
                    height: 18,
                    color: "white",
                    align: "center",
                    borderRadius: 9,
                  },
                  three: {
                    backgroundColor: "rgba(226,187,32,1)",
                    width: 16,
                    height: 16,
                    color: "white",
                    align: "center",
                    borderRadius: 8,
                  },
                  default: {
                    backgroundColor: "white",
                    width: 10,
                    height: 10,
                    borderRadius: 5,
                  },
                },
              },
            data: ['世界人口(万)', '中国', '印度', '美国', '印尼', '巴西']
        },
        series: [
            {
                name: '2012年',
                type: 'bar',
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: "red",
                    fontSize: 18,
                  },
                },
                showBackground: true,
                backgroundStyle: {
                  color: "rgba(1,38,74,0.4)"
                },
                data: [681807, 134141, 121594, 31000, 23438, 19325],
                itemStyle: {
                  normal: {
                    color: (serie) => {
                      let sequence = serie.dataIndex + 1;
                      return sequence < 4 ? colors[sequence] : colors[4];
                    },
                  },
                }
            }
        ]
    };

> 拷贝到[Echarts示例][Echarts]当中查看即可；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20221023/2626937126db4dcc9f54ec64e59d591b.png
[Echarts]: https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts 柱状图横向展示和竖向展示

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第021个 [点击查看专栏目录][Link 1]

朴灿烈づ我的快乐病毒、/ 2024年03月26日 12:34/ 0 赞/ 80 阅读

相关 ECharts 实现重叠柱状图

1 使用详解（1）series.z 说明：折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先

女爷i/ 2023年10月05日 11:32/ 0 赞/ 50 阅读

相关 echarts 柱状图如何横向展示

将xAxis与yAxis里面的内容互换，可以横纵切换展示 xAxis: { type: 'value',

约定不等于承诺〃/ 2022年12月23日 11:07/ 0 赞/ 457 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 298 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 642 阅读

相关 Echarts-横向柱状图实现

╰半橙微兮°/ 2022年11月06日 14:52/ 0 赞/ 269 阅读

相关 echarts横向柱状图超出文字用省略号代替

echarts横向柱状图超出文字用省略号代替解决方案解决方案最终实现效果图 ![在这里插入图片描述][watermark_type_ZmFu

Love The Way You Lie/ 2022年09月03日 09:23/ 0 赞/ 392 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 369 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 315 阅读

相关 ECharts之横向百分比柱状图

效果图 ![在这里插入图片描述][20191015094349429.gif] 背景图片 ![20190725170845879.png][] 下载EChar

古城微笑少年丶/ 2021年08月13日 12:40/ 0 赞/ 1385 阅读