2.Echarts柱状图最详解析及示例

前言：柱状图主要分横着的柱状图和竖着的柱状图，以及和其他类型图混搭图形。本文主要说明前两种类型，并未涵盖所有属性，主要是经常用到的属性。

准备工作

到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.html
示例及说明
代码中未说明的配置项，可以在官网查看。还有很多配置属性，示例中并没有使用到。配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger
另外，关于柱状图横坐标显示不全的问题，可以参考这边博客，方法比较全：http://blog.csdn.net/kebi007/article/details/68488694

eg1，效果图:

eg1说明：示例1与示例2不同的是，示例1中的两个柱状图是重合的，有覆盖和先后级，但是示例2是叠加的，不同之处可详读代码。另外，本例中的自定义图片，如果您想在本地测试，需自己准备图片。

eg1，横向柱状图代码及注释：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.js"></script><div id="pie1" style="width: 1000px;height:400px;"></div><script type="text/javascript">var myChart1 = echarts.init(document.getElementById('pie1'));option1 = {title : {subtext : '活动数量',subtextStyle : {'color' : '#6E6E6E','fontStyle' : 'normal','fontWeight' : 'lighter','fontSize' : 14,'verticalAlign' : 'middle',},left : '24%',},//标题属性tooltip : {trigger: 'item',          // 可选item和axis和none,柱状图主要用axis，效果可以自行切换试试属性效果axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'line',        // 默认为直线，可选为：'line' | 'shadow'lineStyle: {width: 0,},//线条颜色,宽度等属性},//该属性与trigger属性密切相关formatter:function(val){   //让series 中的文字进行换行var content = '';content += val['seriesName'];content += '<br />';content += '人数';content += ':';content += val['value'];return content;},//自定义鼠标放在柱状图上显示的内容，可以console.log(val);查看val详细属性，鼠标放在柱状图上会触发该事件},//鼠标放在柱状图上显示效果控制legend: {show: true,data: ['有效用户数', '用户总量'],//与series中name相对应left: '65%',//距离左侧的百分比//top: '40%',//距离顶部百分比//orient: 'vertical',//横向还是纵向展示，默认横向},//图例属性，就是不同颜色柱状图的说明grid: {left: '25%',//距离左侧的百分比right: '25%',bottom: '10%',containLabel: true,//grid 区域是否包含坐标轴的刻度标签。},//图的位置确定minInterval:1,//自动计算的坐标轴最小间隔大小xAxis:  {name : '人数',//x轴说明type: 'value',//坐标轴类型splitLine:{show:true,lineStyle:{color:'#DCDCDC',width: 1,type: 'dotted',//虚线},},axisLabel : {interval : 0,//横轴信息全部显示rotate : -20,//-20度角倾斜显示},axisTick: {show: true,inside:false,//坐标刻度朝内朝外},//刻度显示控制splitNumber: 10,//X轴分割段数},//x轴属性控制yAxis: [{type: 'category',axisLine: {lineStyle: {color: '#fff',width: '1',}},//坐标轴属性axisLabel: {textStyle: {color: 'black',//坐标值的具体的颜色}},data: ['一中','二中','三中','四中','五中'],},{type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: ['一中','二中','三中','四中','五中'],},//创建两个y轴，series中默认使用第一个，可以用yAxisIndex(值从0开始)属性说明使用哪一个，如果只有一个y轴，则两个柱形图只会叠加不会重合],series: [{name: '有效用户数',type: 'bar',barWidth : 20,z:2,//层级，值大的会覆盖小的markPoint : {data : [{name: '第一名',symbol:'image://images/01.png',xAxis:600, yAxis:4},{name: '第二名',symbol:'image://images/02.png',xAxis:500, yAxis:0},],symbolSize:[17,23],//标记宽高symbolOffset:['100%',0],//标记上下左右偏移量label:{normal:{show:false,},},},//自定义前两名标志itemStyle:{normal: {color:'#91c7ae',barBorderRadius:[0, 10, 10, 0],//柱形图圆角label: {show: true,//是否展示textStyle: {fontWeight:'bolder',fontSize : '12',fontFamily : '微软雅黑',}}},},label: {normal: {show: true,position: 'insideRight'}},//柱形数据显示属性，还有一个属性是emphasis，与normal同级，鼠标放在柱形图上显示信息属性data: [320, 302, 301, 334, 390]},{name: '用户总量',type: 'bar',barWidth : 20,yAxisIndex: 1,z:1,itemStyle:{normal: {//柱形图圆角，初始化效果color:'#d48265',barBorderRadius:[0, 10, 10, 0],label: {show: true,//是否展示textStyle: {fontWeight:'bolder',fontSize : '12',fontFamily : '微软雅黑',}}},},label: {normal: {show: true,position: 'insideRight'}},data: [500, 320, 400, 380, 600],},]};myChart1.setOption(option1);</script>
</head>
</html>

eg2，效果图：

eg2说明：由于很多属性与示例1相似，故代码中没有做过多的注释，不同的是，示例1中的两个柱状图是重合的，但是示例2是叠加的，不同之处可详读代码。
eg2代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.js"></script><div id="pie1" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart1 = echarts.init(document.getElementById('pie1'));option1 = {title : {subtext : '人数',subtextStyle : {'color' : '#6E6E6E','fontStyle' : 'normal','fontWeight' : 'lighter','fontSize' : 14,'verticalAlign' : 'middle',},left : '10%',},//标题属性tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ['有效用户数', '用户总量'],left: '60%',//距离左侧的百分比},grid: {left: '10%',right: '10%',bottom: '3%',containLabel: true},xAxis: {name : '学校',//x轴说明type: 'category',data: ['一中','二中','三中','四中','五中'],},yAxis:  {type: 'value',splitLine:{show:true,lineStyle:{color:'#DCDCDC',width: 1,type: 'dotted',//虚线},},splitNumber: 10,//y轴分割段数},series: [{name: '有效用户数',type: 'bar',stack: '总量',barWidth : 20,itemStyle:{normal: {//柱形图圆角，初始化效果color:'#d48265',//barBorderRadius:[0, 10, 10, 0],label: {show: true,//是否展示textStyle: {fontWeight:'bolder',fontSize : '12',fontFamily : '微软雅黑',}}},},label: {normal: {show: true,position: 'insideRight'}},data: [320, 302, 301, 334, 390]},{name: '用户总量',type: 'bar',stack: '总量',barWidth : 20,itemStyle:{normal: {//柱形图圆角，初始化效果color:'#91c7ae',barBorderRadius:[10, 10, 0, 0],label: {show: true,//是否展示textStyle: {fontWeight:'bolder',fontSize : '12',fontFamily : '微软雅黑',}}},},label: {normal: {show: true,position: 'inside'}},data: [120, 132, 101, 134, 90],},]};myChart1.setOption(option1);</script>
</head>
</html>

2.Echarts柱状图最详解析及示例相关推荐

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
1.Echarts饼状图详解及示例
前言说明:因工作需要用到图统计数据作为展示,用到echarts3(你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件) ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
echarts柱状图的样式调整及应用
一.在项目中引进echarts echarts官网:快速上手 - Handbook - Apache ECharts,点击左侧导航栏的"入门篇"中的"在项目中引入 Apa ...
echarts 柱状图柱子改成圆柱体_玩转ECharts之实现“顶端装饰”
前言玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种"奇奇怪怪"的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现 ...
echarts 柱状图设置边框_series组件
使用ECharts柱状图标线 ECharts 使用 markLine 来设置柱状图标线,本文是对柱状图标线属性的介绍. series[i]-bar.markLine.silent boolean [ ...
echarts 柱状图鼠标滑过显示图标+数字每三位打千分号+单位
echarts 柱状图鼠标悬浮显示图标+数字每三位打千分号+单位千分号+单位全部代码示例代码柱状图鼠标滑过显示单位千分号+单位 1.图标:params[i].marker 2.数字每三位 ...
正则表达式全解析+常用示例
在开始写这篇文章之前,我的心里还是纠结的.我在问自己要不要写这篇东西,关于相似的内容网上多如牛毛,而且还不乏珍品,况且,就算我写了也不一定能写的好.但是现在你既然看到了,那说明我还是写了出来.就算是对 ...

2.Echarts柱状图最详解析及示例

2.Echarts柱状图最详解析及示例相关推荐

最新文章

热门文章