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. python 之列表推导式,集合推导式,以及字典推导式

    https://www.cnblogs.com/weihengblog/p/8428124.html

  2. 一个Tparams小测试

    var aParams: TParams; aPar: TParam; I:Integer; begin aParams := TParams.Create(nil); aPar := aParams ...

  3. RabbitMQ.Net 应用(2)

    //生产者 using RabbitMQ.Client; using System; using System.Collections.Generic; using System.Linq; usin ...

  4. HTML 样式兼容不同设备类型

    在项目中遇到在屏幕上显示的效果和打印时显示的效果不同,可以使用media属性来指定用于不同的媒介时使用的样式. media属性值: 值 描述 screen 计算机屏幕显示(默认) tty 电传打字机以 ...

  5. thinkphp中使用phpexecl多表格应用

    去PHPExcel官网下载相应的版本,放到thinkphp3.2版本下的ThinkPHP/Library/Vendor/PHPExcel文件夹下  导出表格: //多个单元格(已测试) public ...

  6. [Shell]Bash基本功能:通配符与特殊符号

    /*------------------------------------------------------------------------------------------- @黑眼诗人 ...

  7. Intellij IDEA使用spring-boot-devtools无效解决办法(2018年3月9日11:46:00)

    步骤一:pom.xml中加入: <dependency> <groupId>org.springframework.boot</groupId> <artif ...

  8. ArcGIS案例学习笔记2_2_txtexcel空间可视化和空间插值

    ArcGIS案例学习笔记2_2_txt/excel空间可视化和空间插值 计划时间:第二天下午 教程:pdf page=337 数据:chapter8/ex4 方法: 1.加载xy.txt和gdp.tx ...

  9. windows中 git 命令使用记录

    建议国内开发安装淘宝npm镜像cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 或者每次执行安装时 npm ins ...

  10. SpringBoot 热启动

    在开发过程中,当写完一个功能我们需要运行应用程序测试,可能这个小功能中存在多个小bug,我们需要改正后重启服务器,这无形之中拖慢了开发的速度增加了开发时间,SpringBoot提供了spring-bo ...