echarts常用方法(一)
目前,项目中涉及到图表的,使用echarts的频率较多,因为UI设计一般不会考虑到是否能实现的问题,他们专注的只是显示的效果。所以作为前端开发,要对echarts进行不同程度的改造,组合,甚至重写等。接下来会根据我目前的接触到的问题,进行一个循序渐进的总结。因为echart版本的升级等问题,虽说会兼容低版本,但是部分写法依旧在新版本的效果与老版本有区别。以下方法大家只作为参考,版本的不兼容导致写法不同的话,只能靠大家发现。
1.x轴文本换行、调整旋转角度、文本不同颜色
axisLabel: {
interval: '0',
rotate: 45,
textStyle: {
fontSize: 10,
color:"#666666"
color:function (xdata) {
return xdata.indexOf('时')<=-1 ? '#E87731' : '#F2F2F2';
}
},
formatter: function (value, index) {
var arr = value.split(' ');
return arr[0]+'\n'+arr[1];
}
}
2.柱状图渐变+不同色
if(params.dataIndex > 6){
return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset:0,color:colorList[1][0]},
{offset:1,color:colorList[1][1]}
])
}else{
return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset:0,color:colorList[0][0]},
{offset:1,color:colorList[0][1]}
])
}
3.对没有y轴线,只显示label标签的样式
yAxis: [
{
type: 'category',
axisTick : {show: false},
axisLine: {
lineStyle:{
color:'#527877',
opacity:0
}
},
axisLabel: {
color:'#527877'
},
data: ['榆林市','安康市','宝鸡市','商洛市','铜川市','咸阳市','西安市']
},
]
opacity:0
4.后台报错
如果报错为,该节点已经创建过dom,则需要先销毁再加载chart
echarts.dispose(chartView);
chartView是chart容器的ID
echarts常用方法(一)的更多相关文章
- echarts常用方法,legend状态支持两张图片切换(四)
在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件 let lgdt ...
- echarts常用方法,饼图切换圆环中文字(三)
在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...
- echarts常用方法,item小坑(二)
在echarts折线图使用过程中,我们会遇到折线拐点symbol的问题.这个问题是在版本3.8.5引用时发现的.折线图在支持legend显示的情况下需要考虑. 问题描述如下:如果采用echarts提供 ...
- ECharts使用心得
ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...
- 基于Servlet的Echarts例子(2018-12-26更新)
引子 ECharts是百度出品的,一个使用 JavaScript 实现的开源可视化库.程序员在Web页面上引入并稍作配置就能做出漂亮的数据图表. 本篇文章简单介绍一下如何在JSP中使用Echarts, ...
- 一起来玩echarts系列(一)------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
随机推荐
- Python实现图像边缘检测算法
title: "Python实现图像边缘检测算法" date: 2018-06-12T17:06:53+08:00 tags: ["图形学"] categori ...
- VS2015右键集成TortoiseGit
先上效果 再说步骤 1.安装VS TortoiseGit等~~ 2.以外部工具方式调用TortoiseGit 3.在VS中设置右键菜单 在菜单栏下方右键,选择自定义 在弹出窗口中选择,命令->上 ...
- python多线程不能利用多核cpu,但有时候多线程确实比单线程快。
python 为什么不能利用多核 CPU GIL 其实是因为在 python中有一个 GIL( Global Interpreter Lock),中文为:全局解释器锁. 1.最开始时候设计GIL是 ...
- 下拉框click事件与搜索框blur事件的爱恨纠葛
还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...
- shell的打印菜单
#!/bash/bin cat << EOF #EOF是变量,可随便设置,但标准是EOF 1)hello world. 2)你好,世界. EOF
- 用keytool制作证书并在tomcat配置https服务(二 )
用keytool制作证书并在tomcat配置https服务(一) 双向认证: 我们上边生成了服务端证书,并发送给客户端进行了验证. 双向认证是双向的,因此还差客户端证书. 1.为方便导入浏览器,生成p ...
- Prometheus监控学习笔记之Prometheus从1.x升级到2.x
详细参考这篇文章 https://cloud.tencent.com/developer/article/1171434 prometheus 2.0于2017-11-08发布,主要是存储引擎进行了优 ...
- 施密特正交化 GramSchmidt
施密特正交化 GramSchmidt 施密特正交化的原名是 Gram–Schmidt process,是由Gram和schmidt两个人一起发明的,但是后来因为施密特名气更大,所以该方法被简记为施密特 ...
- Guitar Pro中如何添加与删除音轨
Guitar Pro是一款专业的吉他打谱作曲软件,适合每一位热爱吉他并想进一步学习的大家.今天,我们一起来看看Guitar Pro软件写谱时音轨如何添加与删除. Guitar Pro能够同时支持虚拟音 ...
- CF666E Forensic Examination
思路 线段树合并+广义SAM 先把所有串都插入SAM中,然后用线段树合并维护right集合,对S匹配的同时离线询问,然后就好啦 代码 #include <cstdio> #include ...