通过柱状图实例，一文让你学会Echarts的基础使用！！！

先看效果：

获取Echarts

文件目录

引入Echarts

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>

绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 1710px; height: 670px"></div>
</body>

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个柱状图，下面是代码步骤拆分。

title

标题组件，包含主标题和副标题

title: {text: '新增课本', // 主标题文本show: true, // 是否显示标题组件textStyle: {color: '#6699ff',fontSize: 36,fontFamily: 'Microsoft YaHei',fontWeight: 400,},top: '42',left: '40'
}

未加top/left时：

加了top/left时：

title属性详情请看:https://echarts.apache.org/zh/option.html#title

series

系列列表。每个系列通过 type 决定自己的图表类型

series: [ // 系列列表。每个系列通过 type 决定自己的图表类型{name: '新增数量', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列type: 'bar', // 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型data: values, // (数组) 单个数据项的数值 xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。barWidth: '30px', // 柱条的宽度，不设时自适应itemStyle: { // 自定义特殊 itemStyle，仅对该数据项有效--数据项样式color: '#6482ff',barBorderRadius:[10,10,0,0] // 数据项图形的边框圆角样式},label: { // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等show: false // 是否显示标签，在数据项上}}
]

series属性具体详情请看:https://echarts.apache.org/zh/option.html#series

legend

图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示

滚动图例（垂直）

滚动图例（水平）

属性：

legend具体属性详情请看：https://echarts.apache.org/zh/option.html#legend

legend: { // 图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示top: 150,right: 0,textStyle: {fontSize: '24px',fontFamily: 'Microsoft YaHei',fontWeight: 400,color: '#c2cbf2'}
}

grid

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

示例

grid属性具体详情请看：https://echarts.apache.org/zh/option.html#grid

grid: {left: 70, // grid 组件离容器左侧的距离top: 200,right: 40,bottom: 70
}

xAxis

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置offset属性防止同个位置多个 x 轴的重叠

xAxis具体属性详情请看：https://echarts.apache.org/zh/option.html#xAxis

xAxis: [ // 直角坐标系 grid 中的 x 轴{type: 'category', // 类目轴data: xKeys, // 类目数据 类目轴有效color: '#323e52',position: 'bottom', // x轴的位置axisLabel: { // 坐标轴刻度标签的相关设置margin: 20, // 刻度标签与轴线之间的距离interval: 'auto', // 坐标轴刻度标签的显示间隔 类目轴有效textStyle: {fontSize: 24,fontFamily: 'Microsoft YaHei',fontWeight: 400,textAlign: 'center',color: '#c2cbf2'}},axisLine: { // 坐标轴轴线相关设置lineStyle: {color: '#b7ccff',type: 'solid'}},splitLine: { // 坐标轴在grid区域中的分隔线show: false}}
]

如果

splitLine: { // 坐标轴在grid区域中的分隔线show: true
}

yAxis

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置offset属性防止同个位置多个 Y 轴的重叠

yAxis属性具体详情请看：https://echarts.apache.org/zh/option.html#yAxis

yAxis: [ // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠{type: 'value', // 数值轴,适用于连续数据silent: true, // 坐标轴是否是静态无法交互interval: 100, // 强制设置坐标轴分割间隔min: 0, // 坐标轴刻度最小值max: 600, // 坐标轴刻度最大值axisLabel: { // 坐标轴刻度标签的相关设置textStyle: {fontSize: 24,fontFamily: 'Microsoft YaHei',fontWeight: 400,textAlign: 'right',color: '#c2cbf2'}},axisLine: { // 坐标轴轴线相关设置show: false},axisTick: { // 坐标轴刻度相关设置show: false // 是否显示坐标轴刻度},splitLine: {show: true,lineStyle: {color: '#b7ccff',type: 'solid'}}}
]

如果

axisTick: { // 坐标轴刻度相关设置show: false // 是否显示坐标轴刻度
}

完整代码如下：

新增课本.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新增课本</title><script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 1710px; height: 670px"></div><script type="text/javascript">// 基于准备好的dom, 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 数据集const dataList = [{name: '语文', value: 116},{name: '数学', value: 256},{name: '英语', value: 446},{name: '历史', value: 111},{name: '政治', value: 416},{name: '地理', value: 446},{name: '生物', value: 516},{name: '化学', value: 236},{name: '物理', value: 382}]const xKeys = dataList.map((item) => item.name)const values = dataList.map((item) => item.value)// 指定图标的配置和数据var option = {title: {text: '新增课本', // 主标题文本show: true, // 是否显示标题组件textStyle: {color: '#6699ff',fontSize: 36,fontFamily: 'Microsoft YaHei',fontWeight: 400,},top: '42',left: '40'},series: [ // 系列列表。每个系列通过 type 决定自己的图表类型{name: '新增数量', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列type: 'bar', // 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型data: values, // (数组) 单个数据项的数值 xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。barWidth: '30px', // 柱条的宽度，不设时自适应itemStyle: { // 自定义特殊 itemStyle，仅对该数据项有效--数据项样式color: '#6482ff',barBorderRadius:[10,10,0,0] // 数据项图形的边框圆角样式},label: { // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等show: false // 是否显示标签，在数据项上}}],legend: { // 图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示top: 150,right: 0,textStyle: {fontSize: '24px',fontFamily: 'Microsoft YaHei',fontWeight: 400,color: '#c2cbf2'}},grid: {left: 70, // grid 组件离容器左侧的距离top: 200,right: 40,bottom: 70},xAxis: [ // 直角坐标系 grid 中的 x 轴{type: 'category', // 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据data: xKeys, // (数组)类目数据，在类目轴（type: 'category'）中有效color: '#323e52',position: 'bottom', // x轴的位置  默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧axisLabel: { // 坐标轴刻度标签的相关设置margin: 20, // 刻度标签与轴线之间的距离interval: 'auto', // 坐标轴刻度标签的显示间隔 类目轴有效textStyle: {fontSize: 24,fontFamily: 'Microsoft YaHei',fontWeight: 400,textAlign: 'center',color: '#c2cbf2'}},axisLine: { // 坐标轴轴线相关设置lineStyle: {color: '#b7ccff',type: 'solid'}},splitLine: { // 坐标轴在grid区域中的分隔线show: false}}],yAxis: [ // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠{type: 'value', // 数值轴,适用于连续数据silent: true, // 坐标轴是否是静态无法交互interval: 100, // 强制设置坐标轴分割间隔min: 0, // 坐标轴刻度最小值max: 600, // 坐标轴刻度最大值axisLabel: { // 坐标轴刻度标签的相关设置textStyle: {fontSize: 24,fontFamily: 'Microsoft YaHei',fontWeight: 400,textAlign: 'right',color: '#c2cbf2'}},axisLine: { // 坐标轴轴线相关设置show: false},axisTick: { // 坐标轴刻度相关设置show: true // 是否显示坐标轴刻度},splitLine: {show: true,lineStyle: {color: '#b7ccff',type: 'solid'}}}]}// 使用刚指定的配置项和数据显示图表myChart.setOption(option)</script>
</body>
</html>

修改部分问题（bug）

示例: 问题一

grid: {left: 'auto',top: 346, right: 'auto',containLabel:true,bottom: 20,},//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签

示例: 问题二

yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住

相信看了这篇文章，echart的最基础的使用你应该有所收获哈哈，觉得有用的话就给小编点个赞呗！！！

【Echarts】通过柱状图实例，一文让你学会Echarts的基础使用！！！相关推荐

☀️苏州程序大白一文让你学会Java Servlet基础☀️《❤️记得收藏❤️》
☀️苏州程序大白一文让你学会Java Servlet基础☀️<❤️记得收藏❤️> 目录
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
echarts vue 柱状图实例_「源码学习」适用于 Vue3 的 ECharts 包装组件
距离 Vue3 发布已经有近一周的时间,不知道大家源码都学习的怎么样了呢?今天 Gitee 为开发者们推荐一个新的学习资源,就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts ...
一文带你学会0编程基础做木马免杀
更多渗透技能 ,10余本电子书及渗透工具包,搜公众号:白帽子左一作者:掌控安全-骚骑背景之前分享了个免杀入门文,很浅显,比较适合小白看- 文章在社区,地址我放在这了,有兴趣可以一戳: https ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
ECharts系列 - 柱状图（条形图）实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...
python前端框架实例_Python数据可视化：PyQt5 + ECharts框架实例
引言对于Python下桌面软件的开发已经有了很多数据可视化的库,如Matplotlib.Seaborn.Pyqtgraph.Plotly等等,但这些库更适合于后端程序员的软件开发. 实际上在前端网页 ...
关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...

【Echarts】通过柱状图实例，一文让你学会Echarts的基础使用！！！