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: ...
随机推荐
- Django权限auth模块详解
转自:http://www.cnblogs.com/Finley/p/5575305.html 1,auth模块是Django提供的标准权限管理系统,可以提供用户身份认证,用户组和权限管理 2,aut ...
- openvpn 批量生成用户脚本
#/bin/bash for user in "$@" do echo "新增用户:$user" if [ -d "/etc/openvpn/clie ...
- 解决linux中ssh登录Warning:Permanently added (RSA) to the list of known hosts
原因: 在执行scp id_rsa.pub root@hostname:/root/.ssh这一步时,没在本机的/root/.ssh下生成known_hosts文件. 解决方案: vi /etc/ss ...
- js 替换字符串中所有匹配的字符
var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var str2 = ...
- LeetCode OJ 143. Reorder List(两种方法,快慢指针,堆栈)
Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...
- MVC 2nd
步骤 3 创建控制器. StudentController.java public class StudentController { private Student model; private S ...
- centos 下安装redis
一.安装redis 第一步:下载redis安装包 redis下载地址 wget http://download.redis.io/releases/redis-5.0.3.tar.gz 第二步:解压压 ...
- js基础-单体对象日期对象
Math对象 全局对象 日期对象 var t = new Date() t.toLocaleDateString(); t.getFullYear(); t.getMonth() + 1 t.getD ...
- OpenCV 调用双摄像头
#include <opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespace std ...
- TF-IDF原理及使用
1.TF-IDF(Term Frequency-Inverse Document Frequency, 词频-逆文件频率).(逆文档词频) 2.自我理解: 公式TF = $$\frac{语料库中关键词 ...