目录
柱状圆角
柱子的顶部是圆角。主要是 barBorderRadius: [50, 50, 0, 0]。分别对应的是：左上，右上，右下，左下。
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',
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0], // 左上，右上，右下，左下
}
}
}]
};label显示位置
label显示在柱子中间，主要是position: 'inside' 起到的作用。
语义声明位置：
- top
- bottom
- left
- right
- inside
- insideTop
- insideBottom
- insideLeft
- insideRight
- insideTopLeft
- insideTopRight
- insideBottomLeft
- insideBottomRight
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',
label: {
normal: {
show: true,
position: 'inside'
}
},
}]
};相对的百分比：
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',
label: {
show: true,
position: ['10%', '10%'],
},
}
]
};绝对像素值：
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',
label: {
show: true,
position: [10, 100],
},
}
]
};数值为0不展示0
数据为0的时候展示在坐标轴线上很丑。可以控制为0的值直接展示空字符串' '。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 0, 150, 80, 0, 110, 130],
type: 'bar',
label:{
normal:{
show:true,
formatter:function (params) {
if (params.value > 0){
return params.value;
} else {
return ''
}
}
}
}
}
]
};悬浮显示数据线
option = {
grid: {
left: '2%',
top: '10%',
right:0,
bottom:'5%',
containLabel: true//grid 区域是否包含坐标轴的刻度标签。
},
tooltip : {
trigger: 'axis',
// 坐标轴悬浮
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#B248CA'
}
}
},
xAxis : [
{
type : 'category',
data : ['优秀', '良好', '合格', '未合格', '不及格', '零分'],
axisTick: { //坐标轴刻度
show:true,
alignWithLabel: true//刻度和文字对齐
},
nameLocation:'start',//坐标轴名称显示位置
nameGap:'9',//坐标轴名称与轴线之间的距离。
boundaryGap:['1%','4%'],//不从0%开始
textStyle:{
width:'54'
},
axisLabel:{
interval:0,//文字间没有间隔
rotate:'45',
formatter : function(params){//五个字一行
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 5;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
newParamsName = params;
}
return newParamsName
},
formatter:function(value) { //文字竖直显示
return value.split("").join("\n");
} ,
formatter : function(params,index){//隔一个换行
if (index % 2 != 0) {
return '\n\n' + params;
}
else {
return params;
}
}
}
}
],
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
formatter: '{value} %'
},
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '6',
barGap:'56',
data:[56, '38', '42','65', '99',{//设置个别颜色
value:'40',
itemStyle:{
color:'black',
}
}],
itemStyle:{
normal:{
barBorderRadius:[7,7,0,0],//圆柱圆角
color: function (params){ //不同颜色
var colorList = ['#50E9C8','#F03869','#AC91DF','#F3CE30','#31B5EC','#D96C70'];
return colorList[params.dataIndex];
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//渐变色
offset: 0,
color: '#FAD036'
}, {
offset: 1,
color: '#EF2409'
}]),
}
}
}
]
}悬浮柱状渐变色
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',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}])
},
emphasis: { // 鼠标悬浮
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
},
{
offset: 0.5,
color: '#83bff6'
},
{
offset: 1,
color: '#2378f7'
}])
}
}
}]
};每个柱的颜色
let colors = ['lightgreen','pink','purple','orange','lightblue']
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value'
},
series: [
{
color: colors,
data: [120, 200, 150, 80, 70],
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
let idx = params.dataIndex
return colors[idx]
},
}
},
}
]
};单个柱的颜色
方法一：更推荐
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',
itemStyle: {
normal: {
color:(val) => {
if (val.value < 80) {
return '#F7782C'
} else{
return '#5470c6'
}
},
},
},
}
]
};方法二：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80,
{
value: 70,
itemStyle:{
color: '#F7782C'
}
}, 110, 130],
}
]
};柱子重叠
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value'
},
series: [
{
data: [20, 120, 130, 60, 80, 100, 100],
type: 'bar'
},
{
data: [130, 202, 180, 80, 90, 200, 130],
type: 'bar',
barGap:'-100%',// 第二个柱子的位置实现重叠
z:'-1',// 柱子的层级
}
]
};柱子堆叠
let colors = [
"#FC4540",
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#00C6FF" },
{ offset: 1, color: "#003B87" },
]),
];
option = {
color: colors,
xAxis: {
type: "category",
data: ['1月','2月','3月','4月','5月','6月'],
},
yAxis: {
type: "value",
},
series: [
{
name: "男",
data: [1,2,3,4,5,6],
type: "bar",
stack: "total",
barWidth: 36,
label: {
show: true,
position: "outside",
color: "#fff",
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return "";
}
},
},
},
{
name: "女",
data: [3,2,1,1,1,1],
type: "bar",
stack: "total",
barWidth: 36,
label: {
show: true,
position: "outside",
color: "#00C6FF",
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return "";
}
},
},
},
],
};柱子背景
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value'
},
series: [
{
data: [20, 120, 130, 60, 80, 100, 100],
type: 'bar'
},
{
data: [130, 202, 180, 80, 90, 200, 130],
type: 'bar',
barWidth: '60%', //俩柱之间的距离
showBackground: true, //柱状背景
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};柱子顶部加入图片效果
let circleList = [
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFdklEQVRYhY1YTY/bRBh+/BHbiRN7l02bqst+st1dVT0gceXABYk7PfYPwIELv4IfABJ3euuBCxKCKxckBEKi2y1F6Xa3abTZT+fLHxnbaMZje+zE3Y70aiLPzPs888w778xEin/8EO9YJKGbVDEkrvhdWdSKBumGehGJReBVdVZyApsPk/roicSdi4aKb4sUEK38jeLEHIdVRQWOnsgLgORCLWsKzFUDqlmHXEvGRzMCMnEx6XmIgpCDRaU6saMnMTYfRpmMQgzIJdCiNTebqHc6kHUbMYkQBT7ikCReFBWypkNSZUS+A/f0FOOjMSdRtlgglikgypwCK8z0FQPWzgYkpQn/8grT3jFmo0ggjMxhrSWjsWqhcXcP9c4Yo5fH8AYugFDQOSVBx8apAqkzRQBXYd1bhnF7G8HVNZznV4hDhZNWuIkEQm4EkhLC3luGtrwEb9DF8MUV+560R7xmpFXMB1kCYu+1obc3MD7qY9qbAagDqHFTKwhQkBnicIbrgyEaqy6am9uQ5Fdwnp8LfaW0FpcgX3NzvcXARy/6cAchB9e5aZxEqhaEWVGiAQCftU97PuJZH617GzBdH5Njh4/JglKdi3i1XkNzbQuTNwO4A8LBjZJpXAWRAOHgnkBOgjtwoZgD5tM/ewripkHJMFMHuQr2fgehTzB+ORVmTUmYAJoAWgAsAHbJLN7W5H1z1agv6pP6LgZvYRdIkGsKVLOD64Mel1njM6fOGtxxg33rfLwNe3+DjXYOX+H0t64we0nYasnSjLrnWLq/CrnWZ3mDkygSsHdtRLMA/iXhYJqgQELAuvc+9r98BOPWeqbdnU+Ajc+PcfjdDxi+eC2Akywu/MsJ800xrp6epQTkwi5QmzYCZ8yJqYIKCYn6nTYefP1FATwt9Btto31y+TVh16jMN8UQMOWCAnKtgeDaK+SCnISGDx59CrW5PAeeLWhzmfVJ+xe3rMx8yzVTPE+KQSgpOmbD2cKMyBLTzoNK8LQkfcRkJWdKU9+SoolBKJeGS4gjlLZmbkrdupGA0rAqx+e+s1ImEPNVKR+riYX+6EYCoTeqHJ/7XkggRhwGqFk1IYqjQo4fdZ/dSGDUPRTyfij4iZlviiGQSAkkDKPZFJplCMBEyHABuo9/BZlWq0Dbuo9/yfrn4xMi1DfFEC4ossAmBpk4qC01CwdLnts9TE5Ocfjt9wicwRx44CRttE+SkHw+dpaRoL4phoCpZuDURl0HKx9tQVuiW6ac25MMd/l3F79/9Q1WP7uP1vY6l/0YvZ8PEIf07J9yc/nYRAnqU9F1XP/jiAoUCZApAZkO0Npq4+KvMz5YFRJWcuzSdXz90x8A/uTjIz5TnwOnBHIVWlu3mG+KUVoCCCQiOAd9KA0d5pohKJA6pVmSxsCQngAlG/K28ZwC1JfSMJjv/EaEVAFxq0QgLoHbfwlzfQdk2oN/4S3I7W+7D/gF01ckmOsduP3/mO/SJbW4BKkjGguKfgJ7fw3Df9/AO/OEwAxuvBGlshu3FFi7dxFcnjCf+bYsxEB6RUovCSGrr58NYO9FsHY3ob93Aee5w52rhQuHuHzi1rX3bOjtFfjnR/w6Fop3wXRceikt3/9TABX1TgOt7Q12unnnV5icjBB65fhJlkExAHOtBaO9zOQfdV/BPZ1yUlFJgUgkAIFA+V2QkLF2LRjt25BVC2HgI/LpuyCZiaTIkHUdiqYjIkP4F2dcsaiUDefeBSKBRQeIPFerpgJz3YRq1NlDhAlJIhDPxeR4AjKZm2U58BblgfTNFvPnWeHqLMQHQCYSnGd+xeM0fwNWAGbPMv42rHqelx+gVa/lcnnba1gkl5Wq53m587v8NyCOXfR7vgD4H8khvGFl000HAAAAAElFTkSuQmCC',
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFb0lEQVRYhY1YW28bRRT+ZtbrS24mjVu3btPUDoiqFIEQ4gUh8dKX8hf4A/wT+Am88cA7b5GgrxVPFIREL0rapHHbOHGcxM7Fa3u9c9BMZrZn1+umI43W2j2Xb75z5pwZi89/JLznEExMTFGhKb+njtyUD+KCZxaILOfTnvGIAfj3z5/hmjGcnpjyLosBPtPvtB+yfsxIMBCuQWY4komnD09eRVHMoISc1R9jTH0EahcDhIisM5V6mhmugfz75t35qlgOyJTTxJQ3MCcqqIo8yhRBIcQQCmOrmYOPgvAgaYQedbCnXuPUgkhPYsBiBjjNzrGnp1hEUd7CCiTmqIsjtYsmnRllyfSMQTELKa5iQVTxsXcZp6qJJh0gAAwrbjgQWpc4gLTznKxjUSyhgR660Qu8hDLv8w5cCkBEZ4joBU4h0fNWsSjr+IQWsKm2cDQlYQ2AdJKdO2+gIi5hhV6jpXYRAijpHLIzlwXAZAMQ6gBFGziWVxGIG2hIgW21iQ6TFe7JGYhjLmuY187VS7SoYwxr5wU78xaEZ+VhaY2Mc2AEYKi/q10MxRgtHUI5wFDtoGd14qTMpTNeFOHLGupqD23qmBVp58XUzFsWOICxdT5g4AR1EFAJbW2TDvGYBnFSCs5AzIJcRZVGGKtX6AOYsasu2d8lxoafAhDalfPwmOTUtsQi5rXt6DFe8zqSTEIfnphBNdrAG+sgb1fuAMzaZ7FxG40rNaxo5fYOtjefYZOtXrCtZkKjmuh4H+E6fLQQGrbEBACvjjKFGFHXCMxaAJyB2cvXcOPre/h+dgE33SpW7wCffoXmnw/w637LrJBYWExeUBdn2rb2Ea1j3wGQiV0wgzKdmAKSs9PnIOY/QOXb7/ADd+7G3AJu6m9ahoUpz3ZNztieQZn7lJwB4WOGjg2NcS1gIPJffoN7+SIW087d0N+0jJNPbVmpbQvfMCs4A2+TUKKAU0PZREXUhipV3J3m3A0rk2N6MmZa25YGWJyEMqUvSLGkTE0/j4WLAPgFI5Opz2zHIw2AbFDSbfW8k4U4uQhAODIymfrMdiYAgsIIcyZuxDpY5MrsYRtPLwJw2MYzm/1OT8UNSNtWplglWnC8YhqjL+bNvlestrsKN3r0EA/sCqeu/tFD/OHkmb4Bom1rH/yAIhkaQh89MY+5RGN5W9sH3QPsPfwdPwd9tNPOg/75Ny1jC9LQ6oYOhLHdN/0g0Q1jBlQTPe8u6qIMSb2J2m4q3M42Nn/7BT/d/gx3KtXzetDZQ/PZv3hCyvT+vp2B1TVMaJsij0K0HgMwIBIAKMCYBmjLZVSinqlWI9Z0XHmNSGH09B/8BeBvq897QcAAxCzIZVzWtrWPLAAOhFIbaMm7qMgaimrHKPNEdeV1eEE3HHAGtC1RRDH6D+vsRAQHgG8VRQOMqY0tUcOHIsAbOjJG0rX9XeeBIZ9iEULUUFVtPNe2kTqkJkLgDOlckHm8kqtYVlvYoQMDImKrfPeJyNIuluDJOmrUxSttk23LRAjcEckdErSQUM/Rlg0or45bqowDtWkMhLy2pw+lfOvKBsryEpbUIV7a45irC/GJOM2AYB+MoFakE/TlMla8L1CmQxypFk4MuZNVVOn+J6+Z45xuWMNoG09o3yTkGMnjOTJ3AYvn252xj9NoH09lHQtiCVdyVdwifScYYYjIynqmxRSEjwKNcUxdbKkXhjGVqoYqlXMTu4BnO88LqbZwiC10RQmeuI5ZUUAJecvCGIqOEag3OKMgEefM21F6F5hh72xkr2eJozPLD1AAQc9NELIup9x4VkOCu5ZN3A3dC+6MGZt2W06Pd92G3QITY9r1PEHTe/43wHWzfk8OAP8D28XBfaJJ48oAAAAASUVORK5CYII='
]
// 设置每个状图颜色
var colorList = ['#FCD298', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7'];
option = {
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#B9E4E6'
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']
},
],
backgroundColor: 'rgb(49,69,81)',
series: [
// 渐变线条
{
type: 'bar',
zlevel: 1,
itemStyle: {
data: [50, 28, 17, 38, 90],
normal: {
barBorderRadius: 0,
color: function (params) {
// 大于等于50%的是黄色 反之为蓝色
var colorItem
if (params.data >= 50) {
colorItem = ['rgba(252, 210, 152, .2)', 'rgba(252, 210, 152, 1)'];
} else {
colorItem = ['rgba(36, 253, 231, .2)', 'rgba(36, 253, 231, 1)'];
}
// 设置线条渐变色
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
], false);
}
},
},
barWidth: 4,
data:[50, 28, 17, 38, 90]
},
// 圆点
{
type: 'pictorialBar',
symbol: function (params, value) {
// 设置图片
if (params >= 50) return circleList[0]
return circleList[1]
},
symbolPosition: 'end',
symbolSize: [30, 30],
symbolOffset: [10, 0],
z: 20,
data: [50, 28, 17, 38, 90]
}
]
};
仿3D柱状图
var data1 = [200, 100, 200, 50, 100];
var data2 = [300, 200, 300, 200, 400];
option = {
backgroundColor: 'rgb(49,69,81)',
xAxis: {
data: ['北京', '上海', '深圳', '广州', '杭州'],
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
}
},
series: [
// 底部的光晕
{
name: '',
type: 'pictorialBar',
tooltip: {
show: false
},
symbolSize: [90, 40],
symbolOffset: [0, 20],
z: 1,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#26B2E8',
borderType: 'solid',
borderWidth: 4
}
},
data: [1, 1, 1, 1, 1]
},
// 底部圆片
{
name: '',
type: 'pictorialBar',
symbolSize: [45, 25],
symbolOffset: [0, 10],
z: 12,
itemStyle: {
opacity: 1,
color: '#FFD56E'
},
data: [0, 0, 0, 0, 0]
},
{
name: '2022',
type: 'bar',
barWidth: 45,
barGap: '-100%',
itemStyle: {
color: function (params) {
var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#FF9A22' // 0% 处的颜色
},
{
offset: 1,
color: '#FFD56E' // 100% 处的颜色
}
],
false
);
}
},
data: data1
},
// 顶部圆片
{
name: '',
type: 'pictorialBar',
symbolSize: [45, 25],
symbolOffset: [0, -10],
z: 12,
itemStyle: {
opacity: 1,
color: '#f00'
},
symbolPosition: 'end',
data: data1
},
]
};
参考链接：echarts 3D 柱状图
竖向柱状改成横向柱状
xAxis 和 yAxis 的内容互换。
竖向柱状
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',
}
]
};横向柱状
option = {
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
}
]
};
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
