Echarts柱状图设置圆⾓和颜⾊渐变，图表⾃适应⾸先 新建HTML⽂件 引⼊echarts.js
为 ECharts 准备⼀个具备⾼宽的容器（由于我的是图表⾃适应所以没有宽度）；
创建⼀个简单的柱状图，
此代码为body全部代码，根据需求来看 。
其中，下⾯代码为柱⼦圆⾓设置  barBorderRadius: [15,15,0,0]
圆⾓弧度对⽐barWidth来设置。
下⾯代码为柱⼦颜⾊渐变设置，颜⾊⾃⼰更改相应的颜⾊；
其中  offset: 0,  color: '#5052EE',        指0%处的颜⾊;
offset: 1, color: '#AB6EE5',        指100%处的颜⾊;
下⾯为图表⾃适应代码：
图表容器不要设置宽度
屏幕⾃适应代码：
下⾯有⼏种⽅法：
第⼀种⽅法：        size = size
第⼆种⽅法：
// 监听window窗⼝⼤⼩变化的事件
window.οnresize=function(){          //屏幕⾃适应                                            // 调⽤echarts实例对象的resize⽅法
}
屏幕⾃适应还有⼀种⽅法 容器宽和⾼都不⽤设置，上⾯没有代码，代码放在下⾯了
这是在body下加上了获取屏幕宽⾼的函数。
然后再在myChart.setOption(option);  后⾯加下⾯代码（使⽤这个⾃适应就不⽤写第⼀和第⼆种⾃适应了）                这代码主要就是当浏览器⼤⼩改变时其可以重置容器⼤⼩。
保存 - 运⾏ - 改变浏览器⼤⼩ - 刷新 就可以看到⾃适应啦
到此，就完成了设置圆⾓和颜⾊渐变，图表⾃适应等基本设置。效果图在这~渐变颜代码大全

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。