Echarts柱状图的宽度设置

图中柱图只需要设置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, // 显示延迟，添加显示延迟可以避免频繁切换，单位msaxisPointer : {            // 坐标轴指示器，坐标轴触发有效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柱状图的宽度设置相关推荐

echarts柱状图的背景色设置
echarts柱状图的背景色设置方法,官方推荐的例子中是又添加一组最大值来当背景(不建议),设置backgroundStyle即可(从 v4.7.0 开始支持): series: { name: '违 ...
【数据处理】Python，matplotlib 如何画柱状图？如何画各种类型的柱状图？柱子宽度设置；设置X轴刻度用label显示；设置柱子距离x轴的高度；设置柱体颜色；设置柱体描边；并列、多条柱状图
Base python matlibplot库-- 一.主要参数介绍: bar(left, height, width=0.8, bottom=None, **kwargs) left为和分类数量一致 ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
echarts 柱状图设置边框_series组件
使用ECharts柱状图标线 ECharts 使用 markLine 来设置柱状图标线,本文是对柱状图标线属性的介绍. series[i]-bar.markLine.silent boolean [ ...
echarts柱状图上设置数字
echarts 柱状图上显示数字代 let option = {dataset: {source: data.reverse()},grid: {containLabel: true},xAxis: ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
echarts柱状图
echarts柱状图图表实例 option = {xAxis: {name: '横坐标',type: 'category', // 设置为类目轴data: ['Mon', 'Tue', 'Wed', ...

Echarts柱状图的宽度设置

Echarts柱状图的宽度设置相关推荐

最新文章

热门文章