echarts 特殊柱状图
2023-04-18 14:45:08 时间
特殊规则柱状图
如下代码实现:
option = {
"backgroundColor": "#171A2A",
"tooltip": {
"trigger": "axis",
"axisPointer": {
"show": true,
"type": "shadow",
"lineStyle": {
"type": "shadow"
},
"z": 0,
"label": {
"show": true,
"color": "#ffffff",
"shadowColor": "transparent",
"shadowBlur": 0,
"margin": 16,
"padding": [12, 10, 12, 10],
"fontSize": 11,
"backgroundColor": "#171A2A",
"opacity": 0.8
},
"shadowStyle": {
"show": true,
"color": "rgba(38, 42, 64, 1)",
"opacity": 0.8
}
},
"padding": [5, 7],
"backgroundColor": "rgba(39, 43, 73, 1)",
"extraCssText": "box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);z-index:1;"
},
"grid": {
"top": "2%",
"left": "2%",
"right": "4%",
"bottom": "4%",
"containLabel": true
},
"xAxis": {
"type": "category",
"data": ["测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7", "测试8", "测试9", "测试10", "测试11"],
"axisLabel": {
"margin": 16,
"textStyle": {
"fontSize": 10,
"color": "#6F728D"
}
},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
}
},
"yAxis": {
"type": "value",
"axisLabel": {
"margin": 16,
"textStyle": {
"fontSize": 10,
"color": "#6F728D"
},
"formatter": "{value}%"
},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "rgba(47, 49, 57, 0.5)"
}
}
},
"series": [{
"name": "腾讯",
"type": "bar",
"barWidth": "20",
"itemStyle": {
"barBorderRadius": [4, 4, 0, 0],
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "#1DC6FF"
}, {
"offset": 1,
"color": "#3042E3"
}]
}
},
"data": [{
"name": "测试1",
"value": "28.43",
"value2": 557
}, {
"name": "测试2",
"value": "8.01",
"value2": 157
}, {
"name": "测试3",
"value": "4.80",
"value2": 94
}, {
"name": "测试4",
"value": "1.68",
"value2": 33
}, {
"name": "测试5",
"value": "11.38",
"value2": 223
}, {
"name": "测试6",
"value": "7.55",
"value2": 148
}, {
"name": "测试7",
"value": "7.81",
"value2": 153
}, {
"name": "测试8",
"value": "1.79",
"value2": 35
}, {
"name": "测试9",
"value": "10.67",
"value2": 209
}, {
"name": "测试10",
"value": "10.72",
"value2": 210
}, {
"name": "测试11",
"value": "6.84",
"value2": 134
}]
}]
}
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击