vue+echarts 几个案例

普通柱状图

<template><!--  容器默认宽高是0 如果不设置 页面不显示--><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"
import axios from 'axios'export default {mounted() {let mychart = echarts.init(this.$refs.mychart)let xData = ["1","2","3","4"]let yData = [1,2,3,4]let option = {title:{text:"测试用例"},xAxis:{data:xData,type:"category" //value数据轴 category类目轴},yAxis:{},series:[{name:"测试",type:"bar",data:yData,markPoint:{ //set max value and min valuedata:[{type:"max",name:"max value"},{type:"min",name:"min value"}]},// line of chartsmarkLine:{data:[{type:"average"}]}}]}// 设置图标mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border:1px solid blue;
}
</style>

水平柱状图

<template><!--  容器默认宽高是0 如果不设置 页面不显示--><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"
import axios from 'axios'export default {mounted() {let mychart = echarts.init(this.$refs.mychart)let xData = ["1","2","3","4"]let yData = [1,2,3,4]let option = {title:{text:"测试用例"},xAxis:{type:"value" //value数据轴 category类目轴},yAxis:{data:xData,type:"category" //value数据轴 category类目轴},series:[{name:"测试",type:"bar",data:yData,markPoint:{ //set max value and min valuedata:[{type:"max",name:"max value"},{type:"min",name:"min value"}]},// line of chartsmarkLine:{data:[{type:"average"}]}}]}// 设置图标mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border:1px solid blue;
}
</style>

饼状图

<template><!--  容器默认宽高是0 如果不设置 页面不显示--><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"
import axios from 'axios'export default {mounted() {let mychart = echarts.init(this.$refs.mychart)// 设置数据let data = [{value:67,name:"美食"},{value:175,name:"数码"},{value:27,name:"家电"},{value:99,name:"游戏"}]let option = {title:{text:"饼状图测试用例",left:"center"},legend:{left:"left",orient:"verical"},series:[{name:"销量统计",type:"pie",  // 指定为饼状图data:data,radius:["40%","70%"], //设置饼图的半径 [内半径 外半径]// 设置环形图的文本标签label:{show:true,position:"inside" // outside外侧展示 inside内侧展示}}]}// 设置图标mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border:1px solid blue;
}
</style>

玫瑰图

<template><!--  容器默认宽高是0 如果不设置 页面不显示--><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"
import axios from 'axios'export default {mounted() {let mychart = echarts.init(this.$refs.mychart)// 设置数据let data = [{value:20,name:"A"},{value:40,name:"B"},{value:60,name:"C"},{value:80,name:"D"},{value:100,name:"E"},{value:120,name:"F"},{value:140,name:"G"}]let option = {title:{text:"玫瑰图测试用例",left:"center"},legend:{left:"left",orient:"verical"},series:[{name:"销量统计",type:"pie",  // 指定为饼状图data:data,roseType: 'area'}]}// 设置图标mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border:1px solid blue;
}
</style>

折柱混合图

<template><!--  容器默认宽高是0 如果不设置 页面不显示--><div ref="mychart" id="mychart"></div>
</template>
<script >
import * as echarts from "echarts"export default {mounted(){let mychart = echarts.init(this.$refs.mychart)let option = {title:{text:"混合图测试用例"},legend: {selectedMode: true,//可点击data: ['注册用户', '累计用户量'],bottom: 0},grid: {left: 100},xAxis: [{type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],}],yAxis: [{type: 'value',name: '注册用户',splitLine: {//显示分割线show: true}},{type: 'value',name: '累计用户量',splitLine: {show: true}}],series: [{name: '注册用户',type: 'bar',data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],itemStyle: {color: 'rgba(132, 136, 211, 1)'}},{name: '累计用户量',type: 'line',yAxisIndex: 1,//索引从0开始data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],itemStyle: {color: 'rgba(91, 245, 204, 1)'}}]}mychart.setOption(option)}
}</script><style >
#mychart {height: 500px;width: 500px;border:1px solid blue;
}
</style>

气泡图

<template><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"export default {mounted() {let mychart = echarts.init(this.$refs.mychart)let datalist = [{label: "苹果",value: 10,},{label: "橘子",value: 1,},{label: "西瓜",value: 50,},{label: "香蕉",value: 100,},];let option = {title:{text:"气泡图测试用例"},xAxis:{},yAxis:{},series:{type:"graph", // 关系图data:datalist}}mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border: 1px solid blue;
}
</style>

雷达图

<template><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"export default {mounted() {let mychart = echarts.init(this.$refs.mychart)let option = {title: {text: "雷达图测试用例"},legend: {data: ['Allocated Budget', 'Actual Spending']},radar: {// shape: 'circle',indicator: [{ name: 'Sales', max: 6500 },{ name: 'Administration', max: 16000 },{ name: 'Information Technology', max: 30000 },{ name: 'Customer Support', max: 38000 },{ name: 'Development', max: 52000 },{ name: 'Marketing', max: 25000 }]},series: [{name: "雷达图",type: "radar", //指定雷达图data: [{value: [4200, 3000, 20000, 35000, 50000, 18000]},{value: [5000, 14000, 28000, 26000, 42000, 21000]}]}]}mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border: 1px solid blue;
}
</style>

折线图

<template><!--  容器默认宽高是0 如果不设置 页面不显示--><div ref="mychart" id="mychart"></div>
</template><script>
import * as echarts from "echarts"
import axios from 'axios'export default {mounted() {let mychart = echarts.init(this.$refs.mychart)let xData = ["测试","测试","测试","测试"]let yData = [1123,3412,1234,4522]let option = {title:{text:"折线图测试用例"},xAxis:{name:"美食",data:xData},yAxis:{},series:{type:"line",data:yData}}// 设置图标mychart.setOption(option)}
}</script><style>
#mychart {height: 500px;width: 500px;border:1px solid blue;
}
</style>

散点图

<template><div ref="mychart" id="mychart"></div>
</template><script >
import * as echarts from "echarts"
export default {mounted() {let mychart = echarts.init(this.$refs.mychart)let option = {title: {text: "散点图测试用例"},xAxis:{},yAxis:{},series:[{type:"scatter",data: [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.2],[11.5, 7.2],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68]]}]}mychart.setOption(option)}
}</script><style >
#mychart{height: 500px;width: 500px;border: 1px solid blue;
}
</style>

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

(Matlab)基于CNN-Bi_LSTM的多维回归预测(卷积神经网络-双向长短期记忆网络)

(Matlab)基于CNN-Bi_LSTM的多维回归预测(卷积神经网络-双向长短期记忆网络)

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码展示&#xff1a; 四、完整程序数据分享&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平…
阅读更多...
数字电源简介

数字电源简介

数字电源简介 定义主要应用场景数字电源的基本组成常见算法常见电源拓扑PFCLLC 数字电源与模拟电源对比参考链接 定义 常见定义有以下四种&#xff1a; 通过数字接口控制的开关电源&#xff0c;强调的是数字电源的“通信”功能。可通过I2C或类似的数字总线来对数字信号进行控…
阅读更多...
springboot整合websocket后启动报错：javax.websocket.server.ServerContainer not available

springboot整合websocket后启动报错：javax.websocket.server.ServerContainer not available

一、场景 Springboot使用ServerEndpoint来建立websocket链接。引入依赖。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>配置Websocket Confi…
阅读更多...
九：day01_ 消息队列01

九：day01_ 消息队列01

第一章 RabbitMQ 概念 1.1.1 消息队列 MQ全称Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于系统之间的异步通信。 1.1.2 消息 两台计算机间传送的数据单位。消息可以非常简单&#xff0c;例如只包含文本字符串&#x…
阅读更多...
【目标检测】YOLOv5算法实现(九)：模型预测

【目标检测】YOLOv5算法实现(九)：模型预测

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本系列文章主要以YOLOv5为例完成算法的实现&#xff0c;后续修改、增加相关模…
阅读更多...
深入解析JavaScript属性的getter和setter

深入解析JavaScript属性的getter和setter

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在JavaScript中,对象属性除了直接设置值之外,还可以通过getter和sett…
阅读更多...
鸿蒙OS4.0兼容性测试

鸿蒙OS4.0兼容性测试

背景 OpenHarmony兼容性测评主要是验证合作伙伴的设备和业务应用满足OpenHarmony开源兼容性定义的技术要求&#xff0c;确保运行在OpenHarmony上的设备和业务应用能稳定、正常运行&#xff0c;同时使用OpenHarmony的设备和业务应用有一致性的接口和业务体验。 OpenHarmony兼容…
阅读更多...
MongoDB调优

MongoDB调优

三大导致 MongoDB 性能不佳的原因 1&#xff09;慢查询2&#xff09;阻塞等待3&#xff09;硬件资源不足1,2通常是因为模型/索引设计不佳导致的。排查思路&#xff1a;按1-2-3依次排查。 影响 MongoDB 性能的因素 MongoDB 性能监控工具 Free Monitoring 从版本 4.0 开始&am…
阅读更多...
redis经典面试题

redis经典面试题

说说你对Redis的理解 Redis是一个基于Key-Value存储结构的开源内存数据库&#xff0c;也是一种NoSQL数据库。 它支持多种数据类型&#xff0c;包括String、Map、Set、ZSet和List&#xff0c;以满足不同应用场景的需求。 Redis以内存存储和优化的数据结构为基础&#xff0c;提…
阅读更多...
Python爬虫实战：IP代理池助你突破限制，高效采集数据

Python爬虫实战：IP代理池助你突破限制，高效采集数据

当今互联网环境中&#xff0c;为了应对反爬虫、匿名访问或绕过某些地域限制等需求&#xff0c;IP代理池成为了一种常用的解决方案。IP代理池是一个包含多个可用代理IP地址的集合&#xff0c;可以通过该代理池随机选择可用IP地址来进行网络请求。 IP代理池是一组可用的代理IP地址…
阅读更多...
网页设计（十一）JavaScript事件分析

网页设计（十一）JavaScript事件分析

一、设计校园办公系统认证页面 校园办公系统认证页面 校园办公系统认证页面初始布局 卡号有效性检查页面 口令有效性检查页面 二次口令有效性检查页面 QQ/微信有效性检查图 <!-- prj_11_1.html --> <!doctype html> <html lang"en"><…
阅读更多...
Java设计模式-迭代器模式

Java设计模式-迭代器模式

迭代器模式 一、概述二、结构三、案例实现四、优缺点五、使用场景六、JDK源码解析 一、概述 定义&#xff1a; 提供一个对象来顺序访问聚合对象中的一系列数据&#xff0c;而不暴露聚合对象的内部表示。 二、结构 迭代器模式主要包含以下角色&#xff1a; 抽象聚合&#xf…
阅读更多...
postman做接口测试

postman做接口测试

之前搞自动化接口测试&#xff0c;由于接口的特性&#xff0c;要验证接口返回xml中的数据&#xff0c;所以没找到合适的轮子&#xff0c;就自己用requests造了个轮子&#xff0c;用着也还行&#xff0c;不过就是case管理有些麻烦&#xff0c;近几天又回头看了看postman也可以玩…
阅读更多...
论文笔记（四十）Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds

论文笔记（四十）Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds

Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds 文章概括摘要1. 介绍2. 相关工作3. 学习 6D 抓握政策3.1 背景3.2 从点云抓取 6D 策略3.3 联合运动和抓握规划器的演示3.4 行为克隆和 DAGGER3.5 目标--辅助 DDPG3.6 对未知物体进行微调的后视目标 4. 实…
阅读更多...
CleanMyMac X .4.14.7如何清理 Mac 系统？

CleanMyMac X .4.14.7如何清理 Mac 系统？

细心的用户发现苹果Mac电脑越用越慢&#xff0c;其实这种情况是正常的&#xff0c;mac电脑用久了会产生很多的缓存文件&#xff0c;如果不及时清理会影响运行速度。Mac系统在使用过程中都会产生大量系统垃圾&#xff0c;如不需要的系统语言安装包&#xff0c;视频网站缓存文件&…
阅读更多...
SSL之mkcert构建本地自签名

SSL之mkcert构建本地自签名

文章目录 1. 什么是SSL2. mkcert&#xff1a;快速生成自签名证书2.1 mkcert的工作流程如下&#xff1a;2.2 window 本地实现自签证书2.2.1 下载安装2.2.2 下载,生成本地 SSL2.2.3 生成 pem 自签证书,可供局域网内使用其他主机访问。2.2.4 使用-psck12 生成*.p12 文件 2.3 Sprin…
阅读更多...
【Python】模块

【Python】模块

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…
阅读更多...
Java中的Socket你了解吗

Java中的Socket你了解吗

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…
阅读更多...
78、avx2 数据 load/store 向量化操作介绍

78、avx2 数据 load/store 向量化操作介绍

向量寄存器和一个最简单的寄存器-内存的存储器模型，查看上一节。 本节基于整个内存模型，介绍一下如何使用 avx2 向量指令集，来完成数据从内存到寄存器中的交互的。 load 操作 在改内存模型下，load 操作指将数据从内存中加载到寄存器中。 使用 C++ 代码实现如下： float…
阅读更多...
2024年华数杯国际赛B题超详细解题思路

2024年华数杯国际赛B题超详细解题思路

ICM B题&#xff1a;光伏发电 该题目出题的难度与方向都与美赛ICM的题型高度相似&#xff0c;将本次竞赛当做美赛的练手赛&#xff0c;个人认为是非常合适的一种选择。同时28号就可以出成绩&#xff0c;也可以在美赛前实现查漏补缺&#xff0c;提前预祝大家比赛顺利&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023