Vue使用Echarts画柱状图详解
目录
- 前言
- 柱状图实现步骤
- 柱状图常见效果
- 标记
- 显示
前言
本篇来学习下柱状图的实现
柱状图实现步骤
- ECharts 最基本的代码结构
- 准备x轴的数据
- 准备 y 轴的数据
- 准备 option , 将 series 中的 type 的值设置为: bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts-柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var myCharts = echarts.init(document.getElementById('app'))
// 准备数据 将type的值设置为bar
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr
}
]
}
// 将配置项设置给echarts实例对象
myCharts.setOption(option)
</script>
</body>
</html>
效果
柱状图常见效果
标记
markPoint：最大值\最小值
markPoint: { // 标记最大最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
效果
markLine：平均值
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
效果
显示
lable：数值显示
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
}
效果
barWidth：柱的宽度
barWidth: '30%' // 柱的宽度
效果
横向柱状：只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为
value , yAxis 的 type 设置为 category , 并且设置 data 即可
xAxis: {
// type: 'category',
// data: xDataArr
type: 'value'
},
yAxis: {
// type: 'value'
type: 'category',
data: xDataArr
},
效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts-柱状图</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
// 初始化echarts实例对象
var myCharts = echarts.init(document.getElementById('app'))
// 准备数据 将type的值设置为bar
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
xAxis: {
type: 'category',
data: xDataArr
// type: 'value' // 横向柱状图使用
},
yAxis: {
type: 'value'
// type: 'category', // 横向柱状图使用
// data: xDataArr
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr,
markPoint: { // 标记最大最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
},
barWidth: '30%' // 柱的宽度
}
]
}
// 将配置项设置给echarts实例对象
myCharts.setOption(option)
</script>
</body>
</html>
到此这篇关于Vue使用Echarts画柱状图详解的文章就介绍到这了,更多相关vue Echarts画柱状图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue echarts封装实现流程
将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式 将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用 下面对我自己封装的组件 EchartsGenerate 逐步解释 首先看template <template> <div> <slot>&l
-
Vue ECharts简易实现雷达图
目录 前言 雷达图特点 雷达图的基本实现 雷达图的常见效果 显示数值 区域面积 绘制类型 完整代码 前言 本篇来学习写雷达图 雷达图特点 可以用来分析多个维度的数据与标准数据的对比情况 雷达图的基本实现 ECharts 最基本的代码结构 定义各个维度的最大值 准备具体产品的数据 在 series 下设置 type:radar <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
Vue使用Echarts实现大屏可视化布局示例详细讲解
目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标
-
Vue Echarts简易实现仪表盘
目录 前言 仪表盘的特点 仪表盘的基本实现 仪表盘的常见效果 前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代码结构 准备数据, 设置给 series 下的 data 在 series 下设置 type:gauge <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解
目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,
-
Vue ECharts设置主题实现方法介绍
目录 前言 内置主题 自定义主题 前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
Vue使用Echarts画柱状图详解
目录 前言 柱状图实现步骤 柱状图常见效果 标记 显示 前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构 准备x轴的数据 准备 y 轴的数据 准备 option , 将 series 中的 type 的值设置为: bar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
-
详解vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts 1.1 安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 注:本文安装Echarts版本为:“echarts”: “5.2.1” 1.2 引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:
-
vue项目中axios使用详解
axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例
-
vue系列之动态路由详解【原创】
开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案. 本文目录: 一: 设想 二: 讨论 三:实现 四:总结 一: 设想 简单解释下上图就是: 首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端:前端将这个token保存下来,为了让在浏览器新
-
在 webpack 中使用 ECharts的实例详解
Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用. npm 安装 ECharts 在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package. 你可以使用如下命令通过 npm 安装 ECharts npm instal
-
vue使用echarts画组织结构图
昨天,写了一篇关于圆环进度条的博客(请移步:Vue圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的,但是没有什么动画效果,我的css3又很差劲,而且项目中已经使用到了折线图.饼状图.柱状图之类的图表,用的还是百度的echarts,所以这个组织结构图之类的需求也就用了百度的echarts来实现了. 以前用echarts写折线图.柱状图.饼状图的较多,它的API还算比较熟悉,但是画组织结构这样的树状图就很苦逼了
-
利用Vue-cli搭建Vue项目框架的教程详解
首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e
-
Vue组件选项props实例详解
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据
-
vue快捷键与基础指令详解
v-bind可以简写成 : <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button> v-if实例 可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <he
-
vue中的scope使用详解
我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>