Vue 封装echarts柱状图(Bar)组件

目的:减少重复代码,便于维护

显示效果

组件代码

<template><div class="ldw-data-content-box"><div class="ldw-chilren-box"><div class="title" v-if="title">{{ title }}</div><div style="width:100%;flex:1;"><div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div></div></div></div>
</template><script>
var echarts = require("echarts");
const total = function(data){return data.reduce((prev,cur)=>{return prev+cur.value},0)
}
export default {props:{title:"",data:{require:true,type:Array,default:()=>[]},w:{type:String,default:"auto"},column:{type:Boolean,default:true}},data(){return{bg:["#0090FF","#31CFB8","#E55240"],number:null,top:0,h:100,myChart:null}},watch: {data: {//深度监听,可监听到对象、数组的变化handler(val, oldVal) {this.initData();},deep: true, //true 深度监听}},created(){this.number = Math.random(1000)+1;},mounted(){this.initData()},methods:{initData(){let that = thislet canvas = document.getElementById(`canvas-box${this.number}`)this.myChart = echarts.init(canvas);this.myChart.on("click", function(params) {that.$emit('eClick',params)});let option = {title: {},grid: {top: "8%",left: "3%",right: "4%",bottom: "8%",containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {show:false},xAxis: [{type: 'category',axisTick: {show: false},axisLine:{show:false},axisLabel: {interval:0,rotate:40  //倾斜的程度},splitLine:{show:false},data:this.data.map((res)=>{return res.type})}],yAxis: [{type: 'value',axisTick: {show: false},axisLine:{show:false},splitLine:{show:false},}],series: [{name: '总计',type: 'bar',barWidth:35,colorBy:"series",label: {// 柱图头部显示值show: true,textStyle:{fontSize:14,fontWeight:600},position: "top",color:"#E55240",fontSize: "14px",},emphasis:{itemStyle:{color:"#F89387"},},itemStyle:{color:{type: 'linear',colorStops: [{offset: 0,color:"#F89387" // 0% 处的颜色}, {offset: 1,color:"#E55240" // 100% 处的颜色}],global: false // 缺省为 false},},data: this.data.map((res)=>{return res.value})},]};this.myChart.setOption(option)},resize(){this.myChart.resize()},colorFormat(arr){arr.forEach((item)=>{if(item.ldwColor){item.itemStyle = {color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: item.ldwColor[0] // 0% 处的颜色}, {offset: 1, color: item.ldwColor[1] // 100% 处的颜色}],global: false // 缺省为 false}}}})return arr}}
}
</script><style scoped>
.ldw-data-content-box{width:100%;height:100%;display: flex;
}.ldw-data-content-box>.ldw-chilren-box{width:100%;height:100%;display: flex;justify-content: center;align-items: center;flex-flow: column;overflow: hidden;
}
.ldw-data-content-box>.ldw-chilren-box>.title{font-size: 18px;color:#000;text-align: center;padding:24px 0;
}.ldw-bg-box{background: rgba(255,255,255,0.5);border: 1px solid #F4FDFE;border-radius: 20px;
}.ldw-text-text{display: inline-block;text-align: justify;line-height: 0;margin-left: 20px;
}.ldw-text-text::after{content:"";display: inline-block;width:100%;overflow:hidden;height:0;
}.ldw-quan-quan{display: flex;align-items: center;
}.ldw-w{margin-top:6px;position: relative;
}.ldw-quan-box{width: 13px;height: 13px;border-radius: 2px;margin-right: 20px;
}.flex-column{width:100%;display: flex;justify-content: space-around;
}.flex-column .ldw-w{width: auto;
}.flex-column .ldw-quan-box{margin-right: 10px;
}
</style>

调用代码

<template><div class="root flex flex-col border-box"><div  style="width: 400px; height: 400px;"  ><Bar  :title="'统计'" :barType="'x'" :data="chartData" ></Bar></div></div>
</template><script>import Bar from '@/components/echarts/barTwoInfo.vue'export default{name:'',created() {},components: {Bar},data() {return {chartData:[{value:100, type:'一季度'},{value:105, type:'二季度'},{value:201, type:'三季度'},{value:167, type:'四季度'},]}},methods:{}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359649.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

smartgwt_高级SmartGWT教程,第2部分

smartgwt这是我的教程的第二部分&#xff0c;有关使用SmartGWT快速进行UI开发。 在本教程的第一部分中 &#xff0c;我们创建了基本的界面布局并添加了一些基本组件。 现在是时候解决这个问题&#xff0c;并使用SmartGWT的真正功能了。 在继续之前&#xff0c;让我们记住到目前…

百年理工计算机专业课程,这两所国内的百年理工院校,实力强劲,都是国内顶尖实力...

2021年全国高考终于圆满落下了帷幕&#xff0c;但考生们即将要面临一件人生大事&#xff0c;那就是高考志愿填报&#xff0c;因此高考虽然结束&#xff0c;但考生们的压力仍然是不小&#xff0c;只有正确地填好高考志愿&#xff0c;确保自己能够被心仪的高校收录取&#xff0c;…

数学图形之SineSurface与粽子曲面

SineSurface直译为正弦曲面.这有可能和你想象的正弦曲线不一样.如果把正弦曲线绕Y轴旋转,得到的该是正弦波曲面.这个曲面与上一节中的罗马曲面有些相似,那个是被捏过的正四面体,这个则是个被捏过正方体. 本文将展示SineSurface与粽子曲面的生成算法和切图,使用自己定义语法的脚…

计算机工程学院文艺例会,西航职院 | 计算机工程学院 2019年度学生会干部第一次例会...

原标题&#xff1a;西航职院 | 计算机工程学院 2019年度学生会干部第一次例会西航职院计算机工程学院&#xff0c;2019年度第一次学生会干部例会&#xff0c;于2月26日下午在四号教学楼201顺利召开。参加此次会议的有计算机学生会全体学生干部和指导老师刘老师。会议开始&#…

dateformat线程_Java最佳实践–多线程环境中的DateFormat

dateformat线程这是有关使用Java编程语言时的拟议实践的系列文章的第一篇。 所有讨论的主题均基于用例&#xff0c;这些用例源于电信行业关键任务超高性能生产系统的开发。 在阅读本文的每个部分之前&#xff0c;强烈建议您参考相关的Java API文档以获取详细信息和代码示例。…

关于图连通性的几道题(水)

POJ 2186 强连通分量缩点 1 #include<cstdio>2 #include<cstring>3 #include<algorithm>4 using namespace std;5 6 int en[10010], col[10010], dfn[10010], low[10010], stack[10010], tot[10010], chu[10010];7 bool ins[10010];8 int n, m, esize, dtime…

一台计算机硬盘容量标为800gb,一台计算机的硬盘容量标为800GB,其存储容量是()。...

台硬盘不适的装用于料是室外饰材。行的有_能进操作&#xff0c;计算机系统源管在W“资”中操作理器。不正有_确的&#xff0c;容量下列叙述中。的有描述正确&#xff0c;其存文输的中s系统下关于入。文档选定应_整篇&#xff0c;储容d文档编在W辑中。不能作进行_操&#xff0c;…

jQuery验证插件

jQuery验证插件 原文:jQuery验证插件学习要点&#xff1a; 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件&#xff08;validate.js&#xff09;&#xff0c;是一款验证常规表单数据合法性的插件。使用它&#xff0c;极大的解…

爱思助手更新后无法连接服务器,爱思助手出现无法连接或连接超时的操作教程...

使用爱思助手的用户很多&#xff0c;一些新用户不清楚出现无法连接或连接超时怎样处理&#xff0c;今天小编给大家带来在爱思助手出现无法连接或连接超时的操作教程&#xff0c;希望可以帮到大家。爱思助手出现无法连接或连接超时的操作教程一、数据线和电脑USB接口正常状态请确…

计算机演示题打不开,大神为你演示win7系统计算机上右键管理打不开的还原技巧...

当我们经常使用的电脑工作的时候&#xff0c;时间久了难免会遇到win7系统计算机上右键管理打不开的问题&#xff0c;如今就有用户反映在使用电脑的时候遇到win7系统计算机上右键管理打不开的情况不知怎么解决&#xff0c;针对这个问题小编就整理总结出win7系统计算机上右键管理…

apache lucene_Apache Lucene拼写检查器的“您是不是要”功能

apache luceneGoogle的“您是不是要”功能 在上一篇文章中对Lucene进行了介绍之后 &#xff0c;现在是时候提高它并创建一个更复杂的应用程序了。 您肯定最熟悉Google的“您是不是要”功能&#xff08;其他搜索引擎也支持此功能&#xff09;。 这是一个例子&#xff1a; Luce…

荣耀6手机常显示无法链接服务器怎么处理,华为手机连接上WiFi上不了网怎么办...

华为手机(Mate7,荣耀6 Plus,荣耀6,P7) 连接上WiFi上不了网怎么办每当小编被遇到这样的问题&#xff0c;小编都会深深的醉一把。这样的问题就应该被消灭在火星上&#xff0c;谁让他来地球的。网络就像一张大网&#xff0c;哪个节点有问题都可能导致WIFI连上无法上网&#xff0c;…

jboss 配置上下文路径_JBoss Portal上的“ Hello World” portlet

jboss 配置上下文路径Portlet概述 本教程将向您展示如何创建和部署简单的Portlet。 Portlet是基于Java技术的Web组件&#xff0c;可以处理请求并生成动态内容。 Portlet不是自治实体&#xff0c;但是由Portlet容器管理&#xff0c;Portlet容器为Portlet执行提供了必要的运行时…

创建型-工厂方法模式

1、工厂方法模式意图&#xff1a; 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。Factory Method使一个类的实例化延迟到其子类。 工厂方法模式用于为属于同一类别的产品定义对应的具体工厂类&#xff0c;并将具体工厂类开放给用户类来使用。 2、应用场景&…

服务器添加角色显示灰色,添加角色 web服务器 灰色

添加角色 web服务器 灰色 内容精选换一换OneAccess支持通过AD认证用户身份和控制权限。AD全称Active Directory&#xff0c;中文名称活动目录。您可以将AD简单理解成一个数据库&#xff0c;其存储有关网络对象的信息&#xff0c;方便管理员和用户查找所需信息。本文主要介绍One…

虚拟服务器关机怎么开,云服务器关机了怎么开启

云服务器关机了怎么开启 内容精选换一换开启防护后&#xff0c;您可以根据需要进行安全配置。包括配置常用登录地、常用登录IP、SSH登录IP白名单&#xff0c;开启恶意程序自动隔离查杀功能。配置常用登录地后&#xff0c;企业主机安全服务将对非常用地登录主机的行为进行告警。…

web文件怎么传到服务器,web文件传到服务器

web文件传到服务器 内容精选换一换工具中所有涉及上传文件功能的&#xff0c;如果需要上传的文件大于1GB或者解压后超过剩余磁盘空间的一半&#xff0c;则需要释放磁盘空间或手动将文件上传至服务器&#xff0c;其他情况可通过Web界面上传功能上传。Web服务端证书&#xff0c;即…

weblogic ejb_使用Oracle WebLogic对应用程序外部的EJB的引用

weblogic ejb在之前的文章中&#xff0c;我们对EJB 3.0版及其为您提供的构建Java EE应用程序的可移植机制进行了概述。 由于Java EE规范都是关于可移植性的&#xff0c;因此冒着重复自我的风险&#xff0c;我们经常强调EJB v。3.0规范上仍然存在最重要的可移植性限制&#xff1…

Android Studio显示行数

Android Studio在打开的文件左側单击鼠标右键&#xff0c;也能像Eclipse一样设置显示代码行数&#xff0c;如图1。可是这边跟Eclipse有一个非常大的差别&#xff0c;Eclipse设置后&#xff0c;其余的相应文件也跟着生效&#xff0c;即使文件关闭后又一次打开行数也还是会显示&a…

visio 小技巧

Visio作图非常的方便 目前我还是用Visio2003&#xff0c;有一些小技巧&#xff0c;记录一下。 1、visio修改文本框文字对齐方式。默认的对齐方式是上下、左右居中。修改的位置: 在一个文档中可以插入多个标签页&#xff0c;当需要分页&#xff0c;用不同页归类不同信息的时候使…