echarts图表——主题河流图&象形柱图

Posted 2023-04-03

参考技术A 主题河流图是一种特殊的流图，它主要用来表示事件或主题等在一段时间内的变化。
主题河流中不同颜色的条带状河流分支编码了不同的事件或主题，河流分支的宽度编码了原数据集中的value值。
此外，原数据集中的时间属性，映射到单个时间轴上。
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-2ahz2hsz.html

象形柱状图表属于柱状图的一种， 其特色特点在于图形表达能力强，比传统的柱状图更具有视觉效果。在一般的商业报表中，单调的图标不能形象的表达数据。象形柱图是可以设置各种具象图形元素的柱状图来生动形象的表达数据。

Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

需求：如图，y轴之间的距离太小，这样就太过于拥挤了，现在要修改echarts里面的属性，设置y轴值间隔让图表看上去舒服一些。

 

 

其实很多问题，真的只是因为自己没有好好的看文档，很多文档上面都写的清清楚楚的，主要是设置这段代码，max（设置y轴最大值）和splitNumber

总结一下公式就是，

max/ splitNumber=y轴值间隔

（比如将y轴200平均成5个点，每个点的间距就是40）

yAxis : [  // 纵轴标尺固定
            type : ‘value‘,
            scale : true,
            max : 200,
            min : 0,
            splitNumber : 5,
            boundaryGap : [ 0.2, 0.2 ]
         ],

可以看一下修改之后的结果：比之前好很多。

 

=====================================================================================================

//宽度 图的里面的宽度设置

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
             
         ]