Echarts 柱状图横向展示和竖向展示
点击查看专栏目录
本示例是显示柱状图,分别是横向展示和纵向展示。关键是X轴和Y轴的参数互换。
文章目录
- 横向示例效果
- 横向示例源代码(共81行)
- 纵向示例效果
- 纵向示例源代码(共81行)
- 相关资料参考
- 专栏介绍
横向示例效果
横向示例源代码(共81行)
/*
* @Author: 还是大剑师兰特(CSDN)
* @下面源代码版权归还是大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-22
*/
<template><div class="container"><h3>vue+echarts:柱状图横向展示</h3><p>大剑师兰特,还是大剑师兰特</p><div id="vue-echarts" ref="refEcharts"> </div></div>
</template>
<script>import * as echarts from 'echarts'; //局部引用,如果采用全局模式,这里不写export default {name: 'cuclife',data() {return {}},methods: {initCharts() {let myChart = echarts.init(this.$refs.refEcharts);myChart.setOption({title: {text: '世界人口'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},color:['red','orange'],xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']},series: [{name: '2011',type: 'bar',data: [18203, 23489, 29034, 104970, 131744, 630230]},{name: '2012',type: 'bar',data: [19325, 23438, 31000, 121594, 134141, 681807]}]});}},mounted() {this.initCharts();}}
</script>
<style scoped>.container {width: 840px;height: 580px;margin: 50px auto 0;border: 1px solid rgb(228, 57, 97);}#vue-echarts {width: 800px;height: 460px;border: 1px solid #d8d;margin: 0 auto;}
</style>
纵向示例效果
纵向示例源代码(共81行)
/*
* @Author: 还是大剑师兰特(CSDN)
* @下面源代码版权归还是大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-22
*/<template><div class="container"><h3>vue+echarts:柱状图纵向展示</h3><p>大剑师兰特,还是大剑师兰特</p><div id="vue-echarts" ref="refEcharts"> </div></div>
</template>
<script>import * as echarts from 'echarts'; //局部引用,如果采用全局模式,这里不写export default {name: 'cuclife',data() {return {}},methods: {initCharts() {let myChart = echarts.init(this.$refs.refEcharts);myChart.setOption({title: {text: '世界人口'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},color:['red','orange'],xAxis: {type: 'category',data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']},yAxis: {type: 'value',boundaryGap: [0, 0.01]},series: [{name: '2011',type: 'bar',data: [18203, 23489, 29034, 104970, 131744, 630230]},{name: '2012',type: 'bar',data: [19325, 23438, 31000, 121594, 134141, 681807]}]});}},mounted() {this.initCharts();}}
</script>
<style scoped>.container {width: 840px;height: 580px;margin: 50px auto 0;border: 1px solid rgb(228, 57, 97);}#vue-echarts {width: 800px;height: 460px;border: 1px solid #d8d;margin: 0 auto;}
</style>
相关资料参考
https://echarts.apache.org/zh/option.html#series-bar
专栏介绍
在vue和echarts联合技术栈的操控下,本专栏提供行之有效的源代码示例。这里既包括样式的修改,又包括常用bug的解决。
(1)提供title示例:展示控制标题的颜色、位置、子标题,连接等
(2)提供legend示例:展示控制图例的类型、宽度、高度、位置、间隙,边框、阴影、透明度、偏移,字体、颜色,提示语等
(3)提供grid示例:展示控制绘图网格的位置、宽度、高度、边框、阴影等
(4)提供xAxis示例:展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(5)提供yAxis示例:展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(6)提供dataZoom示例:展示控制区域缩放的类型、位置、filterMode等
(7)提供tooltip示例:展示控制提示框组件的触发方式、位置、样式,标签、动画、内容格式器等
(8)提供地理坐标系示例:展示控制地理坐标的经纬度、放缩、位置,距离、字体、边框等
(9)提供animation示例:展示控制动画的持续时间、延迟时间、动画方式,连接等
(10)提供其他示例:展示series等组件的信息内容。
Echarts 柱状图横向展示和竖向展示相关推荐
- echarts柱状图横向排行榜实战开发
先来一张效果图: <template><div class="wrapper"><h1>市场公益考评综合排名<span>Physic ...
- echarts柱状图横向 名字过长时显示省略号
实现效果: var data = ["19.60", "18.90", "13.00", "9.90", "6 ...
- echarts实现柱状图不同颜色 柱状图横向纵向展示
柱状图不同颜色实现 series: [{name: '',type: 'bar', // color:'#50cfe4',//data: [987342,524214,504344,325424,24 ...
- Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记 展示效果如下(主要记录一下 如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
- echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
- echarts 仪表盘 label 如何随径向展示
echarts 仪表盘 label 如何随径向展示 一.需求 默认情况下,仪表盘的 label 文字是横向水平展示的,我需要让它冲圆心对齐,径向显示. 二.实现 需要 echarts 5.40 之后的 ...
- 基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
- linux查看进程ppid,pidof命令从运行的进程中以名称查找出进程号PID/PPID横向大到小展示...
1.释义 从运行的进程中以名称查找出进程号PID/PPID横向大到小展示 2.系统帮助 PIDOF(8) Linux System Administrator's Manual PIDOF(8) NA ...
- echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示 效果图: 实现代码: xAxis:{data:['站点一','站点二']//主要是下面的代码-倾斜axisLabel:{ rotate : 60 } } 到此 ...
最新文章
- 20CSS中的高级技巧
- 视频+课件|单目6D姿态估计算法详解
- 面对众多的前端框架,你该如何学习?
- python如何安装Django框架
- 有什么值得推荐的Java Web练手项目?
- rust(36)-Rust and WebAssembly(3)
- java jar包 平滑重启,nginx 平滑重启的实现方法
- 【Windows phone 8】欢迎引导页面01
- SQL调优(SQL TUNING)之远程支持完成性能大幅优化
- Python模拟浏览器向 CSDN发送POST请求的方法
- linux检测系统是否被入侵(上)
- 计算机硬件基础-笔记
- delphi 热成像摄像机源代码_红外热成像技术广泛应用于夜间及恶劣气候下目标的监控...
- Java 调用 pytorch_5分钟!用Java实现目标检测 | PyTorch
- 聚焦数据安全管理——安踏信息安全管理体系实践
- window.print设置目标打印机_愿得一人心,白首不相离, 极印手机照片打印机入手体验...
- 世界3大IT服务品牌之一塔塔咨询服务公司发布新品牌宣言
- gif一键抠图 在线_「在线抠图神器」推荐3个免费AI一键抠图网站
- FAT32 R0.12b f_mkfs应用实例
- python登陆126邮箱记录
热门文章
- Recheck Cond filter IO\CPU放大 原理与优化CASE - 含 超级大表 不包含(反选) SQL优化
- 优惠券和让利哪种营销方式更好?
- 计算机王道PDF408
- PDF工具Adobe Arcrobat Pro DC下载安装教程
- Android系统字体加载流程
- AngularJS学习笔记-2
- 一个优秀的UI界面应该是什么样的
- 【运维工程师主要做哪些工作】运维工程师
- 【软件测试】翻了下招聘APP只会点点点,很慌......测试业务?技术?
- Win8安装Rational Rose教程