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

    柱状图定制

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

    引入代码

    在之前的index.html中添加代码

    查看效果

    根据需求定制图表

    实例化对象

    指定配置和数据

    没有网的同学代码如下:

    把配置给实例对象同时让图表跟随屏幕自动的去适应

    查看效果

    需求1: 修改图形大小 grid

    查看效果

    需求2: 不显示x轴

    查看效果

    需求3: y轴相关定制

    不显示y轴线和相关刻度

    为了后续查看,把标题也去掉

    查看效果

    y轴文字的颜色设置为白色

    查看效果

    需求4: 修改第一组柱子相关样式(条状)

    查看效果

    设置第一组柱子内百分比显示数据

    查看效果

    设置第一组柱子不同颜色

    声明颜色数组

    给itemStyle里面的color属性设置一个 返回值函数

    查看效果

    需求5: 修改第二组柱子的相关配置(框状)

    查看效果

    需求6: 给y轴添加第二组数据

    将yAxis剪切备份走,准备基本结构

    把剪切的数据放回

    将第二组的数据改一下

    查看效果

    需求7: 设置两组柱子层叠以及更换数据

    // 给series 第一个对象里面的 添加

    yAxisIndex: 0,

    // 给series 第二个对象里面的 添加

    yAxisIndex: 1,

    // series 第一个对象里面的data

    data: [70, 34, 60, 78, 69],

    // series 第二个对象里面的data

    data: [100, 100, 100, 100, 100],

    // y轴更换第一个对象更换data数据

    data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],

    // y轴更换第二个对象更换data数据

    data:[702, 350, 610, 793, 664],

    查看效果

    反向坐标

    查看效果

  • 相关阅读:
    My 1st webUI try
    option(recompile)
    Add&Delete WindowService
    powershell
    bootstrap模态框,等待遮盖层
    spring-boot通过@Scheduled配置定时任务
    bootstrap-table的一些参数配置
    $('xx')[0].files[0]的意思
    Go国内镜像
    基础语法-defer使用(12)
  • 原文地址:https://www.cnblogs.com/bqwzy/p/15779166.html
Copyright © 2011-2022 走看看