柱状图定制
官网找到类似实例， 适当分析，并且引入到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],
查看效果
反向坐标
查看效果
