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],

查看效果

反向坐标

查看效果