Echarts 设置柱状图颜色渐变以及柱状图粗细（补充：其他样式，比如横向柱状图，折线区域颜色渐变，x，y轴文字颜色，轴颜色，分割线颜色等）

最新推荐文章于 2024-03-19 14:24:44 发布
最新推荐文章于 2024-03-19 14:24:44 发布
阅读量5.3k 收藏 30
点赞数 7
分类专栏： Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42540989/article/details/96976541
版权

1、横向柱状图 

    series: [{
            type: 'bar',
            barCategoryGap:'88%',
            barWidth:13,
            itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
                   0, 0, 1, 0,
                   [
                       {offset: 0, color: '#58F3E1'},
                       {offset: 1, color: '#4EAACC'}
                   ]
               )
            },
            label:{
              show:true,          //数据是否显示
              position:'right',   //数据显示位置，可设置right，top等
              color:'#fff'
            }

          },
      }]

barWidth：柱状图大小。

barGap: '-50%', 柱图间距。

0,0,1,0,    表示从左向右变化。0,0,0,1,   表示从右向左变化。

offset: 0, color: '#58F3E1'        0% 处的颜色

offset: 1, color: '#58F3E1'        100% 处的颜色

2、横向柱状图 ，并显示对应数据。

    var option = {
      grid: {
        left: '1%',
        right: '15%',
        bottom: '3%',
        containLabel: true
    },
      xAxis:{
              type : 'value',
              name:'单位:个',
              axisLine: {
                  show: true,    //是否显示
                  lineStyle: {
                      color: '#58F3E1',   //x轴颜色
                  } 
              },
              splitLine: {
                  show: true,         //x轴切割线是否显示
                  lineStyle: {
                     color: '#58F3E1'    //x轴切割线颜色
                 }
              },
              axisTick:{       //x轴刻度线
                   show:false
              },
              axisLabel: {
               show: true,          
               textStyle: {
                 color:'#fff'        
               }
             },
          },
          yAxis: {
              type: 'category',
              name:'月',
              data : ['10', '11', '12', '1', '2', '3'],
              // max:6,
              nameTextStyle:{
                color:'#fff',
                fontSize:10
                // padding: [-5,30,5,0]
              },
              splitNumber:4,
              axisLabel: {
                show: true,         
                interval: 0,
                textStyle:{
                  color:'#fff'        
                }

              },
              axisTick:{       //y轴刻度线
                   show:false
              },
              axisLine: {
                show: true,      //是否显示
                lineStyle: { 
                    color: '#58F3E1'     //y轴颜色   
                }
              },
          },
      series: [{
            data:[40, 85, 55, 28, 62, 44],
            type: 'bar',
            barCategoryGap:'88%',
            barWidth:13,       //柱状的大小
            label:{
              normal:{
                show:true,
                position:'right'   
              }
            },
            itemStyle: {
              normal: {
                 color: new echarts.graphic.LinearGradient(
                     0, 0, 1, 0,
                     [
                         {offset: 0, color: '#58F3E1'},     //柱状图从左向右颜色渐变
                         {offset: 1, color: '#4EAACC'}
                     ]
                 ),
                 label : {
                      textStyle : {
                         fontSize : '9',    //柱状上的显示的文字
                          color:'#fff'
                     }
                 }
              },
          },
      }]
  };

3、柱状图设置圆角

     barBorderRadius:[10, 10, 10, 10]

4、柱状图顶部显示数据 （数据可以加%）

在series中：

 label : {   
     show:true,              //是否显示数据
     position:"top",         //显示位置，例如：柱状图顶部
     formatter:'{c}%',       //数据可显示为%，例如：30%
     textStyle:{
       color:'#fff',
       fontSize:7
   } },

5、折线区域颜色渐变

    var option = {
         xAxis: {
             type: 'category',
             boundaryGap: false,         //false 代表从0刻度开始。true代表离0刻度有一段距离
             data: ['10', '11', '12', '1', '2', '3'],
             name:'月',
             nameTextStyle:{
               color:'#fff'
             },
             axisLine: {
                 show: true,
                 lineStyle: {
                     color: '#58f3e1',
                 }
             },
             axisTick:{       //x轴刻度线
                  show:false
             },
             axisLabel: {
              show: true,
              textStyle: {
                color:'#fff'
              }
            },
       },
       yAxis: {
           type: 'value',
           name:'次',
           nameTextStyle:{
             color:'#fff',
             fontSize:10,
             padding: [-5,30,5,0]
           },
           splitNumber:6,
           axisLabel: {
             show: true,
             interval: 'auto'
           },
           axisLine: {
             show: true,
             lineStyle: {
                 color: '#58f3e1'
             }
           },
           axisTick:{       //y轴刻度线
                show:false
           },
           splitLine: {
             show: false,
             lineStyle: {
                 color: '#58F3E1'
             }
           },
           axisLabel: {
            show: true,
            textStyle: {
              color:'#fff'
            }
          },
       },
       series: [{
             symbol: "none",
             smooth: true,   //平滑曲线
             data: [8, 10, 3, 7, 6, 2],
             type: 'line',
             areaStyle: {normal: {}},        //区域样式
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(     //折线区域  颜色渐变
                          0, 0, 0, 1,
                      [
                          {offset: 0, color: '#D4D20B'},

                          {offset: 0.5, color: '#4BD5CF'},

                          {offset: 1, color: '#4BD5CF'}
                      ]

                  )
                  //  color: "#58f3e1",
                  //  width:6,
                  //  height:6,
                  //  lineStyle: {
                  //      color: "#58f3e1"
                  //  }

               }
           },
       }]
  };

6、去掉折线上面的小圆点，折线颜色，折点处显示数据

series: [{
     symbol: "none",    //折点显示设置为true，隐藏设置为none
     itemStyle:{
         normal:{
            lineStyle:{ 
                 color:'#B891FF' //改变折线颜色
             };
            label:{   
                 show:true,     //折点处显示数据   
                 textStyle:{
                    color:'#fff',    //字体颜色
                    fontSize:9       //字体大小
               }   
       }
      }  
     }
}]

7、设置折点形状，大小，颜色，设置折点的填充颜色

series: [
    {
      name: "种类",
      type: "line",  //折线
      symbol: 'circle',//折线点设置为实心点
      symbolSize: 4,   //折线点的大小
      itemStyle: {
         normal: {
           color: "#58F3E1",//折线点的颜色
           lineStyle: {
           color: "#58F3E1"//折线的颜色
          }
        }
     },
]

//填充折点颜色
   series[
     {
      symbol: 'circle',
      itemStyle: {
        normal: {
            color: "#fff",
            borderColor: '#58F3E1',
            borderWidth: 2,
        }
      },    
   }]

color:也是圆的填充色，

borderColor：圆的border

borderWidth: 圆border的宽度

8、legend 动态控制xAxis 数据

var problemData = ['问题1','问题2','问题3','问题4','问题5','问题6','问题7','问题8','问题9','问题10'];
var timeData = ["2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月",];
var chartThree = document.getElementById("problemTrendChart");
var myChartThree = echarts.init(chartThree);
myChartThree.setOption({
   legend: {
    icon:"none",    
    data:['时间', '种类'],
    selectedMode: "single", // 单选
    selected: {
      时间: true,
      种类: false
  },
    right:"3%",
    itemWidth: 10,  // 设置宽度
    itemHeight: 32, // 设置高度
    itemGap: 8, // 设置间距
    textStyle: {
      fontSize: 7,
      color: '#fff'
  }
    },
   xAxis: {
     type: 'category',
     boundaryGap: false,
     data:problemData,
     name:'月',
     nameTextStyle:{
       color:'#fff',
       fontSize:7
     },
     axisLine: {
         show: true,
         lineStyle: {
             color: '#3698D1',
         }
     },
     axisTick:{       //x轴刻度线
          show:false
     },
     axisLabel: {
      show: true,
      textStyle: {
        color:'#fff'
      }
    },
  },
    yAxis: {
       type: 'value',
       name:'单位:个',
       gridIndex: 0,
       min: 0,
       max: 150,
       splitNumber: 4,
       nameTextStyle:{
        color:'#fff',
        fontSize:7
        // padding: [-5,30,5,0]
      },
       axisLabel: {
         show: true,
         interval: 'auto',
        //  formatter: '{value} %'
       },
       axisLine: {
         show: true,
         lineStyle: {
             color: '#3698D1'
         }
       },
       axisTick:{       //y轴刻度线
            show:true
       },
       splitLine: {
         show: false,
         lineStyle: {
             color: '#58F3E1'
         }
       },
       axisLabel: {
        show: true,
        textStyle: {
          color:'#fff'
        }
      },
   },
       series: [
             {
               name:"种类",
               symbol: "none",    //折点
               smooth:true,
               data: ["40","75","100","115","20","40","100","20","100","115"],
               type: 'line',
               areaStyle: {normal: {}},
               itemStyle: {
                 normal: {
                   color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                        [
                            {offset: 0, color: '#EE7FFF'},

                            {offset: 0.8, color: '#2C76B0'},

                            {offset: 1, color: '#2C76B0'}
                        ]

                    ),
                    label : {
                      show:true,
                      textStyle:{
                        color:'#fff',
                        fontSize:9
                      }
                    },
                    lineStyle:{ 
                        color:'#B891FF' //改变折线颜色
                  } 
                 }
             },
         },
          {
             name:"时间",
             symbol: "none",    //折点
             smooth:true,
             data: ["50","80","60","115","40","80","100","20","100","115"],
             type: 'line',
             areaStyle: {normal: {}},
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                      [
                          {offset: 0, color: '#0EADA5'},

                          {offset: 0.8, color: '#2C76B0'},

                          {offset: 1, color: '#2C76B0'}
                      ]

                  ),
                  label : {
                    show:true,
                    textStyle:{
                      color:'#fff',
                      fontSize:9
                    }
                  },
                  lineStyle:{ 
                      color:'#B891FF' //改变折线颜色
                } 
               }
           },
       },
    ]
});
myChartThree.on('legendselectchanged', function(obj) {
    var name=obj.name;
    console.log("2222222222222")
    var option=myChartThree.getOption();
    if(name=='种类'){
        option.xAxis[0].data=problemData;
    }else if(name=='时间'){
        option.xAxis[0].data=timeData;
    }
    myChartThree.setOption(option,true);
});

上边的代码icon类型为none，因为此项目中不需要显示icon。

icon: "circle"       类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

right: "3%"          设置icon的位置

itemWidth: 10     设置宽度

itemHeight: 10    设置高度

itemGap: 40        设置间距

个人原因没有做成gif图，大家可自行参考。

一只程序猿小白
关注
  • 7
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
Vue 中echarts的数据参数使用、X轴Y轴
林中明月间丶
04-13 1万+
https://www.cnblogs.com/tugenhua0707/p/9380378.html https://blog.csdn.net/qq_28691187/article/details/112462859 https://blog.csdn.net/u012612399/article/details/53838326eCharts——柱状图中的柱体颜色渐变 https://blog.csdn.net/qq_36538012/article/details/115413879E...
echarts的Y轴的分割线以及线条样式
weixin_43258184的博客
04-06 8490
yAxis: { splitNumber: 5, splitLine: { show: true, lineStyle: { type: 'dotted', color: 'rgba(255, 255, 255,0.3)' } } } splitNumber代表Y轴分割的段数，splitLine设置分割线显示不显示。show：true是显示分割线。 lineStyle设置分割线的样式，type:'dotted’设置的
echarts柱状图渐变颜色
最新发布
m0_69335214的博客
03-19 246
【代码】echarts柱状图渐变颜色。
修改echarts 3D柱状图柱子大小（粗细）的方法
kswkly的博客
10-29 4406
修改Echarts 3D柱状图柱子大小（粗细）的方法一、修改方法 一、修改方法 以官网上的一个3d柱状图为例，原图如下： 我们在series配置项下加上一个barSize属性，例如： barSize:3, 得到的图如下： 柱子明显细了很多，不知道为什么官方文档上并没有，真让人摸不着头脑 ...
echarts---柱形图轴线条颜色、辅助线、X轴底部文字、柱状粗细和颜色
qq_44903607的博客
09-22 6813
效果如下： 主要代码： option = { grid: { left: "5%", //左边距 right: "5%", //走边距 top: "5%", //上边距 bottom: "5%", //下边距 containLabel: true, }, xAxis: { type: "category", // spl
echarts折线图美化-曲线区域颜色渐变
热门推荐
sx_lidan的博客
08-10 4万+
最近做的可视化图表有这样的需求：曲线区域颜色渐变， option = { tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' ...
在 Echerts 中设置柱状图的粗细
m0_64564920的博客
04-24 1万+
在 Echerts 中设置柱状图的粗细 需要改变 Echarts 柱状图的柱子的粗细。类似这样的： 那需要加哪个配置？ option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70
echarts 如何设置柱子的最小宽度和最大宽度
qq_61950936的博客
08-08 1万+
在上面的示例中，我们通过动态计算 barWidth 的值，确保它在最小粗细和最大粗细之间。你可以根据需要调整 maxBarWidth 和 minBarWidth 的值来控制柱子的粗细范围。2.要设置柱子的最大宽度，可以使用柱状图（bar）的属性barMaxWidth。该属性可以接受一个数值，表示柱子的最大宽度。1.在 Echarts 中，可以通过动态计算 barWidth 的数值来实现最小粗细和最大粗细的效果。
【echarts】横向柱状图（条形图）渐变色，手把手教学
一位前行者的博客
05-06 5933
通常的柱状图 渐变色非的简单 series: [ { type: 'bar', data: this.rank.num, barWidth: '10%', itemStyle: { color: { type: 'linear', x: 0, y: 0,
eCharts——柱状图中的柱体颜色渐变
qq_39354957的博客
09-08 1万+
柱状图中的柱体颜色渐变详细说明 先来看一下柱体颜色渐变的效果 以下是实现渐变效果的代码： series: [{ data: [18, 16, 8, 10, 5, 24], type: 'bar', showBackground: false, barWidth: '16px', //柱体宽度 itemStyle: {
Echarts 柱状图渐变色设置
huifeidexiang87的博客
09-08 1万+
渐变色的设置是通过在series属性中的itemStyle属性设置的。其中主要是echarts.graphic.LinearGradient方法。 series: [ { type: 'bar', barWidth: 10, stack: 'total', data: this.seriesData, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0..
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
09-19
今天小编就为大家分享一篇python绘制双Y轴折线图以及单Y轴双变量柱状图的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
渐变柱状图代码.rar_matlab柱状图_matlab渐变图_柱状图_渐变色_渐变色 matlab
07-13
matlab编程，生成渐变色的柱状图，可增强文章的可读性
极致呈现系列之：Echarts柱状图的创意设计与数字美学的完美平衡
九仞山的专栏
06-14 1316
详细介绍了Echarts中柱状图的使用技巧，从简单的柱状图开始到柱状图完美的极致呈现。
Echarts柱状图
~~
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
echarts给柱状图某个柱子设置颜色
weixin_51609337的博客
05-26 1万+
1.引用官网的例子，运行后是默认的颜色。 2.给柱状图整体设置颜色 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{
echarts图表渐变色 + 每个柱子不同颜色设置
baidu_36095053的博客
08-04 1万+
echarts柱状图，默认所有柱子都是同一个颜色，显示效果差强人意，本文介绍如果修改成为每个柱子添加不同的颜色，以及如何添加渐变色，丰富图表的显示鲜果。先看效果：每个柱子颜色不同每个柱子都有自己的渐变色。
echarts设置柱状图颜色渐变
10-14
可以使用 echarts 中的 visualMap 组件来设置柱状图颜色渐变。具体步骤如下： 1. 在 option 中添加 visualMap 组件： ``` option = { ... visualMap: { type: 'continuous', min: 0, max: 100, color: ['#87cefa', '#ff7f50', '#32cd32', '#da70d6'], calculable: true, seriesIndex: [0], orient: 'horizontal', left: 'center', bottom: 10 }, ... } ``` 2. 在 series 中设置颜色为 visualMap： ``` series: [{ name: '柱状图', type: 'bar', data: [20, 50, 80, 30, 70], itemStyle: { normal: { color: function(params) { return colorList[params.dataIndex]; } } } }] ``` 其中，colorList 是一个数组，用来存储每个柱子的颜色值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值