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 被设为 '20%',这意味着每个类目(比如 A)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 barCategoryGap 是 '40%',意味着柱条每侧空余的距离,相对于柱条宽度的百分比。 通常而言,设置 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);效果如下图所示: echarts柱状图显示数值 itemStyle属性柱状图上方显示数值 ECharts // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function(ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data: ['销量'] }, xAxis: [{ type: 'category', data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }], yAxis: [{ type: 'value' }], series: [{ "name": "销量", "type": "bar", "data": [5, 20, 40, 10, 10, 20], itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } }, }] }; // 为echarts对象加载数据 myChart.setOption(option); } );显示的效果如下 2.其他方式显示数值顶部显示数值,中部显示百分比。效果如图: 代码如下: // 数值部分 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' }, } }, }] };
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |