首页 > 其他分享 >Vue中使用Echarts

Vue中使用Echarts

时间:2024-02-07 23:34:28浏览次数:35  
标签:Vue name res Echarts echarts value 使用 data order

第一步:安装echarts模块

cnpm install echarts -S

第二步:在 main.js中全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts // 全局引入 后面用this.$echarts就能直接使用了

使用方式:

template中

<template>
    <el-card class="box-card" style="flex: 1; margin: 10px 0">
      <div slot="header" class="clearfix">
        <span>出库状态占比</span>
      </div>
      <div style="height: 300px; width: 100%" id="orderStatus"></div>
    </el-card>
</template>

scripts中

mounted() {  
    this.order_UnSend = res.data.data.order_unSend
    this.order_Sended = res.data.data.order_sended
    this.order_Received = res.data.data.order_received
    this.order_BackOri = res.data.data.order_backOri
    this.order_BackStore = res.data.data.order_backStore
    // 注意:需要先赋值,再渲染数据
    this.renderOrderStatus();
}

methods: {
    //订单状态饼图渲染
    renderOrderStatus() {
      let myStatusOptions = this.$echarts
          .init(
              // 获取id
              document.getElementById("orderStatus")
          );
      let orderStatusOptions = {
        title: {
          text: "订单状态分布",
          left: "center",
          top: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            color: ["#409EFF", "#409EFF", "#67C23A", "#E6A23C", "#F56C6C"],
            data: [
              {
                value: this.order_BackOri,
                name: "退回原厂",
              },
              {
                value: this.order_BackStore,
                name: "退回仓库",
              },
              {
                value: this.order_Received,
                name: "已收货",
              },
              {
                value: this.order_Sended,
                name: "已发货",
              },
              {
                value: this.order_UnSend,
                name: "未发货",
              },
            ],
            radius: ["40%", "70%"],
          },
        ],
      };
      myStatusOptions.setOption(orderStatusOptions);
    }
}

标签:Vue,name,res,Echarts,echarts,value,使用,data,order
From: https://www.cnblogs.com/wellplayed/p/18011473

相关文章

  • 使用RSS+n8n同步博客园文章到cubox
    使用RSS+n8n同步博客文章到CuboxCuboxCubox是一款碎片知识文章收集的应用n8n低代码的workFlow整合大致流程定时触发器->获取RSS列表->迭代->文章是否已经同步->同步文章到cubox->同步记录写到数据库->结束这是一个大概的流程,当然也可以实现同步到其他地方的流程......
  • 使用pyhon实现 2的N次方列表
    pyhon代码defprint_powers_of_two(N):foriinrange(1,N+1):result=2**iprint(f"2的{i}次方={result}")N=int(input("请输入一个整数N:"))print_powers_of_two(N)32次方请输入一个整数N:322的1次方=22的2次方=42的3次方=82的4次方=......
  • 使用GitHub进行协作开发的综合介绍
    简介:GitHub是一个基于云端的代码托管平台,它提供了版本控制、协作开发和代码管理等功能。本文将介绍为什么选择GitHub,如何使用GitHub以及一些常见的坑,同时提供C#语言的具体操作步骤和代码示例。为什么选择GitHub?广泛的开源社区支持:GitHub是全球最大的开源社区之一,拥有庞大的用户......
  • 图片延迟加载插件lazyload使用
    图片懒加载,又称图片延时加载、惰性加载,即在用户需要使用图片的时候才加载。这种技术的主要好处包括:优化页面加载速度:在页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有当这些图片出现在可视区域时才会动态加载。这样可以减少首次加载时需要加载的内容量,显著提高页面加......
  • element UI vue脚手架 接入cdn
    vue.config.jsmodule.exports={configureWebpack:{externals:{'element-ui':'ELEMENT',vue:'Vue'}}//externals配置来告诉Webpack不要打包它。 index.html<!DOCTYPEhtml><htmllang="en&qu......
  • 使用经典技术的音乐网站
    项目地址技术栈后端SpringBoot+MyBatis+Redis前端Vue3.0+TypeScript+Vue-Router+Vuex+Axios+ElementPlus+Echarts简介是一个经典简单的音乐网站。后端基本也就是在CRUD,redis是当缓存用的,数据库用的是mysql.XML自定义(附加)mybatis-plus的mapper配置mapper......
  • 将软件随身携带——portableapps使用
    引言你是否曾有过这样的欲望,把软件装到u盘里,到哪里都可以随时使用,如果是这样的话,那么这篇文章你一定要看!什么是便携式应用便携式应用可不是光不用安装,把软件安装文件夹拷贝到u盘就完事了,便携式应用可以把软件+数据一同带在u盘里,这样走到哪里,都可以“即插即用”。PortableApps......
  • 【调试】pstore原理和使用方法总结
    什么是pstorepstore最初是用于系统发生oops或panic时,自动保存内核logbuffer中的日志。不过在当前内核版本中,其已经支持了更多的功能,如保存console日志、ftrace消息和用户空间日志。同时,它还支持将这些消息保存在不同的存储设备中,如内存、块设备或mtd设备。为了提高灵活性和可扩......
  • 各种网盘使用对比
    百度网盘不充会员,速度极慢,充值超级会员之后,速度飞快,10M/s左右,且网上资源很多,会员费30元/每月,当前在使用。阿里网盘不充会员下载也很快(2M/s),但空间少,充了会员费,速度更快(10M/s),空间更大,30元/每月,网上资源也很多。夸克网盘不充会员极慢,空间极少,会员飞快(10M/s),25元/每月,网上资源不......
  • Go语言精进之路读书笔记第15条——了解string实现原理并高效使用
    15.1Go语言的字符串类型在Go语言中,无论是字符串常量、字符串变量还是代码中出现的字符串字面量,它们的类型都被统一设置为string特点string类型的数据是不可变的对string进行切片化后,Go编译器会为切片变量重新分配底层存储而不是共用string的底层存储string的底层的数据存......