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的更多相关文章

  1. AngularJS引入Echarts的Demo

    最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...

  2. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  3. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  4. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  5. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  6. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  7. echarts柱状图个数多,横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  8. echarts横向柱状图Demo

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM 代码: option = { backgroundColor: 'bla ...

  9. Flask插件wtforms、Flask文件上传和Echarts柱状图

    一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...

随机推荐

  1. linux查询硬件信息

    硬件信息查询 sudo dmidecode -t baseboard

  2. windows下配置mysql环境变量 - 使用cmd访问mysql(图)

    window7为例,右击“计算机” - 单击“属性” - 单击“高级系统设置” - 单击“环境变量”,剩下看图: <图1> 右下角"环境变量". <图2>选 ...

  3. linux网卡桥接问题与docker网卡桥接问题

    一.linux网卡桥接问题 在linux上创建桥接网卡,与真实的物理网卡进行绑定,相当于在linux中创建了一个虚拟的交换机,以linux网卡地址为源地址的数据,从桥接网卡br0进入,从实际的物理网卡 ...

  4. Hadoop集群(四) Hadoop升级

    Hadoop前面安装的集群是2.6版本,现在升级到2.7版本. 注意,这个集群上有运行Hbase,所以,升级前后,需要启停Hbase. 更多安装步骤,请参考: Hadoop集群(一) Zookeepe ...

  5. 当try-catch-finally代码块遇上return,代码执行流程是怎样

    这里打算用一个Java读取文件内容的例子来测试,文件存在,不抛异常,文件不存在,则抛出FileNotFoundException: Java读取文件代码如下: /** * 根据路径和文件名获取内容 * ...

  6. Linux基本操作指令

    Linux操作指令 到达当前用户目录:cd ~ 获得管理员权限执行:sudo 解压缩:tar -zxf XXX.tgz 安装包:dpkg -i XXX.deb 通过链接下载文件:wget  http: ...

  7. git gitlab 使用 提交代码解决冲突

    1.更改完代码后,git push 发生错误 注: 此时,使用 git pull: 更新代码,git 会自动merge不同的更新, a.  如果git 自动merge成功,再进行 git push操作 ...

  8. 微擎框架下拉分页(使用js模板引擎)

    1.需要分页的页面,引入一下文件 <script language="javascript" src="\addons\{$_GPC['m']}\template\ ...

  9. 用R理解统计学

    1.随机变量( random variable)概念的引入 该数据来自杰克逊实验室.2组数据,每组12只老鼠,一组普通食物,另一组高脂肪(hf)饮食.几周后,科学家们称了每只老鼠的体重,得到了这个数据 ...

  10. mybatis in查询 传入string

    <select id="selectChoosenumberdetailNumber" > SELECT number FROM choosenumberdetail ...