>#### 圓角
~~~
option = {
title: {
text: '顶部显示文字',
textStyle: {
color: '#ffffff'
},
top: 5,
left: 'center',
},
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: "#0f375f",
color: [
'#60acfc',
'#feb64d',
'#5bc49f',
'#ff7b7b',
'#32d3eb',
'#9287e7',
'#4777cd',
'#70ad47',
'#61a6e4',
'#ffc900',
'#ff7820',
'#8d50bf',
'#02b67a',
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#ea7ccc',
'#00bfb7',
'#ff6480',
'#9a60b4',
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
textStyle: {
color: '#81b0d6',
},
padding: 10,
data: ['苏宁', '考拉', '京东', '天猫', '淘宝'],
},
grid: {
top: '14%',
right: 160,
containLabel: true,
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
data: ['Total', 'suning', 'kaola', 'jd', 'tmall', 'tb'],
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
series: [{
type: 'bar',
stack: 'one',
align: 'inside',
name: '淘宝',
data: [12.51, '-', 10, '-', '-', 43],
barWidth: '40%',
label: {
show: true,
position: 'inside',
fontSize: 12,
color: 'white',
textBorderWidth: 1,
textBorderColor: 'inherit',
},
labelLayout: {
hideOverlap: true,
},
},
{
type: 'bar',
stack: 'one',
align: 'inside',
name: '天猫',
data: [53.08, 10, 8, '-', 14, 17],
barWidth: '40%',
label: {
show: true,
position: 'inside',
fontSize: 12,
color: 'white',
textBorderWidth: 1,
textBorderColor: 'inherit',
},
labelLayout: {
hideOverlap: true,
},
},
{
type: 'bar',
stack: 'one',
align: 'inside',
name: '京东',
data: [32.34, 27, 20, 100, 24, 12],
barWidth: '40%',
label: {
show: true,
position: 'inside',
fontSize: 12,
color: 'white',
textBorderWidth: 1,
textBorderColor: 'inherit',
},
labelLayout: {
hideOverlap: true,
},
},
{
type: 'bar',
stack: 'one',
align: 'inside',
name: '考拉',
data: [0.09, '-', 52, '-', 32, 18],
barWidth: '40%',
label: {
show: true,
position: 'inside',
fontSize: 12,
color: 'white',
textBorderWidth: 1,
textBorderColor: 'inherit',
},
labelLayout: {
hideOverlap: true,
},
},
{
type: 'bar',
stack: 'one',
align: 'inside',
name: '苏宁',
data: [1.97, 13, 10, '-', 20, 10],
barWidth: '40%',
label: {
show: true,
position: 'inside',
fontSize: 12,
color: 'white',
textBorderWidth: 1,
textBorderColor: 'inherit',
},
labelLayout: {
hideOverlap: true,
},
},
{
type: 'bar',
name: '总数',
color: 'rgba(0,0,0,0)',
data: [100, 50, 100, 100, 90, 100],
barWidth: 0,
label: {
show: true,
position: 'top',
fontSize: 12,
},
z: -1,
barGap: '-100%',
labelLayout: {
hideOverlap: true,
},
},
],
};
~~~
>#### 效果图
![](https://img.kancloud.cn/dd/af/ddaf28468c39f3365586be650cd6f7b8_800x450.png)
<hr>
- html
- 头部标签
- canvas
- md
- DOM
- git常用命令
- css
- 网站
- 默认
- 前缀
- 文本
- 图片
- 选择器
- 滚动条
- 强制横屏
- 响应式
- 动画
- animation(动画)
- transition(过渡)
- transform(变形)
- translate(移动)
- 渐变
- 鼠标
- 自定义 Web 字体
- 可视化
- echarts
- 折线图
- 区域颜色标识
- 分段显示不同颜色
- 柱状图
- 子弹图
- 分组、柱体宽度、指示器宽度
- 圓角
- 顶部显示文字
- 双轴柱状折线图
- 双轴双列柱状图
- 单个柱状图
- 多纵向坐标
- 走势图
- 横向百分比
- 最大值和最小值
- 饼图
- 嵌套
- 分组显示
- 饼图结合柱状图
- 折线结合饼图
- 关系图
- 树图
- 地图
- 标点
- 选中
- 常用
- 图片超出可拖拽
- 百度导航
- 短信验证码倒计时
- video
- TS
- 未整理
- 消失的边界线问题
- 跟随
- js
- 兼容
- 数组去重
- 解析 URL 参数为对象
- 图片懒加载
- 正则
- Photoshop
- 快捷键
- 混合模式
- vscode
- vue
- 指令