2.Echarts3.0--柱状图最详解析及示例
来源：互联网 发布：什么是nosql数据库 编辑：程序博客网 时间：2024/06/05 08:33
前言：柱状图主要分横着的柱状图和竖着的柱状图，以及和其他类型图混搭图形。本文主要说明前两种类型，并未涵盖所有属性，主要是经常用到的属性。准备工作
到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: 'axis', // 可选item和axis和none,柱状图主要用axis，效果可以自行切换试试属性效果 axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow',当trigger属性为axis时有效 } },//鼠标放在柱状图上显示效果控制 legend: { show: true, data: ['有效用户数', '用户总量'],//与series中name相对应 left: '65%',//距离左侧的百分比 },//图例属性，就是不同颜色柱状图的说明 grid: { left: '25%',//距离左侧的百分比 right: '25%', bottom: '10%', containLabel: true,//grid 区域是否包含坐标轴的刻度标签。 },//图的位置确定 xAxis: { name : '人数',//x轴说明 type: 'value',//坐标轴类型 splitLine:{ show:true, lineStyle:{ color:'#DCDCDC', width: 1, type: 'dotted',//虚线 }, }, axisLabel : { interval : 0,//横轴信息全部显示 rotate : -20,//-20度角倾斜显示 }, 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>阅读全文
1 0
- 2.Echarts3.0--柱状图最详解析及示例
- echarts3 柱状图
- Echarts3.0+Ajax请求数据柱状图实例
- echarts3 柱状图实现
- Echarts2.0和Echarts3.0添加柱状图标签值
- Echarts3.0+JavaWeb+Mysql实现饼图，折线图，柱状图
- ECharts3.0柱状图隐藏y轴和x轴
- echarts3.0之关系图详解
- 基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制（上篇）
- Echarts3 使用详解
- echarts3 柱状图数字在柱的顶部显示
- echarts3相关配置及图示
- 浅谈Echarts3.0
- 定制echarts3.0饼图
- Echarts3.0使用心得
- RSS2.0中文规范详解及示例
- RSS2.0中文规范详解及示例
- crontab 详解及示例
- 从RNN到LSTM剖析
- 冒泡算法
- 经典算法
- org/eclipse/jetty/server/Handler : Unsupported major.minor version 52.0
- 正负数之间取模运算的符号问题
- 2.Echarts3.0--柱状图最详解析及示例
- 自动迁移关闭es聚合索引
- ASP 图片，生成缩略图
- 2017.12.21 第十一天-继续界面优化
- 《穿越计算机的迷雾》第一版说明
- Spring Boot导出jar包发布
- 7k+调查问卷分析得出首份《2017中国开发者调查报告》：直击区块链应用和发展现状
- alibaba的fastjson
- 单元测试-可行性
