文档的源代码地址，需要的下载就可以了（访问密码：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. Mysql配置 主从同步

    目录 一.准备 二.操作 主数据库操作 从服务器操作 一.准备 1.主从数据库版本最好一致 2.主从数据库内数据保持一致,若不一致,可将从库中所有数据删除,并将主库全部数据导入进去 主数据库:182. ...

  2. 魅族CMDB运维自动化实践

    一.简介 原创:梁鹏 本文是根据魅族系统架构师梁鹏10月20日在msup携手魅族.Flyme.百度云主办的第十三期魅族技术开放日< 魅族CMDB运维自动化实践>演讲中的分享内容整理而成. ...

  3. AT2202 硬度フェスティバル / Kode Festival 题解

    Content 有 \(2^n\) 块石头,第 \(i\) 块石头硬度为 \(a_i\).重复执行以下操作直到只剩下一块石头为止: 让当前编号为 \((1,2)\).\((3,4)\).-- 的石头互 ...

  4. CF742B Arpa's obvious problem and Mehrdad's terrible solution 题解

    Content 有一个长度为 \(n\) 的数组,请求出使得 \(a_i \oplus a_j=x\) 且 \(i\neq j\) 的数对 \((i,j)\) 的个数.其中 \(\oplus\) 表示 ...

  5. linux服务器加入AD域（sssd）~ 通过域用户ssh登录加域的linux服务器

    搭建域控:参考 https://www.cnblogs.com/taosiyu/p/12009120.html 域控计算机全名: WIN-3PLKM2PLE6E.zhihu.test.com 域:zh ...

  6. Linux(debian7)操作基础（四）之CPU频率调整 Linux系统CPU频率调整工具使用

    在Linux中,内核的开发者定义了一套框架模型来完成CPU频率动态调整这一目的,它就是CPU Freq系统.如下为CPU的几种模式(governor参数): ondemand:系统默认的超频模式,按需 ...

  7. 利用struts2上传文件时，如果文件名中含有-符号，那么会出错

    利用struts2上传文件时,如果文件名中含有-符号,那么会出错 报错如下: HTTP Status 500 - C:\Program Files\Apache Software Foundation ...

  8. libevent源码学习（17）：缓冲管理框架

    目录Libevent缓冲区类型Libevent缓冲区结构缓冲区的读出与写入缓冲区的读入与写出缓冲区水位机制缓冲区回调机制延迟回调机制Libevent缓冲区类型       Libevent中提供了多种 ...

  9. Android4.4开机动画播放视频

    Android4.4系统启动时,播放自定义bootanimation.zip动画时,由于分辨率为1280x720,bootanimation.zip包也很大,播放太卡,所以将开机动画修改为播放视频.如 ...

  10. mac学习Python第一天：安装、软件说明、运行python的三种方法

    一.Python安装 从Python官网下载Python 3.x的安装程序,下载后双击运行并安装即可: Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的. MAC 系统一般 ...