玩转ECharts制作图表之柱状图

Echarts快速上手

引入echarts.js文件

<script src="js/echarts.min.js"></script>

准备一个呈现图表的"盒子"

 <div id="main" style="width: 600px;height:400px;"></div>

初始化echarts实例化对象

var myChart = echarts.init(document.getElementById('main'))

准备配置项

var option = {xAxis: {type: 'category',
data: ['小明', '小红', '小王']
},
yAxis: {type: 'value'
},
series: [
{name: '成绩',
type: 'bar',
data: [70, 92, 87],
}
]
}

将配置项设置给echarts实例对象

myChart.setOption(option)

运行即可制的图表如下图：

柱状图(bar)

适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较。

对于引入echarts.js文件，创建呈现图表的div盒子以及初始化echarts实例和将配置项设置给echarts实例对象这些步骤在创建图表时都类似，所以看一下配置项中的内容。

图表以柱状图的形状进行显示则是在series中type的值为’bar’。
markPoint

markPoint: {data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]} //最大值以及最小值的显示

markLine

 markLine: {data: [{type: 'average',name: '平均值'}]} //平均值的显示

label

label: { //数值显示show: true, //显示柱状图上每一列的数值rotate: 60, //让显示的数值进行旋转position: 'inside' //标签的位置}

barWidth

barWidth: '30%' //柱宽度

如图：

代码：

var xDataArr = ['小明', '小李', '小飞', '小王', '小丽']var yDataArr = [89, 78, 97, 98, 87]var option = {//横向柱状图的话需要将xAxis和yAxis中的数据进行对换xAxis: {type: 'category', //类目轴data: xDataArr},yAxis: {},series: [{name: 'bar',type: 'bar', //图表类型markPoint: {data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]}, //最大值以及最小值的显示markLine: {data: [{type: 'average',name: '平均值'}]}, //平均值的显示label: { //数值显示show: true, //显示柱状图上每一列的数值rotate: 60, //让显示的数值进行旋转position: 'inside' //标签的位置},barWidth: '30%', //柱宽度data: yDataArr}]}

更多的echarts配置项学习可以在echarts官网查看 echarts官网配置项

玩转ECharts制作图表之柱状图相关推荐

玩转ECharts制作图表之散点图
散点图适用于三维数据集,但其中只有两维需要比较. 散点图 ECharts基本构建代码结构准备x轴和y轴数据,二维数组[[身高,体重],[]-] 将type的值设置为scatter,x轴和y轴的typ ...
玩转ECharts制作图表之折线图
折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合 markArea //标注空间 (xAxis的值要与xdata值中取出)markArea: {data: [[{xAxis: '1月' ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
echarts ucharts 和_使用chart和echarts制作图表
前言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕 ...
在Java web页面使用ECharts制作图表
前言因为最近在做一项课设,需要可视化,因此选择echarts.但因为太久没用了,所以忘记了怎么在web页面引用echarts,在这里做个记录,开发工具是VSCODE. 一.下载echarts.min ...
IONIC使用echarts制作曲线图、柱状图、以及饼形图
先看效果曲线图 ...
echarts 制作图表固定的三个步骤
1.导入js() (1)Echarts官网(第三方可视化图表库):Apache ECharts (2)echart.js(引入的js文件)下载地址:https://cdn.jsdelivr.net/n ...

玩转ECharts制作图表之柱状图

Echarts快速上手

柱状图(bar)

玩转ECharts制作图表之柱状图相关推荐

最新文章

热门文章