Echarts进度条式的柱状图
一、代码简介
本次主要是在Vue web项目中,利用Echarts实现一个类似进度条似的、颜色渐变的水平柱状图
二、功能预览
三、示例代码
<template>
<div id="echartsBar" style="width: 678px;height: 500px"></div>
</template>
<script>
import Echarts from 'echarts'
export default {
name: "test",
data() {
return {
chart: null
}
},
methods: {
echartsBarInit() {
this.chart = Echarts.init(document.getElementById('echartsBar'));// 初始化echarts实例
this.chart.setOption(// 通过setOption来生成柱状图
{
grid: { // 直角坐标系内绘图网格
left: '80', //grid 组件离容器左侧的距离,
//left的值可以是80这样具体像素值,
//也可以是'80%'这样相对于容器高度的百分比
top: '80',
right: '0',
bottom: '0',
containLabel: true //gid区域是否包含坐标轴的刻度标签。为true的时候,
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
},
xAxis: { //直角坐标系grid中的x轴,
//一般情况下单个grid组件最多只能放上下两个x轴,
//多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
type: 'value',//坐标轴类型,分别有:
//'value'-数值轴;'category'-类目轴;
//'time'-时间轴;'log'-对数轴
splitLine: {show: false},//坐标轴在 grid 区域中的分隔线
axisLabel: {show: false},//坐标轴刻度标签
axisTick: {show: false},//坐标轴刻度
axisLine: {show: false},//坐标轴轴线
},
yAxis: {
type: 'category',
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {
color: 'black',
fontSize: 36
},
data: ['a','b','c']//类目数据,在类目轴(type: 'category')中有效。
//如果没有设置 type,但是设置了axis.data,则认为type 是 'category'。
},
series: [//系列列表。每个系列通过 type 决定自己的图表类型
{
name: '%',//系列名称
type: 'bar',//柱状、条形图
barWidth: 19,//柱条的宽度,默认自适应
data: [20,40,60],//系列中数据内容数组
label: { //图形上的文本标签
show: true,
position: 'right',//标签的位置
offset: [0,-40], //标签文字的偏移,此处表示向上偏移40
formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
color: 'black',//标签字体颜色
fontSize: 36 //标签字号
},
itemStyle: {//图形样式
normal: { //normal 图形在默认状态下的样式;
//emphasis图形在高亮状态下的样式
barBorderRadius: 10,//柱条圆角半径,单位px.
//此处统一设置4个角的圆角大小;
//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
color: new Echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: '#22B6ED'//柱图渐变色起点颜色
},
{
offset: 1,
color: '#3FE279'//柱图渐变色终点颜色
}
]
)
}
},
zlevel:1//柱状图所有图形的 zlevel 值,
//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
},
{
name: '进度条背景',
type: 'bar',
barGap: '-100%',//不同系列的柱间距离,为百分比。
// 在同一坐标系上,此属性会被多个 'bar' 系列共享。
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效,
//并且是对此坐标系中所有 'bar' 系列生效。
barWidth: 19,
data: [100, 100, 100],
color: '#151B87',//柱条颜色
itemStyle: {
normal: {
barBorderRadius: 10
}
}
}
]
}
)
}
},
mounted() {
this.$nextTick(function () {
this.echartsBarInit()
})
}
}
</script>
<style scoped>
</style>
Echarts进度条式的柱状图相关推荐
- 前端 圆形进度图_Highcharts 圆形进度条式测量图
Highcharts 圆形进度条式测量图 以下实例演示了圆形进度条式测量图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 chart.type ...
- echarts进度条
option = {grid: { // 直角坐标系内绘图网格left: '10', //grid 组件离容器左侧的距离,//left的值可以是80这样具体像素值,//也可以是'80%'这样相对于容器 ...
- 【百度echarts】实现圆环进度条-代码示例代码demo
[百度echarts]实现圆环进度条-代码示例 <!DOCTYPE html> <html lang="en"> <head><meta ...
- echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体
记录工作中用到的一些echats图标 1.进度条 有两种方式: a.通过elemnt-ui组件el-progress组件实现 上面的进度条光使用el-progress无法实现,el-progress不 ...
- echarts渐变进度条
echarts渐变进度条 展示情况如下图 相关代码 var data = ['数据一','数据二',"数据三","数据四","数据五",&q ...
- 项目看板开发经验分享(二)——事业部能源监控看板(进度条拟柱状图图表、圆柱形柱状图、图表左右滚动进度条、导航轮播按钮)
系列第二篇,话不多说,直接进入正题 事业部能源监控看板展示视频 1.进度条组件 因为整个看板有四处地方用到,结合上一期提到的内容,我们优先考虑将这个模块做成组件 UED给的样式用echarts会很麻烦 ...
- [C# Control] 仿RAR式进度条 (RarProgressBar)
Download Source & Demo System.Windows.Forms.ProgressBar的样式实在是太普通了, RarProgressBar让你多一种选择. 我并没有实现 ...
- 基于Vue的事件响应式进度条组件
写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容 ...
- android 时钟进度条,CSS3时钟式进度条
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
最新文章
- 重磅!Science 上海交大发布最新“全世界最前沿的125个科学问题”!
- Intellij IDEA调试功能使用总结
- cad新手必练300图_[CAD]平面练习图,CAD新手练技术练速度的好去处
- 捕捉Entity framework 6的详细异常提示
- 如何检查对象是否为数组?
- MySQL 联合查询
- 嵌入式工程师必须知道的一些好网站
- 免费智能AI文章生成器-只需要输入关键词自动生成文章的软件
- Photoshop基础照片美化
- 决策树---使用三种方法对数据建立决策树
- 神舟战神k550d i7d2笔记本u盘启动的方法
- 房东家的网线不用账号和密码就能上网怎么设置路由器
- 判断一个数n能否同时被3和5整除。
- 找不到实时聊天软件?给你推荐电商企业都在用的!
- 域渗透基础_域渗透实战下gpo策略利用
- 出生日期转化为岁月天
- win10的0x0000225及0x000007b修复方法
- Kafka可视化管理工具kafka-manager部署安装和使用-已更名为CMAK
- Java API 访问HA模式下的HDFS集群
- java小型超市系统_Java小型超市收银系统
热门文章
- EDA(Quartus II)——ADC采样控制电路设计
- 干货 | 播音主持基本功解析(上)
- Linux_Shell Shell编程简介
- 被垃圾分类逼疯?试试这款垃圾自动分类器
- python爬虫入门练习:BeautifulSoup爬取猫眼电影TOP100排行榜,pandas保存本地excel文件
- 在Maven项目中添加Maven仓库和私服不存在的jar包
- codeforces1361C Johnny and Megan‘s Necklace
- soulworker日服显示无服务器,混沌与秩序Online - 魔幻3D MMORPG手游玩得时候总是白屏什么原因...
- Linux下select函数实现的聊天服务器
- 为编辑器TeXworks添加命令biber