最近使用echarts可视化的业务,但是有一些配置项需要修改,把这段时间的学习总结一下

1. 修改默认配置

 a. 去掉分割线和网格线,在xAxis或者yAxis中设置  

    splitLine: {
show: false
}

 b. 修改标题背景和颜色

      

title: {
backgroundColor: '#fff',
textStyle: {
fontWeight: 'normal',
color: '#ff00ff'
}
}

 c. 设置坐标轴字体颜色和宽度,在xAxis或者yAxis中设置即可

    

axisLine:{
lineStyle:{
color:'yellow',
width:2
}
}

 d. 设置图形在页面出现的位置(一般处于中间)用于解决空间过小

   

grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
y: 10 // 设置从y为10开始
}

e:设置y,x轴不显示

xAxis: {
show: false
},
yAxis: {
show: false
}

f:y轴刻度线不显示,但是y轴字段显示

yAxis: {
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:'#FF7B24',
width:0
}
}
}

h:设置tooltip提示框:

  formatter 函数可以格式化默认的显示,用户可以在里面实现自己的显示数据

i: 设置折线图线条平滑,可以通过设置smooth:true 解决

  

series : [
{
name:'邮件营销',
type:'line',
smooth:true,
stack: '总量',
areaStyle: {normal: {}},
data:[120, 132, 101, 134, 90, 230, 210]
}
]

在echarts中没有设置颜色时,默认使用echarts中设置的颜色,但是有时需要根据业务需要对某些类型的数据设置固定的颜色,此时就需要对每个数据项设置所需的颜色

j: 饼图:给每个数据项设置颜色

  

data:[
{
value:335,
name:'直接访问',
itemStyle:{
normal:{color:'gray'}
}
}
]

echarts常用的配置项的更多相关文章

  1. spring 中常用的配置项

    1.spring 中常用的配置项 application.properties #端口 server.port=8081 #调试模式 debug=false #上下文 #一般情况下,小项目通常都是在t ...

  2. Echarts常用API(echarts和echartsInstance)

    一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...

  3. Echarts 常用API之action行为

    一.Echarts中的action echarts中支持的图表行为,通过dispatchAction触发. 1.highlight 高亮指定的数据图形 dispatchAction({ type: ' ...

  4. ThinkPHP - 常用的配置项

    <?php return array( // 设置禁止访问的模块列表 // 'MODULE_DENY_LIST' => array('Common','Runtime','Api'), / ...

  5. ECharts常用设置记录

    一.配置文档 http://echarts.baidu.com/option.html#title 二.属性配置 1.图表与边框容器距离. grid: { top: '10%', left: '70' ...

  6. echarts常用实例

    1.柱状图: 1.需要动态加载的参数是x轴以及柱状图的数值,legendData和seriesData.demo使用是可以直接写死参数,在执行this.initChart()方法即可.具体代码可以参数 ...

  7. 使用echarts常用问题总结

    1,echarts配合element ui的抽屉插件出现报错,上次解决方法是使用element ui 抽屉的open事件,让在打开事件重新加载,我们项目的需求是点击某个数据,要传递这条数据包含的其他值 ...

  8. echarts 部分美化配置项使用记录

    一.图表背景色配置项,如背景颜色渐变 https://www.echartsjs.com/zh/option.html#backgroundColor 二.图表中图形的颜色,如柱状图行采用渐变颜色显示 ...

  9. echarts常用功能封装|抽象为mixin

    目前已解锁以下功能: [x] 初始化echarts(initChart) [x] 获取echarts参数配置(getOption) [x] 生成echarts图表(setOption) [x] 监听r ...

随机推荐

  1. [转帖]Java 8新特性探究 前言

    Java 8新特性探究 前言 https://my.oschina.net/benhaile/blog/174136 讲下java的历史 感觉挺好的. 评论 17 jdk8java8javase新特性 ...

  2. python判断一个数是不是完全平方数

    思路: 完全平方数开根号后是一个整数,非完全平方数开根号的话是一个非整数 开根号后取整,如果开根号后是整数的话就不会改变值的大小 取整后再平方,如果值和之前一样,说明是完全平方数 import mat ...

  3. 设计模式:备忘录模式(Memento)

    个人比较喜欢玩单机游戏,什么仙剑.古剑.鬼泣.使命召唤.三国无双等等一系列的游戏我都玩过(现在期待凡人修仙传),对于这些游戏除了剧情好.场面大.爽快之外,还可以随时存档,等到下次想玩了又可以从刚开始的 ...

  4. Eclipse编写代码时代码自动补全 + 防止按空格自动补全

    都知道Eclipse中的自动补全代码是一个非常好用的工具 如下: 1.Windows——>Preferences——>Java–>Editor–>点击Content Asist ...

  5. C++多线程基础学习笔记(二)

    先总结延申以下前面(一)所讲的内容. 主线程从main()函数开始执行,我们创建的线程也需要一个函数作为入口开始执行,所以第一步先初始化函数. 整个进程是否执行完毕的标志是主线程是否执行完毕,一般情况 ...

  6. 学会这 2 点,轻松看懂 MySQL 慢查询日志

    MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...

  7. java知识点复习(1):

    1.java整形变量078:在java数字里数字表达式前面加上0表示8进制,因为8进制里表示数字只有0-7,所以这里的表达式有错误.相对而言,077就是合法的,转换成10进制就是63(7*8+7=63 ...

  8. 01 Mysql数据库初识

    一.数据库概述 1.什么是数据库? 什么是数据库呢? 先来看看百度怎么说的 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增.截取.更新.删除等操作. 所谓“ ...

  9. 06 Django之模型层---多表操作

    一 创建模型 表和表之间的关系 一对一.多对一.多对多 ,用book表和publish表自己来想想关系,想想里面的操作,加外键约束和不加外键约束的区别,一对一的外键约束是在一对多的约束上加上唯一约束. ...

  10. js 条件方法、数组方法

    经常写代码写的很多很累赘,看看下面例子,争取以后代码简洁简化.个人也觉得简洁分明的代码很重要. 本文来自另一篇博客:https://www.cnblogs.com/ljx20180807/p/1084 ...