关于Echarts柱状图实现的细节
echarts柱状图显示数值[1]
echarts2:
itemStyle : { normal: {label : {show: true, position: ‘top’}}},
echarts3:
label:{
normal:{
show: true,
position: ‘inside’}
},
echarts单个实例包含多个grid，标题分别居中[2]
一、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单个实例包含多个grid，标题分别居中</title>
</head>
<body>
<!-- 创建一个具备一定宽高的DOM容器 -->
<div id='main' style='width:600px;height:600px'></div>
<script type="text/javascript" src='./echarts.js'></script>
<script>
//基于创建好的DOM，初始化一个echarts实例
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var titles = ['气温变化','空气质量指数','C','D'];
var dataAll = [
[
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
[
[10.0, 9.14],
[8.0, 8.14],
[13.0, 8.74],
[9.0, 8.77],
[11.0, 9.26],
[14.0, 8.10],
[6.0, 6.13],
[4.0, 3.10],
[12.0, 9.13],
[7.0, 7.26],
[5.0, 4.74]
],
[
[10.0, 7.46],
[8.0, 6.77],
[13.0, 12.74],
[9.0, 7.11],
[11.0, 7.81],
[14.0, 8.84],
[6.0, 6.08],
[4.0, 5.39],
[12.0, 8.15],
[7.0, 6.42],
[5.0, 5.73]
],
[
[8.0, 6.58],
[8.0, 5.76],
[8.0, 7.71],
[8.0, 8.84],
[8.0, 8.47],
[8.0, 7.04],
[8.0, 5.25],
[19.0, 12.50],
[8.0, 5.56],
[8.0, 7.91],
[8.0, 6.89]
]
];
var markLineOpt = {
animation:false,
//图形上的文本标签
label:{
normal:{
formatter:'y=0.5*x+3',
textStyle:{
align:'right'
}
}
},
lineStyle:{
normal:{
type:'solid'
}
},
tooltip:{
formatter:'y=0.5*x+3'
},
data:[[{
//起点或终点的坐标
coord:[0,3],
symbol:'none'
},{
coord:[20,13],
symbol:'none'
}]]
}
var option = {
//分别设置标题居中主要代码
title:[
{
text:titles[0],
left:'25%',
top:'1%',
textAlign:'center'
},
{
text:titles[1],
left:'73%',
top:'1%',
textAlign:'center'
},
{
text:titles[2],
left:'25%',
top:'50%',
textAlign:'center'
},
{
text:titles[3],
left:'73%',
top:'50%',
textAlign:'center'
} ],
grid:[
{x:'7%',y:'7%',width:'38%',height:'38%'},
{x2:'7%',y:'7%',width:'38%',height:'38%'},
{x:'7%',y2:'7%',width:'38%',height:'38%'},
{x2:'7%',y2:'7%',width:'38%',height:'38%'}
],
tooltip:{
formatter:'Group {a}:({c})'
},
xAxis:[
{gridIndex:0,min:0,max:20},
{gridIndex:1,min:0,max:20},
{gridIndex:2,min:0,max:20},
{gridIndex:3,min:0,max:20}
],
yAxis:[
{gridIndex:0,min:0,max:15},
{gridIndex:1,min:0,max:15},
{gridIndex:2,min:0,max:15},
{gridIndex:3,min:0,max:15}
],
series:[
{
name:'I',
type:'scatter',
xAxisIndex:0,
yAxisIndex:0,
data:dataAll[0],
markLine:markLineOpt
},
{
name:'II',
type:'scatter',
xAxisIndex:1,
yAxisIndex:1,
data:dataAll[1],
markLine:markLineOpt
},
{
name:'III',
type:'scatter',
xAxisIndex:2,
yAxisIndex:2,
data:dataAll[2],
markLine:markLineOpt
},
{
name:'IV',
type:'scatter',
xAxisIndex:3,
yAxisIndex:3,
data:dataAll[3],
markLine:markLineOpt
}
]
};
//显示图表
myChart.setOption(option);
</script>
</body>
</html>
二、图表图片
原文出处：
[1] HiveDark, echarts柱状图显示数值, http://blog.csdn.net/u010989191/article/details/51502669
[2] 樱桃&丸子, echarts单个实例包含多个grid，标题分别居中, http://www.cnblogs.com/ytwanzi/p/6640989.html
关于Echarts柱状图实现的细节的更多相关文章
- 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柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts柱状图个数多，横坐标名称过长显示不全解决方法
当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...
- Flask插件wtforms、Flask文件上传和Echarts柱状图
一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...
- Echarts 柱状图配置详解
1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...
- ECharts柱状图
首先我们要先去Echarts 官网 根据自己需要的版本进行下载下载 下载完成后,我们在项目中引入echarts 随后创建容器来存放我们要添加的柱状图 容器创建完毕我们需要在js中设置他的属性和值 此配 ...
- echarts柱状图 渐变色
效果图: var xAxisData = []; var data = []; for (var i = 9; i < 16; i++) { xAxisData.push('5月' + i + ...
随机推荐
- Java 函数式编程--流操作
GitHub Page: http://blog.cloudli.top/posts/Java-函数式编程-流操作/ 外部迭代到内部迭代 在使用集合类时,通用的方式是在使用 for 循环集合上进行迭代 ...
- java报错 pom.xml第一行报"org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project...
https://www.cnblogs.com/appium/p/11168441.html 新建Maven项目时,每个pom文件第一行都报错. 一.问题分析 原因就是你的maven的配置文件不是最新 ...
- WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox
原文:WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox MVVMlight 实现依赖注入 把弹框功能 和接口功能注入到各个插件中 使用依赖注入 先把所有的ViewMo ...
- wcf序列化嵌套类（如TreeNode)异常原因
循环引用类在WCF中的传递 循环引用类在WCF中的传递问题,例如: [DataContract] public class AB { public string name { ...
- Windows Server - Tomcat服务器下载、安装、配置环境变量教程
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_40881680/articl ...
- Matlab空对象模式
在空对象模式(Null Object Pattern)中,一个空对象取代 NULL 对象实例的检查.Null 对象不是检查空值,而是反应一个不做任何动作的关系.这样的 Null 对象也可以在数据不可用 ...
- CTF-代码审计(2)
1.bugku 备份是个好习惯 网址:http://123.206.87.240:8002/web16/ 进去什么都没有,题目说备份想到备份文件,所以直接再后面加个 .bak 拿到源码: < ...
- Android Okhttp POST提交键值对
以前的项目网络连接那块一直坚持使用HttpClient,总是会出现一些莫名奇妙的问题,现在新的项目使用了OKHttp网络框架,发现超级好用,上网再了解下,发现OkHttp口碑真的不错,对比之下Http ...
- Linux的基本指令-Linux从入门到精通第二天(非原创)
文章大纲 一.指令与选项二.基础指令(重点)三.进阶指令(重点)四.学习资料下载五.参考文章 一.指令与选项 什么是Linux的指令?指在Linux终端(命令行)中输入的内容就称之为指令. 一 ...
- c# MVC5（一） 初步认识以及新建mvc
一:MVC5初始 1:广义MVC(Model--View-Controller): V是界面 : M是数据和逻辑 : C是控制,把M和V链接起来: 是程序设计模式,一种设计理念,可以有效的分离界面和业 ...