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

1. 修改默认配置

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

  1. splitLine: {
  2. show: false
  3. }

 b. 修改标题背景和颜色

      

  1. title: {
  2. backgroundColor: '#fff',
  3. textStyle: {
  4. fontWeight: 'normal',
  5. color: '#ff00ff'
  6. }
  7. }

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

    

  1. axisLine:{
  2. lineStyle:{
  3. color:'yellow',
  4. width:2
  5. }
  6. }

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

   

  1. grid: {
  2. left: '3%',
  3. right: '4%',
  4. bottom: '3%',
  5. containLabel: true,
  6. y: 10 // 设置从y为10开始
  7. }

e:设置y,x轴不显示

  1. xAxis: {
  2. show: false
  3. },
  4. yAxis: {
  5. show: false
  6. }

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

  1. yAxis: {
  2. axisTick:{
  3. show:false
  4. },
  5. axisLine:{
  6. lineStyle:{
  7. color:'#FF7B24',
  8. width:0
  9. }
  10. }
  11. }

h:设置tooltip提示框:

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

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

  

  1. series : [
  2. {
  3. name:'邮件营销',
  4. type:'line',
  5. smooth:true,
  6. stack: '总量',
  7. areaStyle: {normal: {}},
  8. data:[120, 132, 101, 134, 90, 230, 210]
  9. }
  10. ]

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

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

  

  1. data:[
  2. {
  3. value:335,
  4. name:'直接访问',
  5. itemStyle:{
  6. normal:{color:'gray'}
  7. }
  8. }
  9. ]

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. 【HANA系列】SAP HANA SLT 在表中隐藏字段并传入HANA的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SLT在表中隐 ...

  2. jvm的学习笔记:二、类的初始化,代码实战(1)

    对于静态字段来说,直接定义该字段的类才会被初始化 System.out.println(MyChild1.str); 输出: myParent1 static block hello myParent ...

  3. win10相机打不开,显示错误代码0xA00F4246(0x800706D9)

    有时我们在不知道什么情况下电脑便会变成这个样子,当我们以为是驱动问题的时候,或许我们可以使用下面的办法解决这个问题 方法: 1.WIN键+R打开命令端,输入regedit运行 2.进入 计算机\HKE ...

  4. 【Python开发】matplotlib绘图不显示问题解决plt.show()

    最近在看<Python数据分析>这本书,而自己写代码一直用的是Pycharm,在练习的时候就碰到了plot()绘图不能显示出来的问题.网上翻了一下找到知乎上一篇回答,试了一下好像不行,而且 ...

  5. 【DSP开发】【计算机视觉】EMCV:可在DSP上运行的OpenCV

    EMCV:可在DSP上运行的OpenCV EMCV项目主页: http://sf.net/projects/emcv EMCV全称为Embedded Computer Vision Library,是 ...

  6. 【Python开发】Url中文字符时记得转码edcode("utf-8")

    在url中使用中文其实是一个坏习惯,会带来一系列的转码问题, 我更喜欢英文译名或者id来标识某个uri.但是现实往往是残酷的, 特别是在我们调用别人服务时候,有时候被逼无奈使用中文URL. Pytho ...

  7. Object的构造函数方法

    参考自MDN Object 构造函数的方法 1.Object.assign() 将可枚举属性的值从一个或多个源对象复制到目标对象. 2.Object.create() 创建一个新对象,继承现有对象的构 ...

  8. Maven引入oracle驱动包

    1.下载驱动包 2.加载到本地maven库中 mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=1 ...

  9. MFC多线程的创建使用

    最近学习了MFC多线程的使用, 写了一个继承CWinThread类的类MyThread: 在头文件开头用#define定义一个线程函数入口地址(会在下面定义代码中写出) 在类的开头加上IMPLEMEN ...

  10. Java基础(那些习以为常缺不知道原理的地方)

    一.基础 1.1 正确的使用equals方法 Object的equals方法容易抛空指针异常,应使用常量或确定有值的对象来调用 equals.如下代码 // 不能使用一个值为null的引用类型变量来调 ...