Echarts 图表位置调整
Echarts 图表的位置调整
折线图和柱状图,通过grid属性调整。
grid:{
show:false,
top:'20%',
right:'5%',
bottom:'10%',
left:'10%'
},
其中数值可以是像素值,也可以是百分比。
下图为上下左右皆为5%的情形。
饼图,通过series中的center属性调整。
饼图使用grid属性无法调整,需要使用series中的center属性,
默认center属性为[‘50%’,‘50%],上图中30%,60%效果如下:
其他问题:
饼图中可用@[n]和@name 两种方式获取数据序列中的值,如下面代码
label: {
show: false,
position: 'center',
fontSize:'80',
// 使用@[1]获取值
// formatter:'{b}:{@[1]}'
},
emphasis: {
label: {
show: true,
fontSize: '50',
fontWeight: 'bold',
// 使用@峰电获取值
formatter:'{b}:{@峰电}'
}
},
labelLine: {
show: false
},
但由于使用Razor构建前端页面,@与饼图中的@冲突,[]亦和Razor语法冲突。
解决办法,使用@@,不使用[],如下代码,可以正常工作。
label: {
show: false,
position: 'center',
fontSize: '80',
//不能工作
@*formatter:'{b}:{@@[1]}'*@
},
emphasis: {
label: {
show: true,
fontSize: '22',
fontWeight: 'bold',
// 可以正常工作
formatter:'{b}:{@@峰电}'
}
},
Echarts 图表位置调整的更多相关文章
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line,Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- Echarts图表统计学习
史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
随机推荐
- MySQL中的字段拼接 concat() concat_ws() group_concat()函数
1.concat()函数 2.concat_ws()函数 3.group_concat()函数 操作的table select * from test_concat order by id limit ...
- js 简单实现获取短信按钮倒计时60秒
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content- ...
- Sharding+SpringBoot+Mybatis 读写分离
基于Sharding JDBC的读写分离 1.引入pom.xml <dependencies> <!-- mybatis --> <dependency> < ...
- python3安装pp过程
并行计算的目的是将所有的核心都运行起来以提高代码的执行速度,在python中由于存在全局解释器锁(GIL)如果使用默认的python多线程进行并行计算可能会发现代码的执行速度并不会加快,甚至会比使用但 ...
- 高校表白App-团队冲刺第五天
今天要做什么 封装Adapter制作引导页 今天做了什么 成功封装工具类,为以后的轮播做了铺垫 遇到的问题 在封装时采用数组容器进行操作,只能添加图片作为元素,对于layout不可加入
- [刘阳Java]_Spring入门_第1讲
Spring框架在企业中的使用非常多,优势明显.所以学好Spring框架肯定不言而喻.今天我们给大家介绍Spring的入门 1. 对于初学者来说我们要学习Spring框架中的哪些技术,这个有必要了解一 ...
- CentOS 7命令行修改网卡名称
在CentOS学习中,配置多个网卡,配置独立的IP地址,为网卡设置新的名称等,已经是必备技能,经小编亲测,以下方法能修改系统的网卡名称,操作步骤和截图一并和小伙伴们分享, 希望对大家的学习和使用有所帮 ...
- POJ1456 Supermarket 题解
思维题. 关键在于如何想到用堆来维护贪心的策略. 首先肯定是卖出的利润越大的越好,但有可能当前这天选定了利润最大的很久才过期而利润第二大的第二天就过期,这时的策略就不优了. 所以我们必须动态改变策略, ...
- Mac终端美化(iterm2+zsh+oh-my-zsh+powerlevel10k)
iterm2+zsh+oh-my-zsh+powerlevel10k 一.下载iterm2 方式一:官网下载 https://iterm2.com/ 方式二:百度云下载 链接: https://pan ...
- THE MINTO PYRAMID PRINCIPLE
金字塔原理:(重点突出,逻辑清晰.层次分明,简单易懂的思考方式.沟通方式.规范的动作.) 结构:结论先行,以上统下,归类分组,逻辑递进.先重要后次要,先总结后具体,先框架后细节,先结论后原因,先结果后 ...