精华内容
下载资源
问答
  • echarts柱状图柱子颜色
    万次阅读
    2022-04-23 19:02:23

    如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。代码如下:

    option = {
        color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],
        ...
    }

    更多相关内容
  • Echarts 柱状图设置颜色

    万次阅读 2022-05-03 12:54:13
    echarts柱状图设置不同的颜色

    在echarts柱状图中,如果我们想给不同的图例设置不同的颜色的话,可以这样设置:

    option2: {
                xAxis: {
                    type: 'category',
                    data: [],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(111, 162, 135, 0.2)'
                        },
                        itemStyle: {
                            normal: {
                                //这里是颜色
                                color: function(params) {
                                    //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
                                    var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
    
                ]
            },
    

    这样的效果图就出来了。如下图:
    在这里插入图片描述
    如果你的颜色比较多,或者说希望自动循环已经有的颜色,想让它循环显示,可以添加一个判断:

    if (params.dataIndex >= colorList.length) {
    	    index = params.dataIndex - colorList.length;
    	}
    

    当然:也有更简便的方法,用取余可以实现快捷的循环

    color:function(params){ 
        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; 
        return colorList[params.dataIndex % colorList.length];
     }
    

    这是把第一个循环改进的方法,大家可以借鉴:

    itemStyle: {
     normal: {
          //这里是重点
          color: function(params) {
              //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
              var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
              var index;
              //给大于颜色数量的柱体添加循环颜色的判断
              if (params.dataIndex >= colorList.length) {
                 index = params.dataIndex - colorList.length;
                 return colorList[index];
              }
              return colorList[params.dataIndex];
          }
        }
     }
    

    这也是一种改进:

    itemStyle: {
     normal: {
          //这里是循环开始的地方
          color: function(params) {
    		  var colorList = ['#C6D0D3', '#92CDBB', '#EDD977', '#E89F6A']
    		  if (params.dataIndex >= colorList.length) {
    				params.dataIndex = params.dataIndex - colorList.length
    			}
    		  return colorList[params.dataIndex]
    		},
        }
     }
    

    好了,今天的分享就到这里,后续我知道了别的方法还会继续分享的,希望大家继续关注我!!!

    展开全文
  • 项目需求柱子颜色不一样,有几种方法 1.比较麻烦就是在data中单独设置颜色 2,第二种,

    项目需求柱子的颜色不一样,有几种方法

    1.比较麻烦就是在data中单独设置颜色

    2,第二种,给一个color 的数组,循环调用数组里面的颜色

    网上找的直接给个colorList  return colorList[params.dataIndex],没有作用,因此利用取余数的方式循环调用colorList里面的颜色;

    3.还有另一种,直接随机去的一个十六进制的颜色来设置柱子的颜色

    color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
    展开全文
  • 今天遇到的问题是柱状图一个轴有多个柱子,需要其中的一个柱子长度保持在同一个地方,所以需要调整柱子的高度,我就去查了百度,但是没有找到。后来查文档发现也没有找到这个直接设置最大高度的属性,那就只能曲线...

    今天遇到的问题是柱状图一个轴有多个柱子,需要其中的一个柱子长度保持在同一个地方,所以需要调整柱子的高度,我就去查了百度,但是没有找到。后来查文档发现也没有找到这个直接设置最大高度的属性,那就只能曲线救国了。

    效果图:

    上面的大的数字是一根柱子,我给他全部控制在0的位置,然后只显示数字就行了,这就是我的需求
    在这里插入图片描述

    方法:

    这里我是用的多轴的玩法,直接把两根柱子分轴对应不同的X轴,然后我再把其中我需要控制长度的柱子的X轴设置max也就是最大刻度是多少。这样就会根据刻度来自适应柱子长短,那我需要他在0的位置,我直接max:2000000000,直接写个20亿,那肯定不会再有这么大的数字了,我这就算是以后图表膨胀到几百万,在20亿面前,他仍然还是在0的附件。

        barGraph(val) {
          console.log(val, "--");
          //初始化图标
          var myCharts = this.$echarts.init(this.$refs["echart-right"]);
          //Y轴的数据,和数据值位置一一对应
          var cate = val.gtcodeArray;
          //数据值,顺序和Y轴的名字一一对应totalCount
          var option = {
            title: {
              text: this.rightname + "合格率排行榜top10",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              // trigger: "item",
              // formatter: function (params) {
              //   return `百分比:${params.data.value}<br/>数量:${params.data.totalCount}`;
              // },
            },
            //图表位置
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            //X轴
            xAxis: [
              {
                type: "value",
                max:2000000000,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                //不显示X轴刻度线和数字
                splitLine: { show: false },
                axisLabel: { show: false },
                boundaryGap: [0, 0.001],
              },
              {
                type: "value",
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                //不显示X轴刻度线和数字
                splitLine: { show: false },
                axisLabel: { show: false },
                boundaryGap: [0, 0.001],
              },
            ],
            yAxis: {
              type: "category",
              data: cate,
              //升序
              inverse: true,
              splitLine: { show: false },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              //key和图间距
              offset: 10,
              //动画部分
              animationDuration: 300,
              animationDurationUpdate: 300,
              //key文字大小
              nameTextStyle: {
                fontSize: 5,
              },
            },
            series: [
              {
                //柱状图自动排序,排序自动让Y轴名字跟着数据动
                name: "数量",
                type: "bar",
                data: val.totalCountArray,
                barWidth: 12,
                smooth: true,
                valueAnimation: true,
                //Y轴数字显示部分
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    valueAnimation: true,
                    offset: [5, -2],
                    textStyle: {
                      color: "#333",
                      fontSize: 13,
                    },
                  },
                },
                itemStyle: {
                  emphasis: {
                    barBorderRadius: 7,
                  },
                  //颜色样式部分
                  normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#fff" },
                      { offset: 1, color: "#fff" },
                    ]),
                  },
                },
              },
              {
                //柱状图自动排序,排序自动让Y轴名字跟着数据动
                realtimeSort: true,
                xAxisIndex: 1,
                name: "百分比",
                type: "bar",
                data: val.percentageArray,
                barWidth: 12,
                smooth: true,
                valueAnimation: true,
                //Y轴数字显示部分
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    valueAnimation: true,
                    offset: [5, -2],
                    textStyle: {
                      color: "#333",
                      fontSize: 13,
                    },
                  },
                },
                itemStyle: {
                  emphasis: {
                    barBorderRadius: 7,
                  },
                  //颜色样式部分
                  normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#3977E6" },
                      { offset: 1, color: "#37BBF8" },
                    ]),
                  },
                },
              },
    
            ],
            //动画部分
    
            animationDuration: 0,
            animationDurationUpdate: 3000,
            animationEasing: "linear",
            animationEasingUpdate: "linear",
          };
          myCharts.setOption(option, true);
          //图表大小变动从新渲染,动态自适应
          window.addEventListener("resize", function () {
            myCharts.resize();
          });
        },
    
    展开全文
  • 可以使得柱状图的顶端是倾斜的,当如如果有其他需要,也可以通过这种组合的方式进行自定义样式效果,方便又快捷
  • 中见竖直的点划线为,markLine ,当markLike超出设定的数值时,颜色变成红色。代码如下:(复制代码,即可查看效果)
  • echarts中的柱状图 https://echarts.apache.org/examples/zh/editor.html?c=bar-simple 要每个柱子颜色不一样,当柱子数>颜色组数时循环调用颜色组数 效果图: option = { xAxis: { type: 'category...
  • Echarts柱状图柱子上“画线”

    千次阅读 2021-11-18 15:08:23
    需要在柱状图上实现“画线”,作为其它数据的标识,图例 代码实现思路:“画线部分”由两部分组成,一部分透明柱子加线的部分 let e5Data = { lastVal:[10,20,30,40,50], stationName:['name1','name2','name3',...
  • echarts 柱状图颜色及渐变色设置

    万次阅读 2021-07-30 18:28:59
    如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。代码如下 option = { color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'], ... } 那么如何给柱状图添加渐变色呢? 0,0,1,0分别...
  • 主要就是这个: series: [ { name: '调用次数', type: 'bar', barWidth: '30%', barMaxWidth: 20, // data: [122, 250, 399, 410, 505, 610, 707...// 给出颜色组 return colorList[params.dataIndex] } } } } ] 如
  • echarts柱状图实现点击柱状图,柱子颜色改变,再次点击恢复原来样式
  • echarts柱状图颜色渐变样式

    千次阅读 2020-08-29 17:18:03
    } } } } ] 单个柱状图渐变颜色修改 import echarts from 'echarts' series: [ { name: '数量', type: 'bar', data: [], itemStyle: { normal: { // 每根柱子颜色设置 color: function(params) { const colorList = ...
  • echarts柱状图某个柱子设置颜色

    千次阅读 2021-05-25 16:06:03
    2.给柱状图整体设置颜色 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫",...
  • 近日做项目时使用到了柱状图的渐变需求,在此记录下来。LinearGradient(0,0,0,1)为1的话代表的是四个方向。代码实现将series中的itemstyle配置属性换成以下代码。这里要的效果是从下到上渐变,所以将第四个参数...
  • 柱状图的柱体颜色渐变,柱体上部数字显示
  • Echars柱状图 柱子颜色根据值变化
  • echarts柱状图自定义颜色

    千次阅读 2021-10-12 14:45:45
    xAxis : [ { type : 'category', // name:'额度', //这是设置的false,就不不显示下方的x轴,默认是true的 show: false, //这里呢,就是每个柱...柱子太宽不美观~ barWidth:70, data: [28,15,9,4,7,8,23,11,17] } ]```
  • 柱状图顶部添加文字核心操作是在series中添加itemStyle series: [ { type: 'bar',//定义柱状图 data: income, // barWidth:10,//柱子宽度 // barGap:1,//柱子间距 itemStyle: {//柱状图上方显示数值 normal: ...
  • 前言玩转ECharts系列,主要...分享计划《如何实现顶端装饰》《如何实现动态的label颜色》《如何实现自定义的icon》《如何实现环形渐变》《如何实现1/2圆的玫瑰》导读阅读完此文,你会了解基于ECharts:1、如何实现...
  • echarts 柱状图 改变颜色

    千次阅读 2021-04-02 09:49:24
  • echarts 柱状图颜色和显示设置

    千次阅读 2020-12-29 10:44:38
    }, //以下为是否显示,显示位置和显示格式的设置了 label: { show:true, position:'top',//formatter: '{c}' formatter: '{b}\n{c}'} } }, //设置柱的宽度,要是数据太少,柱子太宽不美观~ barWidth:70, data: [28,...
  • echarts柱状图颜色问题

    2021-11-29 14:27:26
    柱状图修改颜色不起作用,在series的itemStyle属性下的color修改颜色 new echarts 改为 new this.$echarts即可 new echarts new this.$echarts series: [ { type: 'bar', max: 50,//柱状图最大值 interval
  • ECharts,对柱状图进行一些自定义: 1.柱子颜色自定义 2.柱子上方显示文本 3.柱子上方显示图标 具体代码如下: <template> <div> <div id="main" style="width: 1000px;height:600px;">...
  • 效果如下: option = { title: { text: '某地区降水量', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ...
  • echarts柱状图颜色渐变和柱形效果实现
  • ECharts动态改变柱状图柱子上方显示文字颜色
  • var option ={ title: {... itemStyle : { normal : { color:'#00FF00', //圈圈的颜色 lineStyle:{ color:'#00FF00'//线的颜色 } } }, data:[220, 132, 601, 314, 890, 230, 510] } ] }; echart.setOption(option); });
  • option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, { ... item

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,499
精华内容 599
关键字:

echarts柱状图柱子颜色