echart 完整例子

<!--集团用电数据柱状图-->
<template><div class="scsj-wsd"><div class="type-btns"><divclass="btns-item":class="currType == 0 ? 'active' : ''"@click="change(0)">年</div><divclass="btns-item":class="currType == 1 ? 'active' : ''"@click="change(1)">月</div></div><divv-if="!loaded"class="loading-div"><dv-loading>Loading...</dv-loading></div><divid="kysj_ele"style="width:100%;height:160px"></div></div>
</template>
<script>
// import axios from 'axios'
// import echarts from 'echarts'
export default {data() {return {domSize: {height: 0},currType: 0, //datas: []};},created() {this.domSize.height = this.$parent.$el.clientHeight - 80;},computed: {loaded() {return this.datas.length;}},mounted() {let dom = document.getElementById('kysj_ele');this.currentChart = echarts.init(dom);const resizeObserver = new ResizeObserver((entries) => {this.domSize.height = this.$parent.$el.clientHeight - 50;this.currentChart.resize();});resizeObserver.observe(this.$parent.$el);//数据有了后更新表格this.getData().then((res) => {this.updateChart();});setInterval(() => {this.getData();}, 5 * 60 * 1000);},methods: {getData() {return this.dataChartLoad().then((res) => {this.datas = res.map((r) => r.data.data);});},//切换类型change(type) {if (this.currType == type) return;this.currType = type;this.updateChart();//重新开始时间循环this.timeChange();},_axios(url, params, type = 'get') {return axios.request({method: type, //请求方法，必须设置为get。其它可选方式为post或patch。url: url, //请求地址。必须设置为“https://codegeex.cn”。或完整的URLparams,headers: {'Content-Type': 'application/json',token: '04b5e08325f14459b9f2dd7560c042ce'}});},//获取数据dataChartLoad() {let url = 'https://api.minexiot.com/mye/qynh/api/v2/screen/energy/groupByYOY';let p1 = this._axios(url, {energyType: '2'}); //请求的请求体。可以将其传递给服务器。如果没有数let p2 = this._axios(url, {energyType: '1'});let p3 = this._axios(url, {energyType: '3'});return Promise.all([p1, p2, p3]);},//初始化initChart() {this.updateChart();},//更新chartupdateChart() {let option = null;if (this.currType == 1) {option = this.getOptionLine();} else {option = this.getOption();}this.currentChart.clear();this.currentChart.setOption(option);},//获取echarts配置getOption(data) {let type = this.currType;let option = {};let unit = [];let dataPrev = [];let dataCurr = [];let currData = this.datas[type];currData.forEach((item, index) => {let v1 = item.values.preYear ? item.values.preYear : '';let v2 = item.values.thisYear ? item.values.thisYear : '';dataPrev.push(v1);dataCurr.push(v2);});//假数据dataPrev = [75, 60, 63, 68, 87, 68, 90, 77, 56, 70, 85, 66];dataCurr = [60, 46, 40, 55, 70, 44, 85, 54, 45, 62, 60, 40];let lineData = [40, 50, 36, 50, 55, 61, 45, 59, 56, 49, 54,34];//假数据endoption = {calculable: true,legend: {// 指示框名字  注意！要和下方series中的name一起改data: [{ name: '出矿过磅量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_react_blue.png' },{name: '中转过磅量',icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_react_green.png'},{ name: '库存量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/rect_yellow.png' }],itemWidth: 12,textStyle: {color: '#ffffff', //字体颜色fontSize: 12},// 指示框位置  距离上下左右多少rigth: '0',left: '35%'},tooltip: {show: true,formatter: '{a} {b} : {c} ' + unit},xAxis: [{type: 'category',data: Array.from({ length: 12 }).map((a, index) => `${index + 1}月`),axisLine: {//x轴线的颜色以及宽度show: true, //是否显示X轴lineStyle: {color: '#fff'}},axisLabel: {// interval: 0,  //间隔几条显示// rotate: 20,  // 切斜度数fontSize: 12 //字体大小},axisTick: {//是否显示刻度线show: false}}],yAxis: [{name: '吨',type: 'value',axisTick: {//y轴刻度线show: false},axisLine: {lineStyle: {color: '#f2eded',//纵坐标刻度文字颜色}},axisLabel: {formatter: '{value} ' + unit,fontSize: 12},splitLine: {//网格线show: true, //是否显示lineStyle: {//网格线样式color: 'rgba(192,192,192,0.2)', //网格线颜色width: 1, //网格线的加粗程度type: 'dashed' //网格线类型}}},{//第二种方式type: 'value',name: '%',min: 0,max: 100,position: 'right',axisLabel: {formatter: '{value}'},splitLine: {//网格线show: true, //是否显示lineStyle: {//网格线样式color: 'rgba(192,192,192,0.2)', //网格线颜色width: 1, //网格线的加粗程度type: 'dashed' //网格线类型}}}],// 整体大小grid: {left: '0%',right: '0%',top: '23%',bottom: '30',containLabel: true,borderColor: 'transparent'},series: [{barWidth: 7, //柱子宽度name: '出矿过磅量',type: 'bar',data: dataPrev,itemStyle: {//颜色样式部分normal: {// barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]label: {show: false, //开启数字显示position: 'top', //在上方显示数字textStyle: {//数值样式color: '#fff', //字体颜色fontSize: 10 //字体大小}},//   柱状图颜色渐变color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(23, 88, 255,0.2)' },{ offset: 1, color: '#1859FF' }])}}},{barWidth: 7, //柱子宽度name: '中转过磅量',type: 'bar',data: dataCurr,itemStyle: {//颜色样式部分normal: {// barBorderRadius: [20, 20, 0, 0], //圆角[上左，上右，下右，下左]label: {show: false, //开启数字显示position: 'top', //在上方显示数字textStyle: {//数值样式color: '#fff', //字体颜色fontSize: 10 //字体大小}},//   柱状图颜色渐变color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(96, 255, 140,0.2)' },{ offset: 1, color: '#31EDB5' }])}}},{name: '库存量',type: 'line',data: lineData,symbolSize: 2, //设置圆点大小为10itemStyle: {color: '#FEFA00'},areaStyle: {normal: {//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: 'rgba(254, 250, 0,0.2)'},{offset: 1,color: '#FEFA00'}])}} //区域颜色渐变}]};return option;},getOptionLine(data) {let type = this.currType;let option = {};let unit = [];let dataPrev = [];let dataCurr = [];let currData = this.datas[type];currData.forEach((item, index) => {let v1 = item.values.preYear ? item.values.preYear : '';let v2 = item.values.thisYear ? item.values.thisYear : '';dataPrev.push(v1);dataCurr.push(v2);});//假数据dataPrev = [75, 60, 63, 68, 87, 68, 90, 77, 56, 70, 85, 66];dataCurr = [60, 46, 40, 55, 70, 44, 85, 54, 45, 62, 60, 40];let lineData = [40, 50, 36, 50, 55, 61, 45, 59, 56, 49, 54,34];//假数据endoption = {calculable: true,legend: {// 指示框名字  注意！要和下方series中的name一起改data: [{ name: '出矿过磅量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_line_blue.png' },{ name: '中转过磅量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_line_green.png' },{ name: '库存量', icon: 'image://https://cdn.minexiot.com/bigscreen/datav-img/lengend_line_green2.png' }],itemWidth: 16,textStyle: {color: '#ffffff', //字体颜色fontSize: 12},// 指示框位置  距离上下左右多少rigth: '0',left: '35%'},tooltip: {show: true,formatter: '{a} {b} : {c} ' + unit},xAxis: [{type: 'category',data:['1日','5日','10日','15日','20日','25日','30日',],// data: Array.from({ length: 31 }).map((a, index) => `${index + 1}`),axisLine: {//x轴线的颜色以及宽度show: true, //是否显示X轴lineStyle: {color: '#fff'}},axisLabel: {// interval: 0,  //间隔几条显示// rotate: 20,  // 切斜度数fontSize: 12 //字体大小},axisTick: {//是否显示刻度线show: false}}],yAxis: [{name: '米',type: 'value',axisTick: {//y轴刻度线show: false},axisLine: {lineStyle: {color: '#f2eded',//纵坐标刻度文字颜色}},axisLabel: {formatter: '{value} ' + unit,fontSize: 12},splitLine: {//网格线show: true, //是否显示lineStyle: {//网格线样式color: 'rgba(192,192,192,0.2)', //网格线颜色width: 1, //网格线的加粗程度type: 'dashed' //网格线类型}}},{//第二种方式type: 'value',name: '%',min: 0,max: 100,position: 'right',axisLabel: {formatter: '{value}'},splitLine: {//网格线show: true, //是否显示lineStyle: {//网格线样式color: 'rgba(192,192,192,0.2)', //网格线颜色width: 1, //网格线的加粗程度type: 'dashed' //网格线类型}}}],// 整体大小grid: {left: '0%',right: '0%',top: '23%',bottom: '30',containLabel: true,borderColor: 'transparent'},series: [{barWidth: 7, //柱子宽度name: '出矿过磅量',type: 'line',data: dataPrev,symbolSize: 2, //设置圆点大小为10itemStyle: {color: '#1859FF', // 数据颜色gradientColorNum: 1}},{barWidth: 7, //柱子宽度name: '中转过磅量',type: 'line',data: dataCurr,symbolSize: 2, //设置圆点大小为10itemStyle: {color: '#31EDB5', // 数据颜色gradientColorNum: 1}},{name: '库存量',type: 'line',data: lineData,symbolSize: 2, //设置圆点大小为10itemStyle: {color: '#FEFA00', // 数据颜色lineStyle: {width: 1, //设置线条粗细type: 'dotted'}//   normal:{//     lineStyle:{//         width:,//         type:'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线//     }// }}}]};return option;}}
};
</script>
<style lang="less">
.scsj-wsd {width: 100%;height: 100%;position: relative;
}.scsj-wsd .type-btns {display: flex;align-items: center;justify-content: flex-end;margin-bottom: 0px;margin-bottom: 7px;.btns-item {width: 48px;height: 20px;background: rgba(0, 37, 37, 0.5);border-radius: 3px;border: 1px solid #1c8583;color: #1c8583;cursor: pointer;text-align: center;line-height: 18px;font-size: 12px;}.active {border: 1px solid #32f0ee !important;color: #32f0ee !important;height: 18px;}
}
</style>

效果图：
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

从公有云对象存储迁移到回私有化 MinIO需要了解的所有信息

从公有云对象存储迁移到回私有化 MinIO需要了解的所有信息

我们上一篇文章《如何从 AWS S3 遣返到 MinIO》的反响非常出色 - 我们已经接到了数十个企业的电话&#xff0c;要求我们提供遣返建议。我们已将这些回复汇总到这篇新文章中&#xff0c;其中我们更深入地研究了与遣返相关的成本和节省&#xff0c;以便您更轻松地进行自己的分析。…
阅读更多...
重学Ajax

重学Ajax

摘要&#xff1a;AJAX是一个在前端的应用非常广泛技术&#xff0c;为什么还要谈它呢&#xff1f;么得办法之前学的不全面&#xff0c;再收拾收拾。水平有限&#xff0c;欢迎指正&#xff01; AJAX&#xff08;全称&#xff1a;Asynchronous JavaScript and XML&#xff09;是一…
阅读更多...
基于C#制作一个俄罗斯方块小游戏

基于C#制作一个俄罗斯方块小游戏

目录 引言游戏背景介绍游戏规则游戏设计与实现开发环境与工具游戏界面设计游戏逻辑实现游戏优化和测试性能优化测试工具和流程说明引言 俄罗斯方块是一款经典的益智游戏，深受玩家喜爱。本文将介绍如何使用C#编程语言制作一个简单的俄罗斯方块小游戏，并探讨其设计与实现过程。…
阅读更多...
Missing or invalid credentials.(Git push报错解决方案)

Missing or invalid credentials.(Git push报错解决方案)

前言 本文主要讲解git push后报错Missing or invalid credentials的解决方案。这里针对的是windows的。 编程环境&#xff1a;VsCode 问题原因 问题翻译起来就是 凭据缺失或无效。这里我们解决方案是取消vscode里面默认的控制终端git凭据来解决,具体方案如下. 解决方案 1…
阅读更多...
Vue3组件通信 详解(下)

Vue3组件通信 详解(下)

Vue3组件通信 详解(上)-CSDN博客 v-model通讯 概述&#xff1a;实现 父↔子 之间相互通信。 v-model本质 组件标签上的v-model的本质&#xff1a;:moldeValue &#xff0b; update:modelValue事件。 <!-- 组件标签上使用v-model指令 --> <AtguiguInput v-model&qu…
阅读更多...
中间件系列 - Kafka3.x从入门到精通

中间件系列 - Kafka3.x从入门到精通

前言 学习视频&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优&#xff0c;深入全面&#xff09;本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 1 Kafka 概述 1.1 定义 Kafka传统定义: Kafka 是一个分布式的基于发布/订阅模式的消息队列…
阅读更多...
链表——超详细

链表——超详细

一、无头单向非循环链表 1.结构&#xff08;两个部分&#xff09;&#xff1a; typedef int SLTDataType; typedef struct SListNode {SLTDataType data;//数据域struct SListNode* next;//指针域 }SLNode; 它只有一个数字域和一个指针域&#xff0c;里面数据域就是所存放的…
阅读更多...
MySQL：MVCC原理详解

MySQL：MVCC原理详解

MySQL是允许多用户同时操作数据库的&#xff0c;那么就会出现多个事务的并发场景。那么再并发场景会出现很多问题&#xff1a;脏读、不可重复读、幻读的问题。 而解决这些问题所用到的方法就是&#xff1a;MVCC 多版本并发控制。而这个MVCC的实现是基于read_view、undoLog 如…
阅读更多...
【基础算法练习】Trie 树

【基础算法练习】Trie 树

文章目录 模板题&#xff1a;[ACwing 835. Trie字符串统计](https://www.acwing.com/problem/content/description/837/)题目描述代码与解题思路 模板题&#xff1a;[ACwing 143. 最大异或对](https://www.acwing.com/problem/content/145/)题目描述代码与解题思路 Trie 算法需…
阅读更多...
搭建 prometheus + grafana + springboot3 监控

搭建 prometheus + grafana + springboot3 监控

下载安装包 下载prometheus&#xff1a;https://github.com/prometheus/prometheus/releases/download/v2.42.0/prometheus-2.42.0.windows-amd64.zip 下载grafana&#xff1a; https://dl.grafana.com/enterprise/release/grafana-enterprise-9.4.1.windows-amd64.zip Spr…
阅读更多...
面向云服务的GaussDB全密态数据库

面向云服务的GaussDB全密态数据库

前言 全密态数据库&#xff0c;顾名思义与大家所理解的流数据库、图数据库一样&#xff0c;就是专门处理密文数据的数据库系统。数据以加密形态存储在数据库服务器中&#xff0c;数据库支持对密文数据的检索与计算&#xff0c;而与查询任务相关的词法解析、语法解析、执行计划生…
阅读更多...
FL Studio21.2.2中文完整版 适合专业创作者

FL Studio21.2.2中文完整版 适合专业创作者

FL Studio 简称FL&#xff0c;全称&#xff1a;Fruity Loops Studio&#xff0c;因此国人习惯叫它"水果"。目前版本是FL Studio2024&#xff0c;它让你的计算机就像是全功能的录音室&#xff0c;大混音盘&#xff0c;非常先进的制作工具&#xff0c;让你的音乐突破想…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023