【可视化开发】横向柱状图带排名——配置项及修改样式

最新推荐文章于 2024-04-15 16:42:15 发布
最新推荐文章于 2024-04-15 16:42:15 发布
阅读量1.3k 收藏 10
点赞数 2
分类专栏： 可视化开发 文章标签： 前端 javascript echarts vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiurikeai/article/details/128702514
版权

在可视化开发中通常会遇到带排名的柱状图，要求前三条数据分别显示不同颜色，其余数据显示同一颜色，如下图所示
在这里插入图片描述

1. 配置柱状图颜色

  1. 定义柱状图渐变颜色数组 barColor
  2. 定义放置数据及样式的数组 studentsBarData
  3. 循环数据数组studentsData.seriesData，将前三位的itemStyle.color设置为渐变颜色数组前三位
  4. 将循环的数据与添加的样式push到空数组studentsBarData中
  5. 设置数据series[0].data : studentsBarData
let barColor = [
	{
		colorStops: [
			{
				offset: 0,
				color: "rgba(254, 205, 77, 0)", // 0% 处的颜色
			},
			{
				offset: 1,
				color: "rgba(254, 205, 77, 1)", // 100% 处的颜色
			},
		],
	},
	{
		colorStops: [
			{
				offset: 0,
				color: "rgba(205, 245, 246, 0)", // 0% 处的颜色
			},
			{
				offset: 1,
				color: "rgba(205, 245, 246, 1)", // 100% 处的颜色
			},
		],
	},
	{
	  colorStops: [
	    {
	      offset: 0,
	      color: "rgba(255, 195, 178, 0)", // 0% 处的颜色
	    },
	    {
	      offset: 1,
	      color: "rgba(255, 195, 178, 1)", // 100% 处的颜色
	    },
	  ],
	},
	{
	  colorStops: [
	    {
	      offset: 0,
	      color: "rgba(32, 196, 255, 0)", // 0% 处的颜色
	    },
	    {
	      offset: 1,
	      color: "rgba(32, 196, 255, 1)", // 100% 处的颜色
	    },
	  ],
	},
];
let studentsBarData = [];
this.studentsData.seriesData.forEach((item, i) => {
	let itemStyle = {
 		color: i > 3 ? barColor [3] : barColor [i],
	};
	studentsBarData.push({
		value: item,
		itemStyle: itemStyle,
	});
});

2. 配置y轴label文字颜色、配置柱状图末尾label文字颜色样式

  1. 定义颜色列表colorList
  2. yAxis[0]配置y轴坐标文字及样式
  3. yAxis[1]配置柱状图后具体数值文字及样式
let colorList = ["#FECD4D", "#CDF5F6", "#FFC3B2", "#20C4FF"];
let options = {
	//...其余配置
	yAxis: [
		{
			type: "category",
			inverse: true,//默认y轴是反转的，使用inverse=true调转
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisPointer: {
				label: {
					show: true,
					margin: 30,
				},
			},
			data: this.studentsData.xAxisData,
			axisLabel: {
				margin: 70,
				fontSize: 12,
				align: "left",
				interval: 0,
				color: "#fff",
				rich: {
				//自定义富文本样式
					a1: {
						color: colorList[0],
						width: 20,
						height: 20,
						align: "center",
						fontSize: 14,
						borderRadius: 2,
						borderColor: "rgba(71, 202, 255, 0.50)",
						borderWidth: 2,
						shadowColor: "rgba(71, 202, 255, 0.50)",
						shadowBlur: 10,
					},
					a2: {
						color: colorList[1],
						width: 20,
						height: 20,
						align: "center",
						fontSize: 14,
						borderRadius: 2,
						borderColor: "rgba(71, 202, 255, 0.50)",
						borderWidth: 2,
						shadowColor: "rgba(71, 202, 255, 0.50)",
						shadowBlur: 10,
					},
					a3: {
						color: colorList[2],
						width: 20,
						height: 20,
						align: "center",
						fontSize: 14,
						borderRadius: 2,
						borderColor: "rgba(71, 202, 255, 0.50)",
						borderWidth: 2,
						shadowColor: "rgba(71, 202, 255, 0.50)",
						shadowBlur: 10,
					},
					b: {
						color: colorList[3],
						width: 20,
						height: 20,
						align: "center",
						fontSize: 14,
						lineHeight: 20,
						borderRadius: 2,
						borderColor: "rgba(71, 202, 255, 0.50)",
						borderWidth: 2,
						shadowColor: "rgba(71, 202, 255, 0.50)",
						shadowBlur: 10,
					},
				},
				formatter: (params) => {
					var index = this.studentsData.xAxisData.indexOf(params);
					index = index + 1;
					if (index - 1 < 3) {
						return [
						"{a" + index + "|" + index + "}" + "  " + params,
						].join("\n");
					} else {
						return ["{b|" + index + "}" + "  " + params].join("\n");
					}
				},
			},
		},
		{
			type: "category",
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			show: true,
			data: this.studentsData.seriesData,
			axisLabel: {
			show: true,
			fontSize: 14,
			fontWeight:900,
			color: (value, index) => colorList[index < 3 ? index : 3],//改变柱状图末尾label文字颜色
			formatter: "{value}",
			},
		}
	],
}

3. 初始化排名柱状图echarts代码片段总结

initStudentsCharts() {
      this.students = this.$echarts.init(this.$refs.students);
      let colorList = ["#FECD4D", "#CDF5F6", "#FFC3B2", "#20C4FF"];
      let data1 = []//设置背景柱状图数据
      for (var i = this.studentsData.seriesData.length - 1; i >= 0; i--) {
          data1.push(Math.max.apply(null,this.studentsData.seriesData) * 1.2);   
      };
      let barColor = [
        {
          colorStops: [
            {
              offset: 0,
              color: "rgba(254, 205, 77, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(254, 205, 77, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          colorStops: [
            {
              offset: 0,
              color: "rgba(205, 245, 246, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(205, 245, 246, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 195, 178, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255, 195, 178, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          colorStops: [
            {
              offset: 0,
              color: "rgba(32, 196, 255, 0)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(32, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      let studentsBarData = [];
      this.studentsData.seriesData.forEach((item, i) => {
        let itemStyle = {
          color: i > 3 ? barColor[3] : barColor[i],
        };
        studentsBarData.push({
          value: item,
          itemStyle: itemStyle,
        });
      });
      let options = {
        legend: {
          show: false,
        },
        grid: {
          left: "-10%",
          right: "3%",
          bottom: "0%",
          top: "0%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              label: {
                show: true,
                margin: 30,
              },
            },
            data: this.studentsData.xAxisData,
            axisLabel: {
              margin: 70,
              fontSize: 12,
              align: "left",
              interval: 0,
              color: "#fff",
              rich: {
                a1: {
                  color: colorList[0],
                  width: 20,
                  height: 20,
                  align: "center",
                  fontSize: 14,
                  borderRadius: 2,
                  borderColor: "rgba(71, 202, 255, 0.50)",
                  borderWidth: 2,
                  shadowColor: "rgba(71, 202, 255, 0.50)",
                  shadowBlur: 10,
                },
                a2: {
                  color: colorList[1],
                  width: 20,
                  height: 20,
                  align: "center",
                  fontSize: 14,
                  borderRadius: 2,
                  borderColor: "rgba(71, 202, 255, 0.50)",
                  borderWidth: 2,
                  shadowColor: "rgba(71, 202, 255, 0.50)",
                  shadowBlur: 10,
                },
                a3: {
                  color: colorList[2],
                  width: 20,
                  height: 20,
                  align: "center",
                  fontSize: 14,
                  borderRadius: 2,
                  borderColor: "rgba(71, 202, 255, 0.50)",
                  borderWidth: 2,
                  shadowColor: "rgba(71, 202, 255, 0.50)",
                  shadowBlur: 10,
                },
                b: {
                  color: colorList[3],
                  width: 20,
                  height: 20,
                  align: "center",
                  fontSize: 14,
                  lineHeight: 20,
                  borderRadius: 2,
                  borderColor: "rgba(71, 202, 255, 0.50)",
                  borderWidth: 2,
                  shadowColor: "rgba(71, 202, 255, 0.50)",
                  shadowBlur: 10,
                },
              },
              formatter: (params) => {
                var index = this.studentsData.xAxisData.indexOf(params);
                index = index + 1;
                if (index - 1 < 3) {
                  return [
                    "{a" + index + "|" + index + "}" + "  " + params,
                  ].join("\n");
                } else {
                  return ["{b|" + index + "}" + "  " + params].join("\n");
                }
              },
            },
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            data: this.studentsData.seriesData,
            axisLabel: {
              show: true,
              fontSize: 14,
              fontWeight:900,
              color: (value, index) => colorList[index < 3 ? index : 3],//改变柱状图末尾label文字颜色
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            z: 2,
            name: "value",
            type: "bar",
            barWidth: 10,
            zlevel: 1,
            data: studentsBarData,
            label: {
              show: false,
              position: "right",
              color: "#fff",
              fontSize: 14,
              offset: [10, 0],
            },
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(21, 132, 185, 0.18)",
              },
            },
            data: data1,
          },
        ],
      };
      this.students.setOption(options);
      // 当浏览器宽度改变的时候，图表的大小也跟着改变
      window.onresize = () => {
        this.students.resize();
      };
    },
懒羊羊懒大王
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts案例：豆瓣电影TOP250的【四个图表】
No_Name_Cao_Ni_Mei的博客
06-24 1437
本文旨在实现豆瓣电影TOP250的可视化，通过确定柱状图、折线图和饼图等图表设计，展示评价人数最多、年份分布及类型占比。模拟数据用于演示，例如评价最多的电影、年份最多的电影数量及每年高分电影趋势。完整代码可下载，包含ECharts实现的四种图表。
echarts-柱状图：实现横向柱状体排名
itmacy的博客
02-27 2147
备注：可直接复制代码到echarts实例中运行：https://echarts.apache.org/examples/zh/editor.html?
这是一个数据可视化项目能够将历史数据排名转化为动态柱状图图表
08-10
这是一个数据可视化项目，能够将历史数据排名转化为动态柱状图图表
echarts横向柱状图TOP排名
chenlim87的博客
08-23 3568
需求和上一篇文章类似，只不过多了滚动条和标签颜色。标签右对齐请参考上篇文章。
echarts常见图形-横向排行榜柱状图(一)
qq_43167748的博客
12-21 6638
1.js文件（njyyfx.js） export let njyyfxEcharts = (yData, sData1, sData2) => { let option = { tooltip: { trigger: "axis", show: true, axisPointer: { type: "shadow" }, formatter: function(objs) { let obj = .
echarts横向柱状图排名
可以吃的向日葵
03-22 3404
注意：echarts版本要 “echarts”: “^4.9.0”,否则icon图标显示出问题 <template> <div class="horizontal-bar" ref="horizontalBar" /> </template> <script> export default ({ name: 'HorizontalBar', props: { source: Array, colors: { type.
echarts实现排名柱状图
小小•愿望的博客
03-22 1万+
通过echarts实现排名柱状图统计。
大数据BI可视化(Echarts组件)项目开发-熟悉结合Vue开发图表组件7.0附带1/6商家销售统计（横向柱状图）
最新发布
05-02
在本项目中，我们将深入探讨如何使用...通过学习和实践这个项目，开发者可以掌握如何在Vue中集成Echarts，创建动态的横向柱状图，以及如何处理和展示大数据。同时，对于前后端的协作和数据流的管理也有一定的理解。
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，使得开发者能够轻松地在网页上构建出交互式的图表。在这个项目中，我们主要关注的是如何...
100天精通Python（可视化篇）——第104天：Pyecharts绘制多种炫酷象形柱状图参数说明+代码实战
热门推荐
努力让自己发光，对的人才能迎着光而来
10-16 2万+
一、象形柱状图介绍 1. 象形柱状图是什么？ 2. 象形柱状图应用场景 二、象形柱状图配置选项 1. 导包 2. add_yaxis函数 3. symbol参数说明 3. 图形网站推荐 三、象形柱状图实战 1. 基础象形柱状图 2. 传入网络图片链接 3. 传入本地图片 4. 传入SVG代码
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
python可视化：Bar柱状图全局配置项(BrushOpts——区域选择组件配置项)
不秃头
11-12 1523
代码： from pyecharts.charts import Bar from pyecharts import options as opts from pyecharts.globals import ThemeType bar = ( Bar(init_opts=opts.InitOpts(theme=ThemeType.ESSOS)) #设置风格 .add_xaxis(["4302","4408","15103","15208","4103"]) #x轴数据 #
Echart柱状图表排名
qazxsw635241的博客
12-08 2154
Echart柱状图表排名
echarts柱状图动态排序
Pinellia
04-15 2018
动态折线图echarts
echarts实现横向柱状图排行榜功能(带升序自动排序功能)动态数据换行
m0_53912016的博客
10-12 2524
https://blog.csdn.net/seeeeeeeeeee/article/details/119238244
有排名的柱状图
zm_miner的博客
03-06 3613
项目中 使用到的echart 这个图我是纠结了一天,然后又花时间实践了一天,最后才有点头续 单单看图的话,会觉得好简单啊 有什么困难的 请听需求: 1.此图要随着网页大小改变而改变; 2.这个是显示前10名的值 为什么包了这么多层 都是有原因的啊 哭泣 地图部分就不贴代码了 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;...
echarts柱状图横向排行榜实战开发
杨雪枫的博客
06-17 1万+
先来一张效果图： <template> <div class="wrapper"> <h1> 市场公益考评综合排名 <span>Physical Yield Analysis</span> </h1> <div class="paihangbang3_box">...
python大学排名可视化
06-12
实现python大学排名可视化的方法有很多，以下是一种简单的实现方式： 1. 确定数据来源，可以从各大高校官网或者教育部官网等获取。 2. 使用Python爬虫爬取相关数据，这里可以使用BeautifulSoup和requests等库。 3. 对爬取到的数据进行处理，将排名和学校名称等信息提取出来，并存储到csv或者Excel文件中。 4. 使用matplotlib或者seaborn等可视化库，将处理后的数据进行可视化。 5. 根据需要设计合适的图表类型，比如柱状图、折线图等。 6. 添加合适的标签和图例，使图表更加清晰易懂。 7. 最后可以将生成的可视化图表保存为图片或者直接在Python窗口中展示。 需要注意的是，爬取数据时需要遵守相关法律法规和网站的使用规定，不得进行恶意爬取。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值