文档的源代码地址,需要的下载就可以了(访问密码:7567)
https://url56.ctfile.com/f/34653256-527823386-04154f

正文:

官网找到类似实例, 适当分析,并且引入到HTML页面中

打开后,查看源码

去掉Title,剩下的引入到们的文件中

回到index.js文件中,编写立即执行函数

实例化对象

将前面的官网示例代码粘贴过来,完成配置指定

把配置给实例对象

查看效果

为了方便显示,删除3条线

删除后

查看效果

根据需求定制图表

需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。

查看效果

需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%

如果series对象有name值,则legend可以不用写data

查看效果

需求3: x轴相关配置

刻度去除

x轴刻度标签字体颜色:#4c9bfd

剔除x坐标轴线颜色(将来使用Y轴分割线)

轴两端是不需要内间距 boundaryGap

查看效果

需求4: y轴的定制

刻度去除

字体颜色:#4c9bfd

分割线颜色:#012f4a

查看效果

需求5:两条线形图定制

颜色分别:#00f2f1 #ed3f35

通过这个color修改两条线的颜色

把折线修饰为圆滑 series 数据中添加 smooth 为 true

查看效果

需求6: 配置数据

X轴上的数据

图标数据

查看效果

自适应

Echart可视化学习(七)的更多相关文章

  1. Echart可视化学习集合

    一.基本介绍:ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.ECharts最初由百度团队开源,并于2018年初捐赠给Apache ...

  2. Echart可视化学习(五)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 常见的数据可视化库: D3.js ...

  3. Echart可视化学习(一)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 创建需要的目录结构及文件 ...

  4. Echart可视化学习(二)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 页面主体部分 设置测试样式 ...

  5. Echart可视化学习(三)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 编写中间模块 添加显示样式 ...

  6. Echart可视化学习(四)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 地图模块高度为 810px ...

  7. Echart可视化学习(六)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 柱状图定制 官网找到类似实例, 适 ...

  8. Echart可视化学习(八)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 新增需求 点击 2020年 ...

  9. Echart可视化学习(九)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 官网找到类似实例, 适当分析,并且 ...

随机推荐

  1. kubeadm安装k8s集群

    安装kubeadm kubectl kubelet 对于Ubuntu/debian系统,添加阿里云k8s仓库key,非root用户需要加sudo apt-get update && a ...

  2. jenkins集成openldap

    参考图片 集成ldap参考链接:https://www.cnblogs.com/mascot1/p/10498513.html

  3. shell脚本 监控网卡信息

    一.简介 源码地址 日期:2018/6/22 介绍:显示实时输入输出流量 效果图: 二.使用 适用:centos6+ 语言:英文 注意:无 下载 wget https://raw.githubuser ...

  4. 追踪工具strace

    目录 一.简介 二.例子 找出程序读取的文件 查看现在程序在做什么 查看程序中哪个部分消耗大量cpu 无法连接服务器查看信息 一.简介 Linux 操作系统有很多用来跟踪程序行为的工具,内核态的函数调 ...

  5. HMAC在“挑战/响应”(Challenge/Response)身份认证的应用

    HMAC的一个典型应用是用在"挑战/响应"(Challenge/Response)身份认证中. 认证流程 (1) 先由客户端向服务器发出一个验证请求. (2) 服务器接到此请求后生 ...

  6. SWPUCTF_2019_login(格式字符串偏移bss段)

    题目的例行检查我就不放了,将程序放入ida中 很明显的值放入了bss段的格式字符串,所以我们动态调试一下程序 可以看到ebp这个地方0xffd0dd17-->0xffd0dd38-->0x ...

  7. &pwn1_sctf_2016 &ciscn_2019_n_1 &ciscn_2019_c_1 &ciscn_2019_en_2&

    在做buu题目的时候,发现在最上面有几道被各位师傅打到1分的题,强迫症逼迫我去做那几道题. 这里来试着去解决这些题...讲真的,我感觉自己刷题真的少,即使是很简单的栈题目,我还是能学习到新的东西.这里 ...

  8. JAVA开发 环境基础 IDEA 常用快捷键

    java 源代码运行必须先用javac编译生成字节码文件 XXX.class运行 java XXX 进行运行 环境变量classpath:已编译的字节码文件搜索路径--临时配置: set classp ...

  9. SpringBoot整合kafka的简单应用及配置说明

    引入依赖 <!-- https://mvnrepository.com/artifact/org.springframework.kafka/spring-kafka --> <de ...

  10. 海康威视Java SDK拉流(一)初始化SDK

    19年的时候做了一个视频分析的产品,用户使用的安防摄像机基本的都是海康大华宇视,今天写一下关于Java调用海康威视摄像机的demo,当时也踩了很多坑.写个博客记录一下 测试环境: 系统:Centos ...