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. js 提示框的实现---组件开发之(二)

    接着第上一个,在js文件里再增加一个 popModal 模块,实现弹框效果 css 代码: .alert { padding: 15px; margin-bottom: 20px; border: 1 ...

  2. C++复习:STL之算法

    算法 1算法基础 1.1算法概述 算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm> ...

  3. 使用hibernate与mysql时数据不能插入的原因及解决办法

    1.背景 之前从没用过hibernate,因此在网上搜了一下hibernate快速入门方面的信息,最后我按照<Myeclipse Hibernate 快速入门 中文版>(CSDN,百度文库 ...

  4. Redis进阶实践之九 独立封装的RedisClient客户端工具类(转载9)

    Redis进阶实践之九 独立封装的RedisClient客户端工具类 一.引言 今天开始有关Redis学习的第九篇文章了,以后肯定会大量系统使用Redis作为缓存介质,为了更好的更好的Redis,自己 ...

  5. Linux Install redis

    1.将下载好的压缩包放到/usr/local目录下# tar xzf redis-3.0.2.tar.gz # cd redis-3.0.2 # make//--------------------- ...

  6. [Nginx]实战Nginx:Nginx的一些介绍

    ------------------------------------------------------------------------------------------------ 首先列 ...

  7. java资源文件解读

    [1]从零开始建工程 最简单的:http://www.cnblogs.com/alipayhutu 其中d)换作: ApplicationContext context = new ClassPath ...

  8. 3.Java的基本数据类型.md

    Java支持的类型分为两类: •基本类型(Primitive Type):boolean和数值类型 ◦整型:byte.short.int.long.char ◦浮点:float.double •nul ...

  9. C++之 模板Template的使用

    转自https://www.cnblogs.com/cynchanpin/p/7127897.html 1.在c++Template中非常多地方都用到了typename与class这两个关键字,并且好 ...

  10. C# CefSharp 可监听请求等

    原地址:https://blog.csdn.net/jinxiu0406/article/details/80365140 bug1:在抓取js文件的时候,有时候数据未获取全,文本被截断了.在IRes ...