ECharts常用图表-柱状图的使用
柱状图的使用
柱状图的实现步骤
1>ECharts 最基本的代码结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/echarts.min.js"></script> <style> div{ width: 600px; height: 400px; } </style> </head> <body> <div></div> <script> var myCharts= echarts.init(document.querySelector('div')); var option={} myCharts.setOption(option); </script> </body> </html>
2>准备x轴的数据
var xData= ['小明', '李小红', '小刚', '小王', '老王', '老刚', '老红', '老明']
3>准备 y 轴的数据
var yData = [50, 60, 90, 40, 70, 80, 70, 60]
4>准备 option，将 series 中的 type 的值设置为: bar
var option={ xAxis:{ type:'category', data:xData }, yAxis:{ type:'value' }, series:[
{ type:"bar", data:yData }
]
注意：坐标轴 xAxis 或者 yAxis 中的配置，type 的值主要有两种：category 和 value，如果 type 属性的值为 category，那么需要配置 data 数据，代表在 x 轴的呈现，如果 type 属性配置为 value，那么无需配置 data，此时 y 轴会自动去 series下找数据进行图表的绘制
最终呈现的效果图为：
我们可以给这个表添加一个标题为，考试成绩
title:{ show:true, text:"考试成绩" },
柱状图的常见效果
标记：最大值\最小值 markPoint
series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] } }
此时图表中就会标注最大值和最小值
平均值 markLine
series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }
此时就会出现一条水平线表示平均值
数据显示：label
series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, label:{ show:true,//是否显示 rotate:60//旋转角度 }
}
还可以数据显示的位置，通过position属性设置
label:{ show:true,//是否显示 rotate:60,//旋转角度 position:"top" }
此时就会显示在柱状图的上方
柱宽度 barWidth
series:{ type:"bar", data:yData, barWidth: '30%', // 柱的宽度 markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, label:{ show:true,//是否显示 rotate:60//旋转角度 } }
横向柱状图
所谓的横向柱状图，只需要让x轴的角色和y轴的角色互换一下即可，既 xAxis 的 type 设置为 value，yAxis 的 type 设置为 category，并且设置 data 即可
xAxis:{ type:'value' }, yAxis:{ type:'category', data:xData },
通用配置
指任何图标都能使用的配置
- 标题：title
- 提示：tooltip
- 工具按钮：toolbox
- 图例：legend
通用配置-标题(title)
文字样式
<div style="width: 600px ; height: 400px;"></div> <script> var myCharts= echarts.init(document.querySelector('div')); var xData= ['小明', '李小红', '小刚', '小王', '老王', '老刚', '老红', '老明']; var yData = [50, 60, 90, 40, 70, 80, 70, 60] var option={ title:{ show:true, //标题是否显示 text:"考试成绩", //指明标题的文字 textStyle:{ //标题样式 color:red } }, xAxis:{ type:'category', data:xData }, yAxis:{ type:'value' }, series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, label:{ show:true,//是否显示 rotate:60,//旋转角度 } } myCharts.setOption(option); </script>
标题边框
borderWidth、borderColor、borderRadius
title:{ show:true, //标题是否显示 text:"考试成绩", //指明标题的文字 textStyle:{ //标题样式 color:'red' }, borderWidth:5, //边框 borderColor:'blue', //边框颜色 borderRadius:5 //边框圆角 },
标题位置
left、right、top、bottom
title:{ show:true, //标题是否显示 text:"考试成绩", //指明标题的文字 textStyle:{ //标题样式 color:'red' }, borderWidth:5, //边框 borderColor:'blue', //边框颜色 borderRadius:5, //边框圆角 left:10, top:20 },
通用配置-提示(tooltip)
tooltip：提示框组件，用于配置鼠标滑过或点击图表是的显示框
触发类型：trigger
两个可选值：item、axis
tooltip:{ trigger:"item" },
此时鼠标滑过柱状图时就会触发
tooltip:{ trigger:"axis" },
此时柱状图上会出现一条轴线，只要鼠标在这轴上就不会消息
触发时机：triggerOn
两个可选值：mouseover、click
tooltip:{ trigger:"axis", triggerOn:'click' } tooltip:{ trigger:"axis", triggerOn:'click' },,
此时点击之后才会出现
格式化：formatter
提示框浮层内容格式器，支持字符串模板和回调函数两种形式
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
-
折线（区域）图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） -
散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） -
地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） -
饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
tooltip:{ trigger:"axis", triggerOn:'click', formatter:"123456" },
此时我们惦记着柱状图之后都会出现formatter中的内容
此时我们可以这样写
tooltip:{ trigger:"axis", triggerOn:'click', formatter:"{b}的成绩是{c}" },
此时再次点击柱状图之后
此时我们还可以通过毁掉函数来执行
tooltip:{ trigger:"axis", triggerOn:'click', formatter:function(arg){ console.log(arg) return arg[0].name+"分数为"+arg[0].data } },
我们可以点击一下，查看arg是什么
此时我们点击小明，会发现输出的内容为当前小明这个柱状图的全部信息
工具按钮: toolbox
toolbox 是 ECharts 提供的工具栏, 内置有 导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具
工具栏的按钮是配置在 feature 的节点之下
saveAsImage:{}：导出图片
var option={ toolbox:{ feature:{ //导出图片,什么也不用填写，自动具备功能 saveAsImage:{} } }, .............. }
此时我们呢就会看到有一个导出图片的按钮
dataView:{}：数据视图
toolbox:{ feature:{ //到处图片,什么也不用填写，自动具备功能 saveAsImage:{}, dataView:{} //什么也不用写， 具备数据视图的功能 } },
此时点击之后就可以看到数据，在这里可以对原始数据进行修改，但是刷新之后回消失
restore:{} ：重置功能
toolbox:{ feature:{ //到处图片,什么也不用填写，自动具备功能 saveAsImage:{}, dataView:{}, //什么也不用写， 具备数据视图的功能 restore:{} //重置功能 } },
还原原始数据
dataZoom:{}：区域缩放
toolbox:{ feature:{ //到处图片,什么也不用填写，自动具备功能 saveAsImage:{}, dataView:{}, //什么也不用写， 具备数据视图的功能 restore:{} , //重置功能 dataZoom:{}//区域缩放 } },
此时我们点击按钮，选中视图中的几个柱状图可以看到视图被放大，在点击另外一个按钮，视图回到原样
magicType:{}：可以在不同的两种图表类型之间进行切换
toolbox:{ feature:{ //到处图片,什么也不用填写，自动具备功能 saveAsImage:{}, dataView:{}, //什么也不用写， 具备数据视图的功能 restore:{} , //重置功能 dataZoom:{},//区域缩放 magicType:{ type:['bar','line'],//柱状图和折线图之间进行切换 }, //可以在不同的两种图表类型之间进行切换 } },
此时点击之后就变成了折现图
图例：legend
legend：图例，用于筛选系列，需要和series配合使用
legend中的data是一个数组
legend中的data的值需要和series数组中某组的数据的name值一直
此时我们使用两组数据，
var yData1 = [50, 60, 90, 40, 70, 80, 70, 60] var yData2 = [60, 40, 80, 70, 90, 80, 60, 30]
series:[ { name:'语文', type:"bar", data:yData1 }, { name:'数学', type:"bar", data:yData2 }, ],
series:[ { name:'语文', type:"bar", data:yData1 }, { name:'数学', type:"bar", data:yData2 }, ], legend:{ data:['语文','数学'] },
