首页 > 【Echarts】柱状图

【Echarts】柱状图

互联网 2021-12-05 06:36:33
1.ECharts的快速上手

ECharts 的入门使用特别简单 5分钟就能够上手. 他大体分为这几个步骤

步骤1:引入 echarts.js 文件 步骤2:准备一个呈现图表的盒子 步骤3:初始化 echarts 实例对象 let myCharts = echarts.init(document.getElementById('charts')) 步骤4:准备配置项 let option = {xAxis: {type: 'category'data: ['小明' '小红' '小王']}yAxis: {type: 'value'}series: [{name: '语文'type: 'bar'data: [70 92 87]}]} 步骤5:将配置项设置给 echarts 实例对象 myCharts.setOption(option)

通过简单的5个步骤 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中 步骤4最重要 一个图表最终呈现什么样子完全取决于这个配置项.所以对于不同的图表 除了配置项会发生改变之外 其他的代码 都是固定不变的.

完整代码

Documentlet myCharts = echarts.init(document.getElementById('charts'))let option = {xAxis: {type: 'category'data: ['小明' '小红' '小王']}yAxis: {type: 'value'}series: [{name: '语文'type: 'bar'data: [70 92 87]}]}myCharts.setOption(option) 2.相关配置讲解 xAxis 直角坐标系 中的 x 轴 如果 type 属性的值为 category 那么需要配置 data 数据 代表在 x 轴的 呈现yAxis 直角坐标系 中的 y 轴 如果 type 属性配置为 value 那么无需配置 data 此时 y 轴会自动去 series 下找数据进行图表的绘制series 系列列表。每个系列通过 type 决定自己的图表类型 data 来设置每个系列的数据

注意: 坐标轴 xAxis 或者 yAxis 中的配置 type 的值主要有两种: category 和 value 如果 type 属性的值为 category 那么需要配置 data 数据 代表在 x 轴的呈现. 如果 type 属性配置为 value 那么无需配置 data 此时 y 轴会自动去 series 下找数据进行图表的绘制

3.echarts 常见图表 3.1 柱状图 Document//初始化图表let myCharts = echarts.init(document.getElementById('charts'))//准备x轴数据let xDataArr = ['小明' '小红' '小王' '小李' '小张']//准备y轴数据let yDataArr = [70 92 87 60 85]let option = {xAxis: {type: 'category'data: xDataArr}yAxis: {type: 'value'}series: [{name: '语文'type: 'bar' //type指定为bar 为柱状图data: yDataArr}]}myCharts.setOption(option)

在这里插入图片描述 柱状图的常用配置

series: [{name: '语文'type: 'bar' //type指定为bar 为柱状图data: yDataArrmarkPoint:{ //最大值最小值data:[{type:'max'name:'最大值'}{type:'min'name:'最小值'}] }markLine:{ //平均值data:[{type:'average'name:'平均值'}] }label:{ //数值显示 show:true //是否显示 rotate:80 //旋转80度}barWidth:'30%' //柱子的宽度}]

通用配置

title title: {text: "成绩" // 标题文字 textStyle: {color: 'red'// 文字颜色}borderWidth: 5 // 标题边框 borderColor: 'green' // 标题边框颜色borderRadius: 5 // 标题边框圆角left: 20 // 标题的位置top: 20 // 标题的位置 }

tooltip tooltip 指的是当鼠标移入到图表或者点击图表时 展示出的提示框

触发类型: trigger 可选值 item/axis触发时机: triggerOn 可选值有 mouseOver\click格式化显示: formatter 详情参照官方文档

toolbox toolbox 是 ECharts 提供的工具栏 内置有 导出图片,数据视图 重置 数据区域缩放 动态类型切 换五个工具

let option = {toolbox: {feature: {saveAsImage: {} // 将图表保存为图片dataView: {} // 是否显示出原始数据 restore: {} // 还原图表 dataZoom: {} // 数据缩放magicType: {// 将图表在不同类型之间切换图表的转换需要数据的支持type: ['bar' 'line']}}}} 图例 legend 是图例用于筛选类别需要和 series 配合使用 //初始化图表let myCharts = echarts.init(document.getElementById('charts'))//准备x轴数据let xDataArr = ['小明' '小红' '小王' '小李' '小张']//准备y轴数据let yDataArr = [70 92 87 60 85]let yDataArr2 = [80 95 75 63 88]let option = {legend: {data:['语文' '数学']}xAxis: {type: 'category'data: xDataArr}yAxis: {type: 'value'}series: [{name: '语文'type: 'bar' //type指定为bar 为柱状图data: yDataArr}{name: '数学'type: 'bar' //type指定为bar 为柱状图data: yDataArr}]}myCharts.setOption(option)

在这里插入图片描述

免责声明:非本网注明原创的信息,皆为程序自动获取互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件12小时内删除。