echarts常用的配置项
最近使用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常用的配置项的更多相关文章
- spring 中常用的配置项
1.spring 中常用的配置项 application.properties #端口 server.port=8081 #调试模式 debug=false #上下文 #一般情况下,小项目通常都是在t ...
- Echarts常用API(echarts和echartsInstance)
一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...
- Echarts 常用API之action行为
一.Echarts中的action echarts中支持的图表行为,通过dispatchAction触发. 1.highlight 高亮指定的数据图形 dispatchAction({ type: ' ...
- ThinkPHP - 常用的配置项
<?php return array( // 设置禁止访问的模块列表 // 'MODULE_DENY_LIST' => array('Common','Runtime','Api'), / ...
- ECharts常用设置记录
一.配置文档 http://echarts.baidu.com/option.html#title 二.属性配置 1.图表与边框容器距离. grid: { top: '10%', left: '70' ...
- echarts常用实例
1.柱状图: 1.需要动态加载的参数是x轴以及柱状图的数值,legendData和seriesData.demo使用是可以直接写死参数,在执行this.initChart()方法即可.具体代码可以参数 ...
- 使用echarts常用问题总结
1,echarts配合element ui的抽屉插件出现报错,上次解决方法是使用element ui 抽屉的open事件,让在打开事件重新加载,我们项目的需求是点击某个数据,要传递这条数据包含的其他值 ...
- echarts 部分美化配置项使用记录
一.图表背景色配置项,如背景颜色渐变 https://www.echartsjs.com/zh/option.html#backgroundColor 二.图表中图形的颜色,如柱状图行采用渐变颜色显示 ...
- echarts常用功能封装|抽象为mixin
目前已解锁以下功能: [x] 初始化echarts(initChart) [x] 获取echarts参数配置(getOption) [x] 生成echarts图表(setOption) [x] 监听r ...
随机推荐
- 通过URLOS安装Redis缓存为wordpress网站提速
快!快!快!我们都知道网站的加载速度直接影响用户体验.据研究发现,网站页面在3秒内加载完毕对用户而言是最佳的浏览体验.如果超过这个时间,用户跳出网站的几率会非常大.所以对于站长来说,提高速度是他们追求 ...
- linux运维、架构之路-Lnmp架构部署
一.Lnmp架构原理 二. Lnmp架构软件安装 1.Nginx安装脚本 #!/bin/bash useradd -s /sbin/nologin -M www mkdir -p /server/to ...
- 强大的项目管理工具maven
大概功能:构建项目,管理jar包,编译代码,自动运行单元测试.打包.生成报表,部署项目,生成web站点. 重要功能:依赖管理(maven对jar包的管理过程,能够大大的节约磁盘空间).项目的一键构建. ...
- Eclipse中导入Maven Web项目并配置其在Tomcat中运行
今天因为实习的关系需要讲公司已经开发的项目导入进Eclipse,而公司的项目是用Maven来构建的所以,需要将Maven项目导入进Eclipse下. 自己因为没有什么经验所以搞了得两个多小时,在这里和 ...
- [BZOJ 1563] [NOI 2009] 诗人小G(决策单调性)
[BZOJ 1563] [NOI 2009] 诗人小G(决策单调性) 题面 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以放的句子数目是没有限制的.小 G ...
- 2019年8月22日 星期四(怎样成为PHP大牛)
1.服务器方面,各种PHP部署方案烂熟,Lvs,keepalived,nginx,apache,docker,换句话说其战力值相当于一个高级运维,迅速定位并排除PHP运行中的各种问题. 2.数据库方面 ...
- python之成像库pillow
目录 python之成像库pillow 官方文档 图像模块(Image.Image) Image模块的功能 Image.new(mode,size,color): Image.open(file,mo ...
- ubuntu 16.04下ssh访问提示错误
liuyan@ubuntu:/etc/init.d$ sudo apt-get install openssh-server -yReading package lists... DoneBuildi ...
- SpringBoot + Vue + nginx项目部署(零基础带你部署)
一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...
- docker下进去mysql 编写语句
设置密码可使用 docker exec -it mysql01 bash --mysql01:数据库名字 mysql -u root -p ALTER USER 'root'@'%' I ...