目前,项目中涉及到图表的,使用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. VMware Workstation 14永久激活密钥

    VMware Workstation是一款功能强大的桌面虚拟计算机软件,简单来说就是最强的中文虚拟机了,可以在桌面上运行不同的操作系统 VMware workstation 14永久激活密钥 : CG ...

  2. 20175208 张家华 MyCP

    一.内容 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容为 ...

  3. laravel-admin 上传图片过程中遇到的问题

    1. 报错 Disk [admin] not configured, please add a disk config in `config/filesystems.php`. 在config/fil ...

  4. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  5. vue中路由跳转的底层原理

    前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来.改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2. 使用H5的wind ...

  6. 基于OpenCV做“三维重建”(3)--相机参数矩阵

    通过前面的相机标定,我们能够获得一些参数模型.但是这些相机的参数矩阵到底是什么意思?怎样才能够判断是否正确?误差都会来自哪里?这里就必须要通过具体实验来加深认识.采集带相机参数的图片具有一定难度,幸好 ...

  7. Oracle插入语句日期格式设置

    insert into test values (1,'2015-01-01'); 直接设置成字符串,会报出“文字与格式字符串不匹配”的异常: 如果正确插入,则要将字符型数据转成日期型数据: 1 in ...

  8. Hive性能优化上的一些总结

    https://blog.csdn.net/mrlevo520/article/details/76339075 1.介绍 首先,我们来看看Hadoop的计算框架特性,在此特性下会衍生哪些问题? 数据 ...

  9. Oh-My-Zsh及主题、插件安装与配置

    切换zsh Manjaro linux默认安装了zsh,其他可能需要先安装 cat /etc/shells #查看本地有哪几种shell chsh -s /bin/zsh #切换到zsh 默认终端启动 ...

  10. npm 是node.js下带的一个包管理工具

    npm 是node.js下带的一个包管理工具          npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...