vue里echarts的使用:画饼图和面积折线图

news/2025/2/12 15:04:19/

vue里echarts的使用,我们要先安装echarts,然后在main.js里引入:

//命令安装echarts
npm i echarts//main.js里引入挂载到原型上
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

最终我们实现的效果如下:
在这里插入图片描述
在这里插入图片描述
头部标题这里我们封装了一个全局公共组件common-header,代码如下:

<template></

http://www.ppmy.cn/news/1361026.html

相关文章

常用的制造企业网络优化方案

在制造业企业不断加速转型的情况下&#xff0c;企业内部数据传输面临了更高的要求。在企业的多站点内部网络互联互通方面&#xff0c;常见的组网网络优化方案有多种选择&#xff0c;每种都有其独特的优势。以下是其中VPN、MPLS、SD-WAN三种主要的组网方案&#xff1a; 1. VPN&a…

centos7下docker的安装

背景 总结下docker的一些知识 docker安装&#xff08;有网络版&#xff09; 参考文章我以前试过这个帖子&#xff0c;建议安装高版本的docker&#xff0c;&#xff08;20以上的&#xff0c;不然可能会有一些问题&#xff09; ## 1、安装依赖 [rootiZo7e61fz42ik0Z ~]#yum i…

《图解设计模式》笔记(一)适应设计模式

图灵社区 - 图解设计模式 - 随书下载 评论区 雨帆 2017-01-11 16:14:04 对于设计模式&#xff0c;我个人认为&#xff0c;其实代码和设计原则才是最好的老师。理解了 SOLID&#xff0c;如何 SOLID&#xff0c;自然而然地就用起来设计模式了。Github 上有一个 tdd-training&…

C# 实现网页内容保存为图片并生成压缩包

目录 应用场景 实现代码 扩展功能(生成压缩包) 小结 应用场景 我们在一个求职简历打印的项目功能里&#xff0c;需要根据一定的查询条件&#xff0c;得到结果并批量导出指定格式的文件。导出的格式可能有多种&#xff0c;比如WORD格式、EXCEL格式、PDF格式等&#xff0c;…

【设计模式】01-装饰器模式Decorator

作用&#xff1a;在不修改对象外观和功能的情况下添加或者删除对象功能&#xff0c;即给一个对象动态附加职能 装饰器模式主要包含以下角色。 抽象构件&#xff08;Component&#xff09;角色&#xff1a;定义一个抽象接口以规范准备接收附加责任的对象。具体构件&#xff08…

Git diff Word 文档

前言 前段时间用 nodeJS 写了一个提交代码的工具&#xff0c;开发过程中在认证部分遇到了一些小问题&#xff0c;于是就想看看官方的文档中有没有什么说明之类的&#xff0c;没想到文档中的内容十分丰富&#xff0c;除了解释了 git 相关的原理外&#xff0c;还学到了很多有用的…

多层的二叉树结构如何快速写出其前序、中序、后序。

问题描述&#xff1a;多层的二叉树结构如何快速写出其前序、中序、后序。 问题解答&#xff1a;从顶部的二叉树&#xff0c;依次往下写&#xff0c;先写出第一层的二叉树&#xff0c;然后再写第二层的二叉树。当然按照的规则还是前序根左右&#xff0c;中序左根右&#xff0c;后…

五种多目标优化算法(MOGWO、MOJS、NSWOA、MOPSO、MOAHA)性能对比(提供MATLAB代码)

一、5种多目标优化算法简介 1.1MOGWO 1.2MOJS 1.3NSWOA 1.4MOPSO 1.5MOAHA 二、5种多目标优化算法性能对比 为了测试5种算法的性能将其求解9个多目标测试函数&#xff08;zdt1、zdt2 、zdt3、 zdt4、 zdt6 、Schaffer、 Kursawe 、Viennet2、 Viennet3&#xff09;&#xff0…