echarts —— 绘制横向柱状图（圆角、无坐标轴）
UI给了设计图，看了一眼觉得简单，不就是无序列表布局嘛（ul，li），后来才知道那是echarts图，好吧，样式如下：
代码如下：（渐变色没做）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>Echarts绘制横向柱状图(圆角+渐变)</title>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main')); //初始化数据
var category = ['小王', '小李', '小赵', '小马', '小刘', '小张', '小齐'];
var barData = [3100, 2142, 1218, 581, 431, 383, 163];
var yMax = 4000;
var dataShadow = []; for(var i=0; i<barData.length; i++) {
dataShadow.push(yMax)
} var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine:{
show:false
}
},
yAxis: {
type: 'category',
data: category,
splitLine: {show: false},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
offset: 10,
nameTextStyle: {
fontSize: 15
},
splitLine:{
show:false
},
data: category
},
series: [
{ // For shadow
name: '数量',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: 40,
color: 'rgba(0,0,0,0.05)'
},
emphasis: {
barBorderRadius: 40
},
},
barGap:'-100%',
barCategoryGap:'50%',
// barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
name: '数量',
type: 'bar',
data: barData,
smooth: true,
label: {
normal: {
show: true,
position: 'topLeft',
offset: [5, -4],
textStyle: {
color: '#999',
fontSize: 13
},
formatter:function(param) {
for(let i=0; i<category.length; i++) {
if(param.dataIndex == i) {
return category[i];
}
}
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 40
},
normal: {
barBorderRadius: 40,
color: function(params) {
let colorList = ['red', 'orange', 'yellow', 'green', 'skyBlue', 'blue', 'purple'];
return colorList[params.dataIndex];
}
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
echarts —— 绘制横向柱状图（圆角、无坐标轴）的更多相关文章
- Echarts绘制横向柱状图
效果图: 关键配置: 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示
- echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...
- 如何基于 echarts 实现区间柱状图（包括横向）？
目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...
- echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- ASP.NET Core +Highchart+ajax绘制动态柱状图
一.项目介绍利用前端Highchart,以及ajax向后台获取数据,绘制动态柱状图.hightchart其他实例可查看官网文档.[Highchart](https://www.highcharts.c ...
随机推荐
- HTML文档的组成和标签的规范
Html文档的组成 (1): <html></html>来明确html文档的范围 (2): <head></head>标签可以设置一个内容比如: < ...
- PHP判断访问者是PC端还是移动端
function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { ...
- eclipse快捷键整理
编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等)Ctrl+Shift+F 格式化当前代码Ctrl+Shift+M 添加类的i ...
- MYSQL的MYSQLDUMP命令
1.用mysqldump对MySQL数据库进行数据备份与恢复 下面假设要备份tm这个数据库:Shell>mysqldump -uroot –p123456 tm > tm_050519.s ...
- Spring Security(1)：认证和授权的核心组件介绍及源码分析
Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方式的安全框架.它包括认证(Authentication)和授权(Authorization)两个部 ...
- ubuntu kylin 18.04 使用 wine 安装 EasyConnect 的windows版本
首先下载wine: sudo apt-get install wine-stable 然后使用wine安装安装包EXE文件(安装包你自己去下): wine EasyConnectInstaller.e ...
- 服务器watchdog看门狗的理解
1．什么是watchdog?watchdog,中文名称叫做“看门狗”,全称watchdog timer,从字面上我们可以知道其实它属于一种定时器.然而它与我们平常所接触的定时器在作用上又有所不同.普通 ...
- 35.百度云语音识别接口使用及PyAudio语音识别模块安装
百度云语音识别接口使用: 百度云语音识别接口文档:https://cloud.baidu.com/doc/SPEECH/ASR-API.html#JSON.E6.96.B9.E5.BC.8F.E4.B ...
- 冲刺Noip2017模拟赛6 解题报告——五十岚芒果酱
1．ksum(ksum) [问题描述] Peter喜欢玩数组.NOIP这天,他从Jason手里得到了大小为n的一个正整数 数组. Peter求出了这个数组的所有子段和,并将这n(n+)/2个数降序排序 ...
- Python基础总结之第八天开始【while循环以及for循环,循环嵌套等循环相关的知识点】（新手可相互督促）
ennnnn,年薪20万的梦想是不是又进了一步: 循环,什么是循环,循环就是电池有电,手机屏幕可以循环一整天的使用:循环就是地球不毁灭,太阳日复一日的出现...... 不接受反驳,谢谢!~ 只要条件满 ...