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

柱状图定制

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

查看效果

反向坐标

查看效果

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. Linux内核启动流程(简介)

    1. vmlinux.lds 首先分析 Linux 内核的连接脚本文件 arch/arm/kernel/vmlinux.lds,通过链接脚本可以找到 Linux 内核的第一行程序是从哪里执行的: 第 ...

  2. RDS备份到OSS增量+全量

    一.前言 阿里云的RDS备份是占用使用量的,你购买200G那备份使用量是100G左右,导致备份一般也就存半个月,2个全备份. 那半个月后之前的也就删除了,如果要持续保留更久将花费不少的金钱.所以这里用 ...

  3. Python把两个列表索引相同的值相加

    方案一 list1=[1,2,3,4,5] list2=[6,7,8,9,10] list3=[] list3=[i + j for i, j in zip(list1, list2)] print( ...

  4. Elasticsearch核心技术(四):索引原理分析

    本文探讨Elasticsearch的数据请求.路由和写入过程的原理,主要涉及ES的分布式存储架构.节点和副本的写入过程.近实时搜索的原因.持久化机制等. 4.1 ES存储架构 我们经常说,看一件事情千 ...

  5. Three.js 实现3D全景侦探小游戏🕵️

    背景 你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石‍提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three ...

  6. python之异步编程

    一.异步编程概述 异步编程是一种并发编程的模式,其关注点是通过调度不同任务之间的执行和等待时间,通过减少处理器的闲置时间来达到减少整个程序的执行时间:异步编程跟同步编程模型最大的不同就是其任务的切换, ...

  7. 区块链开发学习第七章:第一个Dapp-猜拳游戏

    第一个简单的Dapp-猜拳游戏.本智能合约的功能很简单,就是用户与电脑猜拳,用户选择出手后,电脑随机一个选项,然后调用智能合约方法把两个选项值传过去,在智能合约上进行比较,并通过区块链合约事件广播结果 ...

  8. Python的 垃圾回收机制

    垃圾回收 1. 小整数对象池 整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池, 避免为整数频繁申请和销毁内存空间. Python 对小整数的定义是 [-5, 257) 这些整 ...

  9. 【LeetCode】365. Water and Jug Problem 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 数学题 相似题目 参考资料 日期 题目地址:http ...

  10. 【LeetCode】309. Best Time to Buy and Sell Stock with Cooldown 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetc ...