vue+element+echarts柱状图+列表
前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面;
页面和js可以echarts官网实例看下都是有的,主要看下如何动态赋值:
柱状图和列表:
<script type="text/javascript" src="/main/common/echarts/echarts.min.js"></script>
<div id="echart" style="width: 100%;height: 300px;margin-bottom: 10px"></div>
<el-table :data="tableData" border style="margin: 0 auto" row-class-name="row_padding"
header-row-class-name="head_padding">
<el-table-column fixed prop="processDeptName" label="单位名称" align="center" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="acceptCount" label="本单位受理量" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="totalCount" label="办理总量" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="completedCount" label="正常完成" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="completedOverCount" label="超时完成" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="processCount" label="正常处理" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="processOverCount" label="超时处理" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="completedPercent" label="完成率" align="center" show-overflow-tooltip></el-table-column>
</el-table>
js:
var vue = new Vue({
el: '#app',
data: {
tableData:[],
},
created: function () {
this.initTable();
}, getChartOption(data){
var option = {
title: {
text: '按办理单位任务统计',
x:'center',
textAlign:'left',
top:'3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '1%',
right: '1%',
top: '15%',
bottom:'10%',
containLabel: true
},
backgroundColor:'#fff',
xAxis: {
type: 'category',
data: data.nameList,
axisLine:{
lineStyle:{
color:'#9a9a9a'
}
}
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#9a9a9a'
}
}
},
series: [{
data: data.valueList,
type: 'bar',
itemStyle:{
normal:{
color:'#427aff'
}
}
}]
};
return option;
},
var ele=document.getElementById('echart');
var myChart = echarts.init(ele);
var option=self.getChartOption({
nameList:nameList,
valueList:valueList
});
myChart.setOption(option);
window.onresize = myChart.resize;
效果:
vue+element+echarts柱状图+列表的更多相关文章
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
- vue 引入 echarts 图表 并且展示柱状图
npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...
- 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
随机推荐
- WinForm PerformClick()
在Winfrom开发中,经常遇到调用Click事件,如:btn_click(null,null),其实winfrom也自带一个模拟点击事件:PerformClick(),区别就是:前者无论控件是否En ...
- 小程序中多个echarts折线图在同一个页面的使用
最近做小程序的业务中遇到一个页面要同时显示几个echarts图,刚开始遇到各种冲突,死数据可以,动态数据就报错的问题,折磨了一天,仔细看了官网和查在各种资料之后,终于解决了. 直接上代码: commi ...
- JUC学习笔记(一)
1.什么是 JUC 1.1.JUC简介 在 Java 中,线程部分是一个重点,本篇文章说的 JUC 也是关于线程的.JUC 就是 java.util .concurrent 工具包的简称.这是一个处理 ...
- 如何将fidd上抓的包移到jmete中
1.fiddler的安装配置就不说了, 网上有很多资源, 不会太难 2.使用fiddler抓包, 相信进来看这篇文章的博友都已经会使用fiddler抓包 3.打开jmeter, 添加>测试计划& ...
- ReentrantLock 中的 4 个坑!
JDK 1.5 之前 synchronized 的性能是比较低的,但在 JDK 1.5 中,官方推出一个重量级功能 Lock,一举改变了 Java 中锁的格局.JDK 1.5 之前当我们谈到锁时,只能 ...
- ELK+kafka docker快速搭建+.NetCore中使用
ELK开源实时日志分析平台.ELK是Elasticsearch,Logstash,Kibana 的缩写. Elasticsearch:是个开源分布式搜索引擎,简称ESLogstash:是一个完全开源的 ...
- MySQL 不完全入门指南
由于 MySQL 的整个体系太过于庞大,文章的篇幅有限,不能够完全的覆盖所有的方面.所以我会尽可能的从更加贴进我们日常使用的方式来进行解释. 小白眼中的 MySQL 首先,对于我们来说,MySQL 是 ...
- 过去,我买漫画看;现在,我用Python爬虫来看
原标题:运用Python多线程爬虫下载漫画 前言: 以前,我都是买漫画书看的,那个时候没有电脑.今天,我到网上看了一下,发现网上提供漫画看,但是时时需要网络啊!为什么不将它下载下来呢! 1.怎样实现 ...
- deepin下启动自己的springcloud服务报错
java.nio.file.AccessDeniedException: /home/msan/logs/csp/sentinel-record.log.2021-01-04.0.2.lck at s ...
- 【AI】TorchVision_DataLoad
From: https://liudongdong1.github.io/ All datasets are subclasses of torch.utils.data.Dataset i.e, t ...