江苏龙网

  1. 首页 > 人文 > >

Echart可视化学习笔记（六）( 二 )


设置第一组柱子不同颜色
声明颜色数组
Echart可视化学习笔记（六）文章插图
给itemStyle里面的color属性设置一个 返回值函数
Echart可视化学习笔记（六）文章插图
查看效果
Echart可视化学习笔记（六）文章插图
需求5： 修改第二组柱子的相关配置（框状）
Echart可视化学习笔记（六）文章插图
查看效果
Echart可视化学习笔记（六）文章插图
需求6： 给y轴添加第二组数据
将yAxis剪切备份走 ， 准备基本结构
Echart可视化学习笔记（六）文章插图
把剪切的数据放回
Echart可视化学习笔记（六）文章插图
将第二组的数据改一下
Echart可视化学习笔记（六）文章插图
查看效果
Echart可视化学习笔记（六）文章插图
需求7： 设置两组柱子层叠以及更换数据
// 给series 第一个对象里面的 添加
yAxisIndex: 0,
Echart可视化学习笔记（六）文章插图
// 给series 第二个对象里面的 添加
yAxisIndex: 1,
Echart可视化学习笔记（六）文章插图
// series第一个对象里面的data
data: [70, 34, 60, 78, 69],
Echart可视化学习笔记（六）文章插图
【Echart可视化学习笔记（六）】// series第二个对象里面的data
data: [100, 100, 100, 100, 100],
Echart可视化学习笔记（六）文章插图
// y轴更换第一个对象更换data数据
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
Echart可视化学习笔记（六）文章插图
// y轴更换第二个对象更换data数据
data:[702, 350, 610, 793, 664],
Echart可视化学习笔记（六）文章插图
查看效果
Echart可视化学习笔记（六）文章插图
反向坐标
Echart可视化学习笔记（六）文章插图
Echart可视化学习笔记（六）文章插图
查看效果
Echart可视化学习笔记（六）文章插图


推荐阅读


上一篇：航天信息大数据面试题

下一篇：5G高低频组网，到底是什么意思？