目前,项目中涉及到图表的,使用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常用方法(一)的更多相关文章

  1. echarts常用方法,legend状态支持两张图片切换(四)

    在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件 let lgdt ...

  2. echarts常用方法,饼图切换圆环中文字(三)

    在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...

  3. echarts常用方法,item小坑(二)

    在echarts折线图使用过程中,我们会遇到折线拐点symbol的问题.这个问题是在版本3.8.5引用时发现的.折线图在支持legend显示的情况下需要考虑. 问题描述如下:如果采用echarts提供 ...

  4. ECharts使用心得

    ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...

  5. 基于Servlet的Echarts例子(2018-12-26更新)

    引子 ECharts是百度出品的,一个使用 JavaScript 实现的开源可视化库.程序员在Web页面上引入并稍作配置就能做出漂亮的数据图表. 本篇文章简单介绍一下如何在JSP中使用Echarts, ...

  6. 一起来玩echarts系列(一)------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  7. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  9. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

随机推荐

  1. 第一次安装myeclipse+tomcat经验

    在网上找了很多资料,这里记录一下验证有用的资料,避免以后走弯路 1.安装myeclipse 参考如下URL,亲测有用 https://blog.csdn.net/qingjianduoyun/arti ...

  2. [小程序] 微信小程序 picker 中range-key中必须带单引号

    原文地址:http://blog.csdn.net/u012329294/article/details/74906504 <view class="section"> ...

  3. RNA-seq workflow

    SRAtoolkit download .fa http://www.genomicdataanalysis.com/genomicdatatype/rna-seq/

  4. 向 Nginx 主进程发送 USR1 信号

    [1]Nginx重新打开日志文件 向 Nginx 主进程发送 USR1 信号.USR1 信号是重新打开日志文件: 方式一: kill -USR1 $(cat /usr/local/lib/ubcsrv ...

  5. angularjs简单介绍和特点

    首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, se ...

  6. 第一个Python游戏窗口

    不废话,撸起袖子就是干. import pygame import sys pygame.init(); caption=pygame.display.set_caption("Python ...

  7. 【融云分析】 IM 即时通讯之链路保活

    众所周知,IM 即时通讯是一项对即时性要求非常高的技术,而保障消息即时到达的首要条件就是链路存活.那么在复杂的网络环境和国内安卓手机被深度定制化的条件下,如何保障链路存活呢?本文详解了融云安卓端 SD ...

  8. Porsche Piwis Tester II V15.6 with CF30 Laptop or Lenovo E49AL Laptop

    Some of my customers let me recommended which auto diagnostic tool is good for Porsche , I recommend ...

  9. 在mysql 中使用utf8的问题

    在MapReducer插入mysql 遇到了 Incorrect string value: '\xF0\x9F\x98\xAD",...' for column 'commentConte ...

  10. 利用phpspider爬取网站数据

    本文实例原址:PHPspider爬虫10分钟快速教程 在我们的工作中可能会涉及到要到其它网站去进行数据爬取的情况,我们这里使用phpspider这个插件来进行功能实现. 1.首先,我们需要php环境, ...