>#### 子弹图
~~~
option = {
title: {
text: '子弹图',
textStyle: {
color: '#ffffff'
},
top: 10,
left: '5%',
},
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: "#0f375f",
yAxis: [{
type: 'category',
data: ['利润'],
axisLine: {
show: false,
},
axisLabel: {
color: '#ffffff',
},
axisTick: {
show: false,
},
},
{
type: 'category',
data: [''],
axisLine: {
show: false,
},
axisLabel: {
color: '#ffffff',
},
axisTick: {
show: false,
},
},
],
xAxis: {
type: 'value',
axisLine: {
show: false,
},
axisLabel: {
color: '#ffffff',
},
axisTick: {
show: false,
},
},
tooltip: {
formatter: '{a}: {c}',
},
legend: {
data: [
'差',
'良',
'优',
'实际值',
{
name: '目标值',
icon: 'path://M0 0M443.733333 0 h145.066667 v1024 H443.733333z',
},
],
textStyle: {
color: '#f2f2f2',
fontSize: 14,
},
selectedMode: false,
},
grid: {
containLabel: true,
width: '90%',
height: 120,
left: '5%',
top: 50,
},
series: [{
name: '差',
data: [60],
type: 'bar',
yAxisIndex: 0,
stack: 'range',
silent: true,
barWidth: 90,
color: '#F5B4AE',
},
{
name: '良',
data: [30],
type: 'bar',
yAxisIndex: 0,
stack: 'range',
silent: true,
barWidth: 90,
color: '#FADCA9',
},
{
name: '优',
data: [10],
type: 'bar',
yAxisIndex: 0,
stack: 'range',
silent: true,
barWidth: 90,
color: '#BFE9C3',
},
{
name: '实际值',
data: [75],
type: 'bar',
yAxisIndex: 1,
barWidth: 60,
color: '#434778',
z: 3,
},
{
name: '目标值',
type: 'scatter',
symbol: 'rect',
symbolSize: [8, 50],
data: [85],
color: '#fff',
hoverAnimation: false,
z: 4,
},
],
};
~~~
>#### 效果图
![](https://img.kancloud.cn/7a/4b/7a4b7c7afd5864753a9f7eae9375db39_800x200.png)
<hr>
- html
- 头部标签
- canvas
- md
- DOM
- git常用命令
- css
- 网站
- 默认
- 前缀
- 文本
- 图片
- 选择器
- 滚动条
- 强制横屏
- 响应式
- 动画
- animation(动画)
- transition(过渡)
- transform(变形)
- translate(移动)
- 渐变
- 鼠标
- 自定义 Web 字体
- 可视化
- echarts
- 折线图
- 区域颜色标识
- 分段显示不同颜色
- 柱状图
- 子弹图
- 分组、柱体宽度、指示器宽度
- 圓角
- 顶部显示文字
- 双轴柱状折线图
- 双轴双列柱状图
- 单个柱状图
- 多纵向坐标
- 走势图
- 横向百分比
- 最大值和最小值
- 饼图
- 嵌套
- 分组显示
- 饼图结合柱状图
- 折线结合饼图
- 关系图
- 树图
- 地图
- 标点
- 选中
- 常用
- 图片超出可拖拽
- 百度导航
- 短信验证码倒计时
- video
- TS
- 未整理
- 消失的边界线问题
- 跟随
- js
- 兼容
- 数组去重
- 解析 URL 参数为对象
- 图片懒加载
- 正则
- Photoshop
- 快捷键
- 混合模式
- vscode
- vue
- 指令