【Echarts系列】—echarts柱状图配置代码详解

前言

简介：本文将从头开始，带你快速上手 **

echarts最常用图例—柱状图

**
准备：请自行先将echarts图例引入你的项目，本文不多介绍。（引入 echarts教程：http://t.csdn.cn/mkTa4）
心得：echarts 的基础使用还是较为简单的，看起来属性很多，但是自己上手多写几个图，慢慢的就会发现并没有那么的难，**

孰能生巧

。
其他：其他的图例都和柱状图大差不差，学会柱状图，

很快就能举一反三

**

一、初识柱状图

从echarts官网引入基础的柱状图后，可以看到他有如下的配置项。我们可以改变各个配置项的属性，将图例调整为我们期望的效果。

二、常用配置项

2.0 说明

因为引入echarts图例后，改变图例的东西都在option配置项中，所以我下面进贴出 option中的代码，html结构和echarts引入挂载等代码就不多赘述

2.1 柱子顶部展示数据

操作series 中 itemstyle 的 lable 属性，在lable中自定义顶部展示数据的css样式和数据格式

全量代码：

const yData =[15,20,12,30,45,26];
option ={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data: yData,type:'bar',showBackground:true,label:{show:true,// 开启显示position:'top',// 在上方显示distance:15,// 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效verticalAlign:'middle',textStyle:{color:'#424656',// 顶部数据的颜色fontSize:14// 顶部数据的字体大小},formatter:function(params){// dataIndex是当前柱状图的索引let num = yData[params.dataIndex]/160;
          num = Math.round(num *100)/100;// 保留两位小数,不四舍五入return(
            yData[params.dataIndex]+'人'+'('+ num +'%'+')'// 此处return的字符串可根据自身项目需求自定义);}}}]};

2.2 柱子的颜色（纯色与渐变）

操作series 中 itemstyle 的 color 属性，即可改变柱状图的颜色

纯绿色代码：

option ={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[15,20,12,30,45,26],type:'bar',showBackground:true,itemStyle:{color:'green'// 将柱子颜色改为绿色}}]};

渐变色图例：

渐变色代码：

option ={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[15,20,12,30,45,26],type:'bar',showBackground:true,itemStyle:{color:{type:'linear',x:0,// 若将此值设为1，表示从右到左渐变y:1,// 若将此值设为1，表示从上到下渐变x2:0,// 左y2:0,// 上colorStops:[{offset:0,color:'#192060'// 0% 处的颜色},{offset:0.9,color:'#00C0FF'// 90% 处的颜色}]}}}]};

2.3 多根柱子

series[ ]中写一个对象，就是单柱柱状图，写两个对象就是双柱柱状图图，写三个就是三柱，以此类推

option ={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[15,20,12,30,45,26,36],type:'bar',showBackground:true,itemStyle:{color:{type:'linear',x:0,// 若将此值设为1，表示从右到左渐变y:1,// 若将此值设为1，表示从上到下渐变x2:0,// 左y2:0,// 上colorStops:[{offset:0,color:'#192060'// 0% 处的颜色},{offset:0.9,color:'#00C0FF'// 90% 处的颜色}]}}},{data:[18,28,18,38,48,28,32],type:'bar',showBackground:true,itemStyle:{color:{type:'linear',x:0,// 若将此值设为1，表示从右到左渐变y:1,// 若将此值设为1，表示从上到下渐变x2:0,// 左y2:0,// 上colorStops:[{offset:0,color:'#322E28'// 0% 处的颜色},{offset:0.9,color:'#FFD600'// 90% 处的颜色}]}}}]};

2.4 柱子堆叠

操作series 中 itemstyle 的 stack 属性，两个柱状图的 stack属性值相等时，就会叠放

series:[{stack:'演示柱状图',// 两个柱子的 stack值相同时就会堆叠放置name:'蓝色柱子',// 这个name需要和 legend下面data里面的 name 对应起来data:[15,20,12,30,45,26,36],// 蓝色柱子数据type:'bar',// 类型：柱状图barWidth:40,// 柱子宽度showBackground:true,// 是否展示背后的阴影itemStyle:{color:'#2DC3FB'// 蓝色柱子颜色}},{stack:'演示柱状图',// 两个柱子的 stack值相同时就会堆叠放置name:'黄色柱子',// 这个name需要和 legend下面data里面的 name 对应起来data:[18,28,18,38,48,28,32],// 黄色柱子数据type:'bar',// 类型：柱状图barWidth:40,// 柱子宽度showBackground:false,// 是否展示背后的阴影itemStyle:{color:'#FDD43C'// 黄色柱子颜色}}]

2.5 展示legend

操作series 中 itemstyle 的 legedn 属性，即可调试 版块控制器的css样式以及位置等

代码：

option ={grid:{//调整图表位置show:false,//是否显示直角坐标系网格top:'15%',// 距离图例顶部的位置，可写百分比，可以写数字right:'8%',bottom:'10%',left:'8%'},legend:{top:'5%',// 控制 板块控制器的位置right:'center',// icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none// itemWidth: 10,  // 设置宽度// itemHeight: 4, // 设置高度itemGap:40,// 设置两个legend之间的间距data:[{name:'蓝色柱子',// 这个name需要和 series 里面的 name 对应起来textStyle:{color:'#2DC3FB'// 单独设置某一个图列的颜色}},{name:'黄色柱子',// 这个name需要和 series 里面的 name 对应起来textStyle:{color:'#FDD43C'// 单独设置某一个图列的颜色}}]},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']// x轴数据},yAxis:{type:'value'},series:[{name:'蓝色柱子',// 这个name需要和 legend下面data里面的 name 对应起来data:[15,20,12,30,45,26,36],// 蓝色柱子数据type:'bar',// 类型：柱状图barWidth:40,// 柱子宽度showBackground:true,// 是否展示背后的阴影itemStyle:{color:'#2DC3FB'// 蓝色柱子颜色}},{name:'黄色柱子',// 这个name需要和 legend下面data里面的 name 对应起来data:[18,28,18,38,48,28,32],// 黄色柱子数据type:'bar',// 类型：柱状图barWidth:40,// 柱子宽度showBackground:false,// 是否展示背后的阴影itemStyle:{color:'#FDD43C'// 黄色柱子颜色}}]};

2.6 横纵坐标轴样式（完善中~）

三、常用图例

Echarts Demo集:https://www.isqqw.com/

**里面有

两万多个echarts图例

，且附详细配置代码，总能找到你想要的，利用已有图例进行二次开发，会轻松许多**

四、查阅文档

Echats文档地址:https://www.isqqw.com/echarts-doc/zh/option.html#title

**截止目前，我也仅仅用过一下部分Echarts的配置项，经验也还在累积中，偶尔遇到问题也只能通过百度和参考文档解决，

学会自己查文档吧！

**