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可视化学习笔记(六)文章插图