echarts柱状图宽度、颜色设置、显示数值实操教程 |
您所在的位置：网站首页 › 柱状图每个柱下面的文字如何修改 › echarts柱状图宽度、颜色设置、显示数值实操教程 |
echarts柱状图宽度、颜色设置、显示数值实操教程
|
echarts基本柱状图
柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。 设置柱状图的方式，是将 series 的 type 设为 'bar'。 最简单的柱状图最简单的柱状图可以这样设置： option = { xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: {}, series: [ { type: 'bar', data: [23, 24, 18, 25, 27, 28, 25] } ] };
在这个例子中，横坐标是类目型的，因此需要在 xAxis 中指定对应的值；而纵坐标是数值型的，可以根据 series 中的 data，自动生成对应的坐标范围。 多系列的柱状图我们可以用一个系列表示一组相关的数据，如果需要实现多系列的柱状图，只需要在 series 多添加一项就可以了 option = { xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: {}, series: [ { type: 'bar', data: [23, 24, 18, 25, 27, 28, 25] }, { type: 'bar', data: [26, 24, 18, 22, 23, 20, 27] } ] };
柱状图样式设置
柱条样式
柱条的样式可以通过 series.itemStyle 设置，包括： 柱条的颜色（color）； 柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）； 柱条圆角的半径（barBorderRadius）； 柱条透明度（opacity）； 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。 option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [ 10, 22, 28, { value: 43, // 设置单个柱子的样式 itemStyle: { color: '#91cc75', shadowColor: '#91cc75', borderType: 'dashed', opacity: 0.5 } }, 49 ], itemStyle: { barBorderRadius: 5, borderWidth: 1, borderType: 'solid', borderColor: '#73c0de', shadowColor: '#5470c6', shadowBlur: 3 } } ] };
在这个例子中，我们通过设置柱状图对应 series 的itemStyle，设置了柱条的样式。完整的配置项及其用法请参见配置项手册 series.itemStyle。 柱条宽度和高度柱条宽度可以通过 barWidth 设置。比如在下面的例子中，将 barWidth 设为 '20%'，表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。 option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [10, 22, 28, 43, 49], barWidth: '20%' } ] };
另外，还可以设置 barMaxWidth 限制柱条的最大宽度。对于一些特别小的数据，我们也可以为柱条指定最小高度 barMinHeight，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。 柱条间距柱条间距分为两种，一种是不同系列在同一类目下的距离 barGap，另一种是类目与类目的距离 barCategoryGap。 option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [23, 24, 18, 25, 18], barGap: '20%', barCategoryGap: '40%' }, { type: 'bar', data: [12, 14, 9, 9, 11] } ] };
通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。如果有需要的话，可以设置 barMaxWidth 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。 在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。 为柱条添加背景色有时，我们希望能够为柱条添加背景色。从 echarts 4.7.0 版本开始，这一功能可以简单地用 showBackground 开启，并且可以通过 backgroundStyle 配置。 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } } ] };
echarts柱状图宽度设置实例
实例1：echarts柱状图固定宽度设置、柱状之间的间距
效果预览：
实现方式：在series设置barWidth（宽度设置）和barGap（间距设置） barWidth：柱条的宽度；默认自适应，也可设置成相对于类目宽度的百分比及固定值。 barGap：不同系列的柱间距离；默认当前柱条宽度的30%；也可设置成固定值及百分比；下方例子中，设置为-50%，呈现效果如上图所示，柱图之间一半被重叠 上图完整代码： var BarBOX1 = echarts.init(document.getElementById("test")); option = { title : { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'蒸发量', type:'bar', barWidth : 30,//柱图宽度 barGap:'-50%',//柱图间距 data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'降水量', type:'bar', barWidth : 30,//柱图宽度 data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], markPoint : { data : [ {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183}, {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] }; BarBOX1.setOption(option); 实例2：设置柱状图粗细大小主要属性： //设置柱状图大小 barWidth: 20,
demo: 柱状图大小 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ title: { text: '柱状图' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', //设置柱状图大小 barWidth: 20, //设置柱状图渐变颜色 itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#1268f3" // 0% 处的颜色 }, { offset: 0.6, color: "#08a4fa" // 60% 处的颜色 }, { offset: 1, color: "#01ccfe" // 100% 处的颜色 }], false) } }, data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"] }] }); 实例3.柱状图柱图宽度设置实现效果对比：
图中柱图只需要设置series中的坐标系属性barWidth就可以， 这种图柱状图，折叠柱状图都适应 eg： /** * 堆积柱状图 * @param xaxisdata x轴：标签（数组） * @param serieszs 柱状图图数据（数组） * @param seriesyx 柱状图图数据（数组） */ function drawDJZZT(xaxisdata,serieszs,seriesyx){ var myChart = echarts.init(document.getElementById('main1')); myChart.setOption({ title : { text : "" }, tooltip : { trigger : 'axis', showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['做市', '协议'] }, xAxis : [{ type : 'category', data : xaxisdata, axisLabel:{ textStyle:{ color:"#222" } } }], yAxis : [{ type : 'value' }], series : [ { name:'做市', type:'bar', stack: '总量', /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/ data:serieszs }, { name:'协议', type:'bar', stack: '总量', barWidth : 30,//柱图宽度 /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/ data:seriesyx } ] }); }调用方式 //console.log(data); var xaxisdata = [];//月份 var serieszs = []; var seriesyx = []; var year = new Date().format("yyyy"); for(var i=(data.list.length-1);i>=0;i--){ var monthDate = data.list[i].month_date; //if( year == monthDate.substring(0,4)){ //xaxisdata.push(monthDate.substring(4)+"月"); //}else{ xaxisdata.push(monthDate.substring(0,4)+"年"+monthDate.substring(4)+"月"); //} serieszs.push(data.list[i].zszrmygpsl); seriesyx.push(data.list[i].xyzrmygpsl); } drawDJZZT( xaxisdata, serieszs, seriesyx); echarts柱状图颜色设置实例 实例1效果如下：
代码如下： xAxis : [ { type : 'category', // name:'额度', //这是设置的false，就不不显示下方的x轴，默认是true的 show: false, //这里呢，就是每个柱的name了，根据实际情况下就好了，我就先写这三个 data : ['最多','平均','最少'], axisLabel: { //这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜 // rotate: 30, //这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了 interval :0 } } ], yAxis : [ { type : 'value', name:'数量', //下面的就很简单了，最小是多少，最大是多少，默认一次增加多少 min: 0, max: 30, interval: 6, //下面是显示格式化，一般来说还是用的上的 axisLabel: { formatter: '{value} 包' } } ], series : [ { name: '数量', type: 'bar', itemStyle: { normal: { //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了， color: function(params) { // build a color map as your need. var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] }, //以下为是否显示，显示位置和显示格式的设置了 label: { show: true, position: 'top', // formatter: '{c}' formatter: '{b}n{c}' } } }, //设置柱的宽度，要是数据太少，柱子太宽不美观~ barWidth:70, data: [28,15,9,4,7,8,23,11,17] } ] 实例2源代码如下： ECharts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '树懒课堂7月访问设备类型统计' }, xAxis: { data: ["苹果","小米","华为","其他"] }, yAxis: { splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线 }, series: [{ name: '手机品牌', type: 'bar', data: [19, 15, 40, 32], //设置柱子的宽度 barWidth : 30, //配置样式 }], //控制边距 grid: { left: '0%', right:'10%', containLabel: true, }, }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);效果如下图所示： 
itemStyle 我们可以通过itemStyle的子属性来设置： itemStyle的部分常用子属性及其功能如下： series-bar. itemStyle 图形样式。 series-bar.itemStyle. color = 自适应 柱条的颜色。 默认从全局调色盘 option.color 获取颜色 series-bar.itemStyle. borderColor = ‘#000’ 柱条的描边颜色。 series-bar.itemStyle. borderWidth 柱条的描边宽度，默认不描边。 series-bar.itemStyle. borderType = ‘solid’ 柱条的描边类型，默认为实线，支持 ‘dashed’, ‘dotted’。 series-bar.itemStyle. barBorderRadius 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如: barBorderRadius: 5, // 统一设置四个角的圆角大小 barBorderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下） series-bar.itemStyle. shadowBlur 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 示例： { shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 }series-bar.itemStyle. shadowColor 阴影颜色。支持的格式同color。 故我们可以通过修改series-bar.itemStyle. color这个属性来对柱子颜色进行设置。 修改完成后的代码如下： ECharts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '树懒课堂7月访问设备类型统计' }, xAxis: { data: ["苹果","小米","华为","其他"] }, yAxis: { splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线 }, series: [{ name: '手机品牌', type: 'bar', data: [19, 15, 40, 32], //设置柱子的宽度 barWidth : 30, //配置样式 itemStyle: { //通常情况下： normal:{ //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组 color: function (params){ var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)']; return colorList[params.dataIndex]; } }, //鼠标悬停时： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, }], //控制边距 grid: { left: '0%', right:'10%', containLabel: true, }, }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);效果如下图所示：
显示的效果如下
顶部显示数值，中部显示百分比。效果如图： 
代码如下： // 数值部分 const xAxisValue = ['3-26','3-28','3-29','4-3','4-8']; // x轴数值 const sleepTimeChart = { // 顶部数值 afterAsleepArr:[51,58,53,31,32], // 柱中百分比数值 afterAsleepPercent:[11,13,11,8,7] } // 配置部分 const option = { backgroundColor: 'rgba(255, 255, 255, 1)', grid: { x: 30, y: 10, x2: 30, y2: 35 }, xAxis: { type: 'category', // x轴数据 data: xAxisValue, axisLabel: { fontSize: 10, color:'#333', fontWeight:'bold', } }, yAxis: { type: 'value', axisLabel: { fontSize: 10, color:'#333', fontWeight:'bold', formatter: '{value}m' }, axisLine:{ show:true, }, }, series: [{ data: sleepTimeChart.afterAsleepArr, type: "bar", label: { show: true, formatter: (a)=>{ return sleepTimeChart.afterAsleepPercent[a.dataIndex]+'%' }, }, itemStyle:{ color:'#1b4993' }, markPoint: { symbolSize: 0, data: [{ coord: [0, sleepTimeChart.afterAsleepArr[0]] }, { coord: [1, sleepTimeChart.afterAsleepArr[1]] }, { coord: [2, sleepTimeChart.afterAsleepArr[2]] }, { coord: [3, sleepTimeChart.afterAsleepArr[3]] }, { coord: [4, sleepTimeChart.afterAsleepArr[4]] }, { coord: [5, sleepTimeChart.afterAsleepArr[5]] }, { coord: [6, sleepTimeChart.afterAsleepArr[6]] }], label: { fontSize:10, fontWeight:"bold", show: true, position: 'top', formatter: (a)=>{ return sleepTimeChart.afterAsleepArr[a.dataIndex]+'m' }, } }, }] };
|
在这个例子中，barGap 被设为 '20%'，这意味着每个类目（比如 A）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 barCategoryGap 是 '40%'，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。
【本文地址】
今日新闻 |
推荐新闻 |