echarts柱状图Demo
echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX
代码:
var xData = ['a', 'b', 'c', 'd', 'e'];
var yData = [80, 87, 51, 81, 23];
option = {
backgroundColor: 'black',
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
width: 5 //显示提示线
}
},
/* axisPointer: { //不显示提示线
type: 'line',//none
lineStyle: {
opacity: 0
}
},*/
formatter: function(prams) {
return "数量:" + prams[0].data
}
//formatter: "{a} <br/>{b} : {c} "
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '7%',
containLabel: true,
z: 22
},
xAxis: [{
type: 'category',
gridIndex: 0,
data: xData,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: 'white',
}
},
axisLabel: {
show: true,
color: 'white',
textStyle: {
fontSize: 18
}
}
}],
yAxis: [{
type: 'value',
gridIndex: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'white',
}
},
axisLabel: {
color: 'white',
formatter: '{value}',
textStyle: {
fontSize: 18
}
}
}],
series: [{
name: '数量',
type: 'bar',
barWidth: '30%',
xAxisIndex: 0,
yAxisIndex: 0,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#ffc72b",
fontSize: 20
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 1,
color: '#0286ff'
}
]
)
}
},
data: yData,
zlevel: 11 }, ]
};
echarts柱状图Demo的更多相关文章
- AngularJS引入Echarts的Demo
最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echarts柱状图标签显示不完全的问题
echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts柱状图个数多,横坐标名称过长显示不全解决方法
当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...
- echarts横向柱状图Demo
echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM 代码: option = { backgroundColor: 'bla ...
- Flask插件wtforms、Flask文件上传和Echarts柱状图
一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...
随机推荐
- 2018SDIBT_国庆个人第五场
A - ACodeForces 1060A Description Let's call a string a phone number if it has length 11 and fits th ...
- centos中Mysql数据库导入sql文件
1.对于文件的导入,在Centos下里面的是首先要新建一个和文件相同名字的数据库. mysql>create database Student; 2.切换到需要导入sql文件的数据库 mysql ...
- webkit内核自定义隐藏滚动条
1,在主页面可以拿到iframe,也可以为iframe注册onload等事件.document.getElementById('iframeId').onload 2,在主页面操作其中的iframe的 ...
- Android中查看SQLite中字段数据的两种方式
方式一:ADB Pull 通过adb pull导出*.db文件到PC的文件夹中,通过可视化工具 SQLiteExpertPers 进行查看.编辑: adb pull /data/data/com.jo ...
- 使用AutoMapper时Expression的转换
此文章为转载:http://www.bubuko.com/infodetail-699735.html 参考链接: http://q.cnblogs.com/q/34480/ dudu有回复,其中 ...
- 吴裕雄 28-MySQL 序列使用
MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现 使用AUTO_INCREMENTMySQ ...
- pl2303 驱动
https://blog.csdn.net/ouening/article/details/70947759
- yii配置访问路由权限配置
'verbs' => [ 'class' => VerbFilter::className(), 'actions' => [ 'logout' => ['post', 'ge ...
- go io包
https://studygolang.com/articles/9424 https://blog.csdn.net/trochiluses/article/details/44338407
- 对于“2017面向对象程序设计(Java)第五周工作总结”存在问题的反馈及本周教学计划
一:问题反馈 “上周我们学习的新内容主要是第五章,并对第四章内容做了巩固.从学生上交的实验报告完成情况以及学习Java心得博客中的反馈可以看出,学生对构造器.重载.超类.多态.抽象类这几个概念理解的不 ...