echarts的使用

1. 普通版

其实主要就是option1,option1就是画的图

echats不能响应刷新,要想实时刷新监听刷新的值重新调用一下方法即可

html
<div class="echart" style="width: 100%;height: calc(100% - 130px)" ref="main1"></div>

 
js
import * as echarts from "echarts";

 mounted() {
    this.initDayEcharts();
},

initDayEcharts() {
      const option1 = {
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          y: 'bottom',
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: this.inAndOutWarehouseToday.name,
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            }
          },
        },
        series: [
          {
            name: '入库数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            color: '#4F89FC',
            //动态条形图宽度
            barWidth: 20 ,
            data: this.inAndOutWarehouseToday.inNum
          },
          {
            name: '出库数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            color: '#A5DC65',
            barWidth: 20,
            data: this.inAndOutWarehouseToday.outNum
          }
        ]
      };

      // 获取DOM元素
      const main1 = echarts.init(this.$refs.main1);
      // 设置图表配置项和数据
      main1.setOption(option1);

    },

2. 可跳转路径版+赋值版

注意样式要给宽度,不然看不到

<div id="roadElectricity"  style="flex: 1;height: 400px;width: 500px"></div>


js
  mounted() {
    this.getRouteElectromechanical()
  },
 methods: {
a    sync getRouteElectromechanical(params) {
      let queryParams = Object.assign({}, {name: '机电设施路段机电统计'}, params)
      let {data: data} = await commonListData(queryParams)
      console.log("data===",data)

      let res = data || []
      let roadElectricity = this.$echarts.init(document.getElementById('roadElectricity'))
      let  option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 0,
                name: '服务区监控'
              },
              {
                value: 0,
                name: '路段监控系统'
              },
              {
                value: 0,
                name: '站级监控系统'
              },
            ],
            radius: '50%'
          }
        ]
      };
      if (res.length > 0) {
        console.log("机电设施路段机电统计=", res)
        option.series[0].data = res.map(item => Object.assign({}, {value: item.count, name: item.asset_type_name}))
      }

      roadElectricity.setOption(option)

      roadElectricity.on("click", (params) => {
        console.log('params=', params)
        this.$router.push({
          path: '/account/asset/account/search/assetDetail',
          query: Object.assign({}, {
                assetTypeId: 1037 ,
                assetTypeName: params.name
              }
          )
        })
      })
    },

}

this.$echarts是全局定义的,都差不多

main.js

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

2. 的一句代码解析

for (let i = 0; i < reoption.series[0].data = res.map(item => Object.assign({}, {value: item.count, name: item.asset_type_name}))

非简写

for (let i = 0; i < res.length; i++) {
  let item = res[i];
  let newItem = {value: item.count, name: item.asset_type_name};
  option.series[0].data.push(newItem);
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

生物医药行业密钥管理系统特点 安当加密

生物医药行业密钥管理系统的特点主要表现在以下几个方面&#xff1a; 安全性&#xff1a;生物医药行业涉及的数据往往具有极高的私密性和敏感性&#xff0c;因此&#xff0c;密钥管理系统必须具备极高的安全性。这包括对密钥的生成、存储、传输和使用等各个环节进行严格的管理和…

广州一母婴店因设置0元购导致关店

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 广州的一家母婴用品网店Minitutu因双十一优惠券设置错误&#xff0c;导致所有商品变成0元购买&#xff0c;引发消费者疯狂抢购&#xff0c;15万多单订单中有800多万元的损失。店家无奈之下只能暂停营…

亚马逊,shopee,lazada自养号测评:提高店铺曝光,增加产品销量

如何在较短的时间内让自己的店铺排名升高&#xff0c;提高产品销量&#xff0c;除了依靠选品和广告之外&#xff0c;亚马逊测评 在店铺的运营中也是必不可少的环节。 自养号测评对亚马逊卖家来说&#xff0c;是运营店铺的重要手段之一。一个产品想要有更好的曝光、更高的转化率…

优卡特脸爱云一脸通智慧管理平台权限绕过漏洞复现【CVE-2023-6099】

优卡特脸爱云一脸通智慧管理平台权限绕过漏洞复现【CVE-2023-6099】 一、 产品简介二、 漏洞概述三、 影响范围四、 复现环境五、 漏洞复现手动复现自动化复现(小龙POC开源) 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信…

OSCP系列靶场-Esay-DC-1

目录 总结 准备工作 信息收集-端口扫描 目标开放端口收集 目标端口对应服务探测 信息收集-端口测试 22-SSH端口的信息收集 22-SSH端口版本信息与MSF利用(pass) 22-SSH手动登录尝试(失败) 22-SSH弱口令爆破(爆破着玩) 80-HTTP端口的信息收集 信息收集-网站指纹 漏洞…

水库大坝安全监测系统守护水利工程安全的坚实后盾

WX-WY1 随着社会经济的发展和科技的进步&#xff0c;水利工程的安全问题越来越受到人们的关注。水库大坝作为水利工程的重要组成部分&#xff0c;其安全状况直接关系到周边地区人民的生命财产安全和生态环境。因此&#xff0c;建立一个高效、可靠的水库大坝安全监测系统至关重要…

【2021集创赛】NI杯三等奖:基于IECUBE-3100的高精度数模转换器设计及自动化测试方案

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 杯赛题目&#xff1a;DAC芯片测试 参赛要求&#xff1a;本科生组 赛题内容&#xff1a; NIC公司最近正在竞争一个8bit DAC芯片设计的订单机会&#xff0c;需要按照甲方需求尽快提交芯片的设…

二百零四、Flume——登录监听窗口报错Ncat: bind to :::44444: Address already in use. QUITTING.

一、目的 Flume安装好后测试开启监听窗口44444&#xff0c;结果报错Ncat: bind to :::44444: Address already in use. QUITTING. 二、报错详情 Ncat: bind to :::44444: Address already in use. QUITTING. 三、报错原因 经过分析发现&#xff0c;44444窗口已经被占用 […

在UOS系统中编译CEF源码

一、下载cef代码 git clone gitbitbucket.org:chromiumembedded/cef.git 二、执行自动下载代码 由于chromium的代码很大&#xff0c;至少需要准备大概80G的硬盘&#xff01;&#xff01;&#xff01;整个代码量太大还是多准备一些空间吧&#xff08;强烈建议使用固态硬盘保存否…

如何在外部数据库中存储空间化表时使用Mapinfo_mapcatalog

开始创建地图目录表之前 您将使用EasyLoader在要使用的数据库中创建地图目录表。EasyLoader与MapInfo Pro一起安装。 &#xff08;工具“DBMS_Catalog”不再随MapInfo Professional 64位一起提供&#xff0c;因为它的功能可以在EasyLoader工具中找到。&#xff09; ​ 注&…

如何在MapInfo Pro中访问WMS数据?

从Web地图服务检索地图数据 将WMS服务器添加到MapInfo Pro后&#xff0c;用户可以从中检索地图数据。请记住&#xff0c;Web地图服务是一项新技术&#xff0c;您正在寻找的地图可能不适合所需的地理位置。 此外&#xff0c;所提供的数据由服务器确定。当将WMS数据作为工作空间的…

MODBUS转PROFINET网关TS-180连接西门子PLC和工业称重仪表

项目 随着科技的高速发展&#xff0c;工业自动化行业对日益多样的称重需求越来越高&#xff0c;上海某公司在国内的一个 工业自动化项目中&#xff0c;监控中心系统需要远程实时采集工业称重仪表测量的各种称重参数。该系统使用的是 西门子 S7-300 PLC&#xff0c;支持 PROFINE…

一书了解国产操作系统openEuler

操作系统是计算机之“魂” 数字化、智能化正在深刻地改变着我们的生活方式&#xff0c;也深刻地影响着世界格局。 支撑数字化、智能化的关键是数字基础设施&#xff0c;主要涉及数据中心、互联网、物联网、人工智能等新一代信息技术。 数字基础设施已成为保障产业格局、经济…

requests 技术问题解决流程:从问题重现到测试验证

在 #homedesign 项目中&#xff0c;用户 jimmysisonlucas 报告了一个bug。根据他的描述&#xff0c;他希望解决这个bug。然而&#xff0c;由于他没有提供详细的bug描述&#xff0c;我们无法确定具体的bug是什么。 问题的解决流程&#xff1a;从bug重现到测试验证 尽管我们没有…

Java爬虫框架下代理使用中的TCP连接池问题及解决方案

引言 当使用Java爬虫框架进行代理爬取时&#xff0c;可能会遇到TCP连接池问题&#xff0c;导致"java.net.BindException: Cannot assign requested address"等错误。本文将介绍如何以爬取小红书为案例&#xff0c;解决Java爬虫框架中代理使用中的TCP连接池问题&…

递归和分治

递归 递归&#xff08;英语&#xff1a;Recursion&#xff09;&#xff0c;在计算机科学中&#xff0c;递归指的是一个函数在其定义中调用自身的方法。这种技术允许程序解决复杂问题&#xff0c;通过将它们分解为更小、更易管理的相似问题。递归通常与分治策略相关联&#xff…

Idea 2023.2.5配置(插件、Maven等)

IDEA2023.2.5配置 一. 插件Alibaba Java Coding Guidelines plugin supportMaven HelperMyBatisXSonarLintTranslationVuesion Theme 二. 自定义创建live template&#xff0c;快速写代码三. 修改全局配置3.1 Maven配置3.1.1 安装MavenStep1. 下载Step2. 安装Step3. 创建系统环…

论文阅读:“iOrthoPredictor: Model-guided Deep Prediction of Teeth Alignment“

文章目录 IntroductionMethodologyProblem FormulationConditional Geometry GenerationTSynNetAligned Teeth Silhouette Maps Generation ResultsReferences Github 项目地址&#xff1a;https://github.com/Lingchen-chen/iOrthopredictor Introduction 这篇文章提出了一种…

栈和队列

目录 1.栈 1.1栈的概念及结构 1.2栈的实现 2.队列 2.1队列的概念及结构 2.2队列的实现 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈…

重视日常消防巡检有必要,智能巡检系统来帮忙

近日,山西吕梁市永聚煤矿一办公楼发生火灾&#xff0c;造成重大人员伤亡&#xff0c;事故造成26人死亡、38人受伤。 是的&#xff0c;你没看错&#xff0c;煤矿公司、办公楼火灾、重大伤亡。第一反应&#xff0c;煤矿即使出事故也多为作业事故&#xff0c;居然还能在日常消防安…