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
                    }
                }
    }

d:设置tooltip提示框:

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

原文地址:https://www.cnblogs.com/goddess/p/8145795.html

时间: 2024-10-14 21:12:14

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

echarts常用说明

import { Injectable } from '@angular/core'; //模板option通用 let fff7 = '#fff'; //字体统一颜色rgba(255,255,255,0.7) let fs = 14; //图表统一字体大小 let COLOR = ['#FBA3BC', '#0C8AEB', '#2EEA07', '#D74D0A', '#BE8EDE', '#66cccc', '#ff6666', '#cc3399', '#499FD9']; //主体颜色

Nginx基础入门之gzip常用配置项说明

在很多大型的网站中,web资源内容压缩是很有必要的,一来减少宽带的占用,二来提高高server处理性能,在nginx中有一个单独的模块是来处理web资源压缩机制,即ngx_gzip_module ,下面我们来讲解一下关于gzip模块一些常用的配置项参数说明 一.ngx_http_gzip_module模块配置项介绍说明 1.1 gzip 配置语法: gzip  on|off 默认值:  gzip  off 配置区域: http ,server, location ,  if 配置项说明: 是否开

echarts——各个配置项详细说明总结

  前  言    最近做了个关于各种图表的项目,用到了echarts , 关于各个配置项刚开始用好多都不懂,有些地方需要改不知道改哪个参数,就在网上查了各种,总结规整了一下,跟大家分享学习一下.(echarts官网也有配置项说明文档.) 以上就是echarts的几个原型图,但是在实际开发当中,我们需要的图表与echarts本身给出的实例是不同的,需要我们自己进行修改,所以我归纳整理了一下,希望可以跟大家分享学习~ 1.图表标题 1 title: { 2 x: 'left', // 水平安放位置

echarts 总结

Echarts Echarts 相关文档 0.1 官网 http://echarts.baidu.com 0.2 配置项 http://echarts.baidu.com/option.html 0.3 API http://echarts.baidu.com/api.html 一些常用的配置项 2.1   title 设置图表的标题 2.2   tooltip 图表上的提示框 其中,有一个formatter配置项,可以配置显示的内容,具体的配置方法,参考上面的文档 2.3   legend 图

Spring常用配置示例

Spring 是一款Java平台的开源框架,是为解决企业级应用程序开发的复杂性而创建的,通过良好的分层架构让开发人员能够专注于业务逻辑的开发. Spring框架是一个分层架构,由不同的模块组成,构成spring的每个组件或模块都可以单独使用或者多个模块配合使用,以实现不同的功能需求.Spring框架的模块结构如下图所示: SpringCore是Spring框架的核心模块,提供spring框架的基本功能,使用工厂模式BeanFactory通过控制反转(IoC).依赖注入(DI)等实现对beans的

express的基本配置项

express自动生成的app.js中有一段代码用app.set和app.use对express进行配置,但这些配置都是什么意思,以及都能做哪些配置并没有展开.这一节就专门来讲express的配置.上节已经介绍了几个设置,接下来先介绍剩下的几个: app.use(express.favicon()); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser('yo

SpringMVC 常用配置说明

springMVC配置用法的文章很多,但具体描述清楚的不多,这里主要介绍下常用的配置项的用法,以及它的解析类,springMVC处理内容有两种方式,一种是converter,另一种是ViewResolver,两种都能处理json,xml以及form内容格式. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <beans xmlns="http://www.s

Highmaps网页图表教程之图表配置项结构与商业授权

Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌握图表配置项结构是非常重要.本节将大致讲解结构框架,便于读者后续深入. Highmaps基本结构 了解结构的最直接方式,就是看官网API.官方API详细列出了公开的配置项信息.查看官网API有两种方式: q  第一种是直接访问官网提供的API,网址为http://api.highcharts.com

自主封装hooks+echarts(超详细介绍)开箱即用框架

前言 react的hooks兴起之后,我们开始了新技术的探研,重新构建了以react,hooks,echarts为基准的框架,对可视化的封装.开箱即可用,非常实用,特别是如果对echarts有需求的. 项目介绍 hooks刚出来时我们就在使用,已经踩了很多坑而完善了这一整套开箱即用的框. 针对echarts进行了封装,菜单栏.面包屑等都做了自己的封装,对于icon都真正意义上进行了按需加载. 对于echarts常用的,都做了很详细的注释说明,小白也都能很快上手. 对自己项目需求但是不常用的进行了