当前位置: 首页 > news >正文

【记录46】【案例】echarts 柱状图

在这里插入图片描述
echarts环境4.1.0

<template><div id="threefour"></div>
</template>
<script>
import * as echarts from "echarts"
export default {name:"",components:{},data(){return {}},methods:{getdata(){var myCharts = echarts.init(document.getElementById('threefour'))var districtList = ['一年级1班', '一年级2班', '一年级3班', '一年级4班', '一年级5班', '一年级6班', '一年级7班', '一年级8班', '一年级9班']var lN = [43, 40, 38, 41, 40, 42, 42, 43, 39, ]   //应到人数var bN = [40, 40, 37, 40, 40, 40, 39, 41, 38, ]    //实到人数var cN = [2, 0, 1, 1, 0, 2, 1, 1, 1, ]     //请假人数var dN = [5, 3, 6, 4, 2, 1, 4, 4, 0,]      //迟到人数var tN = [1, 0, 0, 0, 0, 0, 2, 1, 0,]     //其它let option = {tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: 'rgba(0, 255, 233,0)',},},},legend: {x: '85%', //用百分比 处理块与文字位置y: 'center',orient: 'vertical',textStyle: {fontSize: 12,lineHeight: 45,color: '#666',},//selectedMode: false,    //选中哪个图例 false后图例不可点击data: ['x数', 'y数']},xAxis: {type: 'category',data: districtList,axisLine: {lineStyle: {color: '#E6E6FA'}},axisLabel: {interval:0,rotate:22,}},yAxis: {type: 'value',// minInterval: 500,axisLine: {lineStyle: {color: '#F0F8FF'}},},grid: { //用于处理图标放入过多空白问题top: '3%', //距上边距left: '10%', //距离左边距right: '5%', //距离右边距bottom: '22%', //距离下边距},dataZoom: [{ // 缩放条type: 'inside',start: 30,end: 80}, {start: 30,end: 80}],series: [{name: '应到人数',data: lN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FB8C8C'}, {offset: 1,color: '#F70909'}]),showBackground: false,}, {name: '实到人数',data: bN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FAA46B'}, {offset: 1,color: '#F87219'}]),showBackground: false,},{name: '请假人数',data: cN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FBFB7C'}, {offset: 1,color: '#F9F93A'}]),showBackground: false,},{name: '迟到人数',data: dN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#7792FF'}, {offset: 1,color: '#0033FF'}]),showBackground: false,},{name: '其它',data: tN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#80F6F6'}, {offset: 1,color: '#21EFEF'}]),showBackground: false,},]};myCharts.setOption(option)}},mounted(){this.getdata()}
}
</script>
<style>#threefour { width: 100%; height: 27vh; }
</style>
http://www.lryc.cn/news/375943.html

相关文章:

  • Github2024-06-12 开源项目日报 Top10
  • 茶艺师服务师傅小程序APP源码(APP+小程序+公众号+H5)
  • 【正则表达式】入门
  • 制造业为什么需要ERP企业管理软件?
  • JavaScript Prototype
  • Web Works API 和 Promise 的对比和区别
  • jeecg快速启动(附带本地运行可用版本下载)
  • 【PPT教程】一键重置幻灯片背景的方法,新建幻灯片带默认背景
  • NVIDIA新模型Nemotron-4:98%的训练数据是合成生成的,你敢信?
  • 深度神经网络——什么是NLP(自然语言处理)?
  • 05-5.5.1 哈夫曼树
  • 夯实网络底座:智能云解析助推新基建发展再上新台阶
  • 时间戳转时间格式小记——个位数月份 如何去掉补位0的情况
  • C++ 矩阵乘法
  • 热门开源项目推荐
  • Study--Oracle-03-数据库常规操作
  • OpenCloudOS 8.8 一键安装 Oracle 19C 单机
  • 【Android】【Java】【每日练手3】Android的四个主要组件使用示例
  • 代码随想三刷二叉树篇2
  • QT pro包含库文件目录符号含义
  • uniapp怎么进行页面的跳转
  • 数据库管理-第205期 换个角度看23ai(20240617)
  • 深入解析PHP函数
  • elasticsearch结构化搜索
  • 街道网格宣传稿件投稿我知道了好方法
  • 电脑有线无线一起用怎么设置
  • 通过LotusScript中的NotesDateTime类来进行时间计算
  • 【前端面经】数组算法题解
  • java架构设计-COLA
  • 【进阶篇-Day3:JAVA接口新特性、代码块、内部类、Lambda表达式、组件等的介绍】