使用vue做柱状echarts报表

柱状报表
成果展示：

① 后端返回如下数据（female和male每个都有95个数据。从00:00开始每一刻钟对应一个数据）：

② 使用vue，在template标签中写如下代码

<div id="chartmainbar" style="width:1000px; height:600px; display:none"></div>

③ 在script标签中写如下代码

import echarts from 'echarts'

③ export default中如下

props: {className: {type: String,default: 'chart'},id: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '80%'}}data() {return {list: null,male: [],female: [],}
}mounted() {this.drawLine1(this.male, this.female);
},

④ 在获取值的那个方法中加入如下：

this.drawLine1(this.male, this.female);

⑤ 加入如下方法：

drawLine1() {const chartmainbar = echarts.init(document.getElementById('chartmainbar'))chartmainbar.setOption(this.option1(this.male, this.female))
},option1(male, female) {const option = {title: {subtext: "客流量统计报表",x: "4%",textStyle: {color: '#fff',fontSize: '22'},subtextStyle: {color: '#90979c',fontSize: '16',},},tooltip: {trigger: "axis",axisPointer: {type: "shadow",textStyle: {color: "#fff"}},},grid: {borderWidth: 0,top: 110,bottom: 95,textStyle: {color: "#fff"}},legend: {x: '4%',top: '11%',textStyle: {color: '#90979c',},data: ['女', '男', '平均']},calculable: true,xAxis: [{type: "category",axisLine: {lineStyle: {color: '#90979c'}},splitLine: {show: false},axisTick: {show: false},splitArea: {show: false},axisLabel: {interval: 0,},data: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00','02:15', '02:30', '02:45', '03:00','03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00','06:15', '06:30', '06:45', '07:00','07:15', '07:30', '07:45', '08:00','08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'],}],yAxis: [{type: "value",splitLine: {show: false},axisLine: {lineStyle: {color: '#90979c'}},axisTick: {show: false},axisLabel: {interval: 0,},splitArea: {show: false},}],dataZoom: [{show: true,height: 30,xAxisIndex: [0],bottom: 30,start: 30,end: 45,handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',handleSize: '110%',handleStyle:{color:"#d3dee5",},textStyle:{color:"#fff"},borderColor:"#90979c"}, {type: "inside",show: true,height: 15,start: 1,end: 35}],series: [{name: "女",type: "bar",stack: "总量",barMaxWidth: 35,barGap: "10%",itemStyle: {normal: {color: "rgba(255,144,128,1)",label: {show: true,textStyle: {color: "#fff"},position: "insideTop",formatter: function(p) {return p.value > 0 ? (p.value) : '';}}}},data: female},{name: "男",type: "bar",stack: "总量",itemStyle: {normal: {color: "rgba(0,191,183,1)",barBorderRadius: 0,label: {show: true,position: "top",formatter: function(p) {return p.value > 0 ? (p.value) : '';}}}},data: male}]}return option;}

运行即可

报表示例：

https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

使用vue做柱状echarts报表相关推荐

exlc如何对比_excel表格图形数据比较-Excel如何做柱状对比图
excel表格怎么做数据对比图 Excel的图表功能已供了柱状对,下面以Excel 2010为例进行实例演示--用柱状图对比显示下面数据列一和系列二 1.选中数据→插入→柱形图→簇状柱形图 2.因为数 ...
vue实现【echarts中 “7种” Bar柱状图图例】实现人格画像组件的封装，并在柱状条显示label自定义文字
图例一: 图例二: 图例三: 图例四: 图例五: 图例六: 图例七: 一.安装echarts npm install echarts --save 二.在需要的页面引入 import * as ech ...
vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
先奉上官网地址,一切以官网为主 Echrts官网 Echarts的基本使用安装 cnpm i echarts -S 全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上 impor ...
echarts:饼、柱状、折线图的配置说明
文章目录前言柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项有什么功能组件? 渐进式案例: vue中画一个基本的饼图为它添加提示组件tooltip dataZom,用柱状图演 ...
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.接下来我们先对 ...
Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果
目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示
1.柱状纵向变横向将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 //纵向xAxis: [{type: 'value'}],yAxis: [{ ...
ECharts 全局触发click点击事件（Label及柱状）
// 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言需 ...

使用vue做柱状echarts报表

使用vue做柱状echarts报表相关推荐

最新文章

热门文章