echarts柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能...

最新推荐文章于 2024-04-12 11:48:27 发布
最新推荐文章于 2024-04-12 11:48:27 发布
阅读量303 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/herd/p/7250498.html
本文介绍如何利用ECharts库在网页上绘制一个简单的柱状图，展示不同城市的数据统计情况。文中提供了完整的HTML页面代码及JavaScript实现，包括设置图表样式、数据源等关键步骤。

---------------------------------------------------------代码区---------------------------------------------------------------

<!DOCTYPE html>
<html>
　　<head>
　　<base href="<%=basePath%>">
　　<title>测试</title>
　　
　　<meta http-equiv="pragma" content="no-cache">
　　<meta http-equiv="cache-control" content="no-cache">
　　<meta http-equiv="expires" content="0">　　
　　<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
　　<meta http-equiv="description" content="This is my page">
　　<link rel="stylesheet" href="admin/css/bootstrap.min.css">
　　
　　
</head>

<body>
　　　　<section class="hj-second-page-section">
　　　　　　<div class="container-fluid">
　　　　　　　　<div class="rows">
　　　　　　　　　　<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
　　　　　　　　　　　　<div class="rows">
　　　　　　　　　　　　　　<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hj-jumbotron-div">
　　　　　　　　　　　　　　　　<div class="panel panel-primary ng-scope">
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　 <!-- pannel start -->
　　　　　　　　　　　　　　　　 <div class="panel-body vc-pannel-body-toggle">
　　　　　　　　　　　　　　　　 　　　　<div class="rows ng-scope">
　　　　　　　　　　　　　　　　　　 　　　　<div class="panel-body vc-msg-panel-body">
　　　　　　　　　　　　　　　　　　　　　　 　　<div class="row">
　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
　　　　　　　　　　　　　　　　　　　　　　　　　　 　　<div id="rt_chart1" style=""></div>
　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　 </div>
　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　 　　　　</div>
　　　　　　　　　　　　　　　　 　　　　
　　　　　　　　　　　　　　　　 </div>
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　 <!-- pannel end -->
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</section>
　　　　　　
　　　　
　　　　<script src="echarts.js"></script>
　　　　<script src="jquery-2.2.3.min.js"></script>
　　　　
　　　　<script>
　　　　　　/**
　　　　　　 * @description 绘制柱状图
　　　　　　 * @author luohan
　　　　　　 * @date 2017-7-28
　　　　　　 * @param
　　　　　　 */
　　　　　　function initChart1() {
　　　　　　　　$("#rt_chart1").height(460);
　　　　　　　　$("#rt_chart1").width(1005);
　　　　　　　　$("#rt_chart1").css("border","1px solid #ddd");
　　　　　　　　var myChart1 = echarts.init(document.getElementById("rt_chart1"));

　　　　　　　　var option1 = {
　　　　　　　　　　title : {
　　　　　　　　　　　　text: '数据统计',
　　　　　　　　　　　　subtext: ''
　　　　　　　　　　},
　　　　　　　　　　tooltip : {
　　　　　　　　　　　　trigger: 'axis'
　　　　　　　　　　},
　　　　　　　　　　legend: {
　　　　　　　　　　　　data:['北京','上海','深圳','广州']
　　　　　　　　　　},
　　　　　　　　　　toolbox: {
　　　　　　　　　　　　show : true,
　　　　　　　　　　　　feature : {
　　　　　　　　　　　　　　mark : {show: true},
　　　　　　　　　　　　　　dataView : {show: true, readOnly: false},
　　　　　　　　　　　　　　magicType : {show: true, type: ['line', 'bar']},
　　　　　　　　　　　　　　restore : {show: true},
　　　　　　　　　　　　　　saveAsImage : {show: true}
　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　calculable : true,
　　　　　　　　　　xAxis : [
　　　　　　　　　　　　{
　　　　　　　　　　　　　　type : 'category',
　　　　　　　　　　　　　　show:false,
　　　　　　　　　　　　　　data : ['横坐标自定义']
　　　　　　　　　　　　}
　　　　　　　　　　],
　　　　　　　　　　yAxis : [
　　　　　　　　　　　　{
　　　　　　　　　　　　　　type : 'value'
　　　　　　　　　　　　　　
　　　　　　　　　　　　}
　　　　　　　　　　],
　　　　　　　　　　series : [
　　　　　　　　　　　　{
　　　　　　　　　　　　　　name:'北京',
　　　　　　　　　　　　　　type:'bar',
　　　　　　　　　　　　　　itemStyle: {
　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　color: function(params) {
　　　　　　　　　　　　　　　　　　　　//首先定义一个数组
　　　　　　　　　　　　　　　　　　　　var colorList = [
　　　　　　　　　　　　　　　　　　　　　　'#C33531'
　　　　　　　　　　　　　　　　　　　　];
　　　　　　　　　　　　　　　　　　　　return colorList[params.dataIndex]
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　//以下为是否显示
　　　　　　　　　　　　　　　　　　label: {
　　　　　　　　　　　　　　　　　　　　show: false
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　data:[2.0],
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　name:'上海',
　　　　　　　　　　　　　　type:'bar',
　　　　　　　　　　　　　　itemStyle: {
　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　color: function(params) {
　　　　　　　　　　　　　　　　　　　　//首先定义一个数组
　　　　　　　　　　　　　　　　　　　　var colorList = [
　　　　　　　　　　　　　　　　　　　　　　'#EFE42A'
　　　　　　　　　　　　　　　　　　　　];
　　　　　　　　　　　　　　　　　　　　return colorList[params.dataIndex]
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　//以下为是否显示
　　　　　　　　　　　　　　　　　　label: {
　　　　　　　　　　　　　　　　　　　　show: false
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　data:[4.9],
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　name:'深圳',
　　　　　　　　　　　　　　type:'bar',
　　　　　　　　　　　　　　itemStyle: {
　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　color: function(params) {
　　　　　　　　　　　　　　　　　　　　//首先定义一个数组
　　　　　　　　　　　　　　　　　　　　var colorList = [
　　　　　　　　　　　　　　　　　　　　　　'#64BD3D'
　　　　　　　　　　　　　　　　　　　　];
　　　　　　　　　　　　　　　　　　　　return colorList[params.dataIndex]
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　//以下为是否显示
　　　　　　　　　　　　　　　　　　label: {
　　　　　　　　　　　　　　　　　　　　show: false
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　data:[7.9],
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　name:'广州',
　　　　　　　　　　　　　　type:'bar',
　　　　　　　　　　　　　　itemStyle: {
　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　color: function(params) {
　　　　　　　　　　　　　　　　　　　　//首先定义一个数组
　　　　　　　　　　　　　　　　　　　　var colorList = [
　　　　　　　　　　　　　　　　　　　　　　'#EE9201'
　　　　　　　　　　　　　　　　　　　　];
　　　　　　　　　　　　　　　　　　　　return colorList[params.dataIndex]
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　//以下为是否显示
　　　　　　　　　　　　　　　　　　label: {
　　　　　　　　　　　　　　　　　　　　show: false
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　data:[23.0],
　　　　　　　　　　　　}
　　　　　　　　　　]
　　　　　　　　};

　　　　　　　　


　　　　　　　　// 为echarts对象加载数据
　　　　　　　　myChart1.setOption(option1);
　　　　　　}

　　　　　　initChart1();
　　　　</script>
</body>
</html>
　　　　

 

转载于:https://www.cnblogs.com/herd/p/7250498.html

1小时做的echarts柱形图(不同类不同颜色、图例、自动隐藏单独显示)
weixin_44769957的博客
12-06 572
link
echarts-2.2.7柱状图隐藏y轴和x轴
行言Tang、
08-02 4450
var dataNum = ["100","200","300","400","500","600"];      var myChartfour = ec.init(document.getElementById('box-four'));                  myChartfour.setOption({    title : {        text: '',
echarts中设置横向柱状图及其每个柱子设置不同颜色
qq_39536826的博客
04-22 3679
效果如图 代码如下 var colors =["#73C0DE","#EE6666","#FAC858","#91CC75"]; var dataVal = [120, 200, 150, 80] var option = { xAxis: { type: 'value', // 设置X轴为值轴 splitLine: { show: false // 设置X轴方向的辅助线是否显示 }, }, yAxis: { type: 'category', /
echarts 柱形图如何让其中一个柱子的颜色跟其他柱子不同
红烧咸咸鱼
03-25 750
echarts 柱形图如何让其中一个柱子的颜色跟其他柱子不同
vue2中echarts横向柱状图一个柱子多个颜色渐变（渲染在页面上）
m0_49014420的博客
04-12 901
vue2中echarts横向柱状图一个柱子多个颜色渐变（渲染在页面上）
ECharts柱状图-基础柱状图.rar
11-23
柱状图是 ECharts 支持的一种基础图表类型，特别适用于展示各类统计和分析数据，如各行业的销售额、不同产品的用户数量等，能够清晰地以柱形的高度来表达数据之间的大小关系。 在 ECharts 中创建基础柱状图，通常会...
ECharts柱状图-柱图34.rar
12-18
5. 交互：ECharts柱状图支持多种交互行为，例如鼠标悬停显示提示框、图例切换显示、数据区域缩放、视觉映射等。 接下来，我们通过分析具体的代码实现来加深对ECharts柱状图的理解。在实现过程中，首先需要定义一个...
ECharts柱状图-柱图17.rar
12-14
在"series"中，还可以设置每个柱子的颜色、宽度、间隙等视觉效果，以及柱子的数据点等信息。此外，ECharts提供的工具箱功能，如数据视图、缩放、保存为图片等，都可以通过配置项来启用或禁用。 此外，ECharts还支持...
解决echarts 一条柱状图显示两个值,类似进度条的问题
10-15
在ECharts图表库中，创建一个柱状图来同时显示两个值，通常是为了展示数据的对比或者进度。这里的问题是需要让柱状图看起来像一个进度条，展示两个不同的数值，一个代表整体进度，另一个代表特定阶段的进度。通过...
ECharts柱状图绘制及点击事件实现
最新发布
07-03
在 ECharts 中，柱状图的呈现方式是通过一根根柱子来体现，每根柱子对应一个分类或时间间隔，柱子的高度则直观地表示该分类或时间间隔对应的数据值大小。我们可以通过配置 ECharts 中的 series 项来对柱状图进行详细...
echarts 点击事件（点击之后变颜色，适用于饼图，柱状图；以及饼图点击之后上移）
滚滚_1016的程序媛
08-31 1万+
先声明一个参数value,然后在点击之后再次调用该echart Mychart.on('click', function eConfig(param){ value=param.name; queryData(); }); 柱状图： ![这里写图片描述](https://img-blog.csdn.net...
echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）
m0_63099094的博客
11-07 937
需求要求的图： 【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】 浏览器打开：qq.cn.hn/FTf 免费领取 解决办法： 代码展示： function randomData() { return Math.round(Math.random()*1000); } option = { title: { text: ‘iphone销量’, subtext: ‘纯属虚构’, left: ‘center’ }, tooltip: { trigger: ‘item’
echarts中legend图例的要显示与隐藏的个数
qq_45094682的博客
03-08 3537
项目需求，产品经理说页面显示的内容太多了，要只显示legend中的一个内容，其它可以通过点击去显示，如图 局部代码 option = { title: { left: 'center', text: data.title == '平台汇总' ? '平台汇总' : '物流方式汇总' }, tooltip: { trigger: 'axis', axisPointer: {
echarts的legend图例的显示与隐藏（legend折线图加载完页面显示的个数）
热门推荐
一颗程序猿
04-19 3万+
项目需求：在一开始下加载图表的时候不显示legend的某几个字段，点击时候才显示数据 未设置时，全部显示： 设置后隐藏视频广告和搜索引擎数据： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> ...
介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客
qijingpei的博客
05-02 8401
介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客，怕遗忘就放到csdn上，  http://www.cnblogs.com/kang543418095/p/5964397.html 我仿照着他的教程，做出来是这个样子：
echarts柱状图：指定某根柱子颜色，并显示对应横坐标的xAxis的data文字（其他隐藏）
mingjuna2010的博客
11-15 1717
思路： **指定某根柱子颜色：**使用颜色数组，判断后指定颜色； **显示某根柱子对应横坐标的xAxis的data文字（其他隐藏）：**显示所有的xAxis的data文字，通过data的配置，可将需要隐藏的data的文字设置为透明色（transparent），若文字还是不显示，考虑是文字过长，可以设置xAxis.axisLabel.interval = 0 数据处理 // 设置所有的颜色都为'#00A1E9'，返回colors setAllColor(xData){ return new P
Echarts柱状图的每个柱子显示不同颜色问题
u012317188的专栏
05-19 2万+
在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的，如下图所示： 然而，很多时候我们为了使界面更加美观，通常会有使每个柱子颜色都不相同的需求。那么这时候，我们需要在itemStyle的normal状态下，首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量，则柱子会循环使用设定的颜色。 代码如下： itemS
echarts堆叠柱状图每个柱子上方不显示，在series.label设置false不生效
02-25
<think>嗯，用户问的是关于ECharts堆叠柱状图每个柱子上的标签不显示的问题，而且在series里设置label为false不生效。首先，我需要回忆一下ECharts的配置项结构。堆叠柱状图的标签设置通常在series的label属性里控制，但可能用户没有正确配置或者有其他覆盖的设置。 可能用户是在每个series里单独设置了label: { show: false }，但发现不起作用。这时候我应该检查是否有其他层级的配置覆盖了这个设置。比如，是否在全局的label配置或者主题里启用了标签显示？或者是否在tooltip或者其他组件里影响了显示？ 另外，堆叠柱状图的series可能会有多个，用户可能只修改了其中一个series的label设置，而其他series仍然显示标签。需要确认是否所有的series都正确设置了label.show为false。 还有一种可能是，用户可能在使用formatter函数时返回了空字符串，但show属性还是true，这样虽然内容为空，但可能仍占据空间或者有其他效果。不过用户提到直接设置false不生效，所以可能不是这个问题。 另外，ECharts的版本问题也可能导致配置项不生效，旧版本可能存在一些bug，建议用户检查版本是否最新，或者查阅对应版本的文档。 还有可能是视觉映射（visualMap）或者数据项（itemStyle）的某些设置覆盖了标签的显示，需要检查是否有其他配置干扰。 总结可能的原因： 1. 多个series未全部设置label.show为false。 2. 存在全局或默认的label配置覆盖了series的设置。 3. ECharts版本问题导致配置不生效。 4. 其他组件或配置干扰了标签的显示。 解决方法应该是确保所有相关的series都正确关闭label，并且检查是否有其他地方的配置覆盖。另外，提供一个示例代码来演示正确配置，确保用户能够复制并测试。</think>在 ECharts 中，如果堆叠柱状图（Stacked Bar Chart）的柱子顶部标签（Label）无法隐藏，且直接设置 `series.label.show: false` 不生效，可能是因为以下原因及解决方法： --- ### **常见原因 & 解决方案** #### 1. **堆叠模式下多个系列的干扰** 堆叠柱状图通常由多个 `series` 组成，每个 `series` 需要单独关闭标签。如果只修改了其中一个 `series` 的 `label` 配置，其他系列可能依然显示标签。 **解决代码：** ```javascript series: [ { type: 'bar', stack: 'total', // 堆叠组名需一致 label: { show: false }, // 每个系列单独关闭 data: [/* ... */] }, { type: 'bar', stack: 'total', label: { show: false }, // 每个系列单独关闭 data: [/* ... */] } ] ``` #### 2. **全局默认配置覆盖** 如果通过 `setOption` 多次合并配置，可能存在全局 `label` 配置被覆盖。建议使用 `notMerge: true` 或完整覆盖配置。 **解决代码：** ```javascript chart.setOption({ series: [/* 完整配置 */] }, { notMerge: true }); // 强制不合并旧配置 ``` #### 3. **使用 `emphasis` 状态干扰** 如果通过 `emphasis` 设置了悬停标签，可能误以为静态标签未关闭。需要同时关闭静态和悬停状态。 **解决代码：** ```javascript series: [{ type: 'bar', label: { show: false, // 关闭静态标签 emphasis: { show: false } // 关闭悬停标签 }, data: [/* ... */] }] ``` #### 4. **版本兼容性问题** 某些旧版本 ECharts 可能存在配置项解析问题，建议升级到最新版。 --- ### **完整示例代码** ```javascript option = { xAxis: { type: 'category', data: ['A', 'B', 'C'] }, yAxis: { type: 'value' }, series: [ { type: 'bar', stack: 'total', data: [120, 132, 101], label: { show: false, // 关闭静态标签 emphasis: { show: false } // 关闭悬停标签 } }, { type: 'bar', stack: 'total', data: [220, 182, 191], label: { show: false, emphasis: { show: false } } } ] }; ``` --- ### **其他调试建议** - 在 ECharts 官网的[在线编辑器](https://echarts.apache.org/examples/zh/editor.html)中快速验证配置。 - 检查浏览器控制台是否有报错（如配置项拼写错误）。 - 使用 `console.log(option)` 输出最终配置，确认 `label.show` 值是否正确。 如果问题仍未解决，可以提供更多代码片段或截图进一步分析！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值