echarts单个实例包含多个grid，标题分别居中

一、实现代码

<!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>

二、图表图片

转载于:https://www.cnblogs.com/ytwanzi/p/6640989.html

echarts单个实例包含多个grid，标题分别居中相关推荐

php jmail 乱码,ASP实例：解决Jmail发送邮件标题出现乱码
ASP实例:解决Jmail发送邮件标题出现乱码 (2011-08-29 10:02:00) 标签: 邮件服务器邮件标题乱码网页设计 gb2312 it 做JMAIL发邮件的时候,接收到的邮件标题 ...
【有问不答】非白色光斑的检测（单个实例）
[有问不答]非白色光斑的检测(单个实例) 分析图像开整其他 by 今天不飞了课代表已经成功掌握了光斑中心定位方法,但是新的麻烦来了,目标光斑检测不出来--我当然也不会,只能一起看看怎么解决分析 ...
博途软件中多重背景块的建立_如何正确的理解西门子博途中的—单个实例和多重实例的区别...
启程自动化培训-工业机器人实训基地www.qichengplc.com 1:我们在博途中先新建一个工程,并且建立一个FB块名字为Motor,里面写上我们编程里常用的自锁回路如下图所示: 2:我们在 ...
ECharts饼图实例
ECharts饼图实例 1.引入jQuery的js文件 2.引入echarts的js文件 test.html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证如下图别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...
Button 图片和标题位置居中问题
针对按钮的图片和标题的居中问题, 像微信公众帐号带有二级菜单的按钮,图片和标题合起来居中,这就用到了,button.title 和button.image 以及他们的 edgeInsets 以下是文本 ...
echarts画图实例讲解
前两天分享了一个项目(http://hyuhan.com/2016/11/17/A-data-display-platform/),里面用到了echarts(一个纯Javascript的图表库)来画图 ...
Echarts 入门实例--金山打字折线图
简介: Echarts 的文档实在有点难读,咋们还是在心情平静或者有需要的时候去读一读,当然编程是一门实践的技术,所以还是写个简单的demo来得实在一些.因为我最近再用金山打字练习打字所以就拿来其中一 ...
echarts图表实例
这段时间以前的UI回来了,我比较喜欢她的设计,哈哈~这次她设计了几个图表,感觉还是很好看的,所以我写好代码就想分享上来~ 这里主要分享四个,先放上效果图,感兴趣的可以继续往下看哦,后面会分别放上效果图 ...
python前端框架实例_Python数据可视化：PyQt5 + ECharts框架实例
引言对于Python下桌面软件的开发已经有了很多数据可视化的库,如Matplotlib.Seaborn.Pyqtgraph.Plotly等等,但这些库更适合于后端程序员的软件开发. 实际上在前端网页 ...

echarts单个实例包含多个grid，标题分别居中

一、实现代码

二、图表图片

echarts单个实例包含多个grid，标题分别居中相关推荐

最新文章

热门文章