zoukankan      html  css  js  c++  java
  • Echart可视化学习(七)

    官网找到类似实例, 适当分析,并且引入到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轴上的数据

    图标数据

    查看效果

    自适应

  • 相关阅读:
    商人的诀窍 结构体
    商人的诀窍 结构体
    小泉的难题 结构体
    小泉的难题 结构体
    来淄博旅游 结构体
    来淄博旅游 结构体
    分类游戏 结构体
    7月20日学习
    7月19日学习
    7月18日学习
  • 原文地址:https://www.cnblogs.com/bqwzy/p/15779221.html
Copyright © 2011-2022 走看看