VUE笔记(十)Echarts

一、Echarts简介

1、什么是echarts

ECharts是一款基个基于 JavaScript 的开源可视化图表库

官网地址:Apache ECharts

国内镜像:ISQQW.COM x ECharts 文档(国内同步镜像) - 配置项

示例:echarts图表集

2、第一个Echarts

  • 安装echarts依赖包

npm i echarts
  • 引入Echarts

<template><div><div id="chart" class="box" ref="main"></div></div>
</template>
​
<script>
import * as echarts from 'echarts'
export default {mounted(){let options={title:{text:'在读学生学历统计'},xAxis:{//X轴的设置data:['初中','高中','大专','本科','硕士','博士']},yAxis:{},//Y轴的设置series:[//数据的设置{name:'销量',type:'bar',//设置为柱状图data:[10,10,35,30,10,5]}]}let mychart=echarts.init(this.$refs.main)mychart.setOption(options)}
}
</script>
​
<style>.box{width: 600px;height: 400px;background-color: #ffc;}
</style>

二、柱状图

1、常见效果设置

  • 最大值、最小值、平均值标记设置

series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},markLine:{data:[{type:'average',name:'平均值'}]}}]
  • 图形上文字标签的设置

 series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],label:{show:true,color:'#ff0000',backgroundColor:'springgreen',width:20,height:20}}]
  • 图形样式的设置

 series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],itemStyle:{color:'#0cc',shadowBlur:15,opacity:.8,shadowOffsetX:15}}]
  • 设置图形的宽度

 series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],barWidth:15}]
  • 更改x轴和y轴的角色

const options={xAxis: {},yAxis: { data:[10,10,35,30,10,5] },
}

2、title相关设置

属性类型含义
textstring主标题文本
linkstring主标题超链接
textStyleobjectcolor:主标题文字的颜色。 fontStyle:主标题的风格 fontWeight:主标题字体的粗细
backgroundColorColor背景色
borderColorColor边框颜色
borderRadiusnumber|Array圆角半径
let options={title:{text:'在读学生学历统计',link:'http://www.zhaijizhe.cn/studentSys',textStyle:{color:'#2ff',fontStyle:'italic',fontWeight:'bold'},backgroundColor:'#ccc',borderWidth:1,borderColor:'#bbb',borderRadius:5,padding:10    }
}

3、tooltip的相关配置

tooltip:提示框组件,用于配置鼠标滑过或点击图标时的显示框

  • 触发类型:trigger

  • 触发时机:triggerOn

  • 格式化:formatter

const options={tooltip:{show:true,triggerOn:'click',formatter:`{b}的人数是{c}人`}  
}

4、toolbox的相关配置

toolbox:ECharts提供的工具栏:内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具

const options={toolbox:{show:true,feature:{saveAsImage:{//导出图片show:true},restore:{//重置,配置项还原show:true},dataView:{//数据视图show:true},magicType: {//动态类型切换type: ['line', 'bar']},dataZoom:{//数据区域缩放show:true}}
}

5、legend的相关配置

legend:图例,用于筛选系列,需要和series配置使用

  • legend中的data是一个数组

  • legend中的data的值需要和series数组中某组数据的name值一致。

let options = {tooltip: {show: true,triggerOn: "click",formatter: `{b}的人数是{c}人`,},toolbox: {show: true,feature: {saveAsImage: {show: true,},restore: {show: true,},dataView: {show: true,},magicType: {type: ["line", "bar"],},dataZoom: {show: true,},},},xAxis: {data: ["可口可乐", "百事可乐", "芬达", "红牛", "加多宝", "哇哈哈"],},yAxis: {},legend:{show:true,data:["1月份销量","2月份销量","3月份销量"]},series: [{name: "1月份销量",type: "bar",data: [10, 10, 35, 30, 10, 5],itemStyle: {color: "#0cc",shadowBlur: 15,opacity: 0.8,shadowOffsetX: 15,},barWidth: 15,},{name: "2月份销量",type: "bar",data: [20, 5, 65, 20, 15, 25],itemStyle: {color: "#cfc",shadowBlur: 15,opacity: 0.8,shadowOffsetX: 15,},barWidth: 15,},{name: "3月份销量",type: "bar",data: [25, 15, 95, 20, 25, 35],itemStyle: {color: "#0a8",shadowBlur: 15,opacity: 0.8,shadowOffsetX: 15,},barWidth: 15,},],};

三、折线图

1、基本配置

import * as echarts from 'echarts'
export default {mounted(){let options={title:{text:'最近1小时访问情况'},xAxis:{data:['16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55']},yAxis:{},series:[{name:'访问量',type:'line',data:[40,39,30,40,50,40,30,20,80,20,15,32]}]}let chart=echarts.init(this.$refs.box)chart.setOption(options)}
}

2、常见效果设置

<template><div ref="box" class="chart"></div>
</template><script>
import * as echarts from 'echarts'
export default {mounted(){let options={title:{text:'最近1小时访问情况'},xAxis:{data:['16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55']},yAxis:{},legend:{data:['浏览量','访问量']},tooltip:{show:true,trigger:'axis'},series:[{name:'浏览量',type:'line',data:[40,39,30,40,50,40,30,20,50,20,15,32],smooth:true,//开启平滑曲线areaStyle:{color:'rgba(159,216,255,.9)' //填充区域颜色},lineStyle:{ //线条样式设置color:'rgba(159,216,255)', width:2},symbol:'none' //去掉线条小圆点},{name:'访问量',type:'line',data:[20,19,10,20,25,20,15,10,22,10,9,16],smooth:true,areaStyle:{color:'rgba(120,215,190,.9)'},symbol:'none'}]}let chart=echarts.init(this.$refs.box)chart.setOption(options)}
}
</script><style>.chart{width: 1000px;height: 400px;}
</style>

四、饼状图

1、基本设置

<template><div><div ref="box" class="chart"></div></div>
</template><script>
import * as echarts from 'echarts' 
export default {mounted(){let options={series:[{type:'pie',data:[{name:'口碑',value:815},{name:'知乎',value:515},{name:'百度',value:115},{name:'美团',value:45},{name:'地图',value:15},]}]}let chart=echarts.init(this.$refs.box)chart.setOption(options)}
}
</script>

2、常见效果设置

<script>
import * as echarts from "echarts";
export default {mounted() {let options = {series: [{type: "pie",data: [{ name: "口碑", value: 815 },{ name: "知乎", value: 515 },{ name: "百度", value: 115 },{ name: "美团", value: 45 },{ name: "地图", value: 15 },],label: {show: true,formatter: function (arg) {return (arg.name + "部分消费了" + arg.value + "元\n" + arg.percent + "%");},},radius:['60%','80%'],//内外径占比roseType: "radius",//以扇形圆心角比例展现selectedMode: "single",//选中的模式},],};let chart = echarts.init(this.$refs.box);chart.setOption(options);},
};
</script>

五、地图

1、基本设置

地图数据的下载地址:DataV.GeoAtlas地理小工具系列

打开网址,通过右下角JSON API下载数据

在src/assets/data/chinaMap.js中存储数据

export const mapData=数据

在组件中

<template><div class="chart" ref="box" style="width:1000px;height:800px"></div>
</template><script>
import * as echarts from "echarts";
import { mapData } from "../assets/data/chinaMap.js";
export default {mounted() {//地图注册echarts.registerMap("chinaMap", mapData);let options = {geo: {//地理坐标系属性type: "map",map: "chinaMap",itemStyle:{areaColor:'#ddf',opacity:.7}zoom: 5,roam:true,label:{show:true,fontSize: 10},},visualMap: {//是视觉映射组件,用于进行视觉编码,也就是将数据映射到视觉元素(视觉通道)min: 100,max: 3000,text: ["高", "低"],realtime: false,calculable: true,inRange: {//颜色过渡color: ["lightskyblue", "yellow", "orangered"],},},series: [{name: "最小风险指数",type: "map",geoIndex: 0,data: [{ name: "北京市", value: 15477.48 },{ name: "天津市", value: 31686.1  },{ name: "上海市", value: 21686.1  },{ name: "重庆市", value: 61686.1  },{ name: "河北省", value: 81686.1  },{ name: "陕西省", value: 800  },{ name: "河南省", value: 100  },],},],};let chart = echarts.init(this.$refs.box);chart.setOption(options);},
};
</script><style>
.chart {width: 800px;height: 800px;
}
</style>

2、显示南海诸岛

如果要让南海诸岛显示出来,可以在注册地图的时候,把registerMap()的第一个参数必须设置为china就可以显示了

 echarts.registerMap("china", mapData);

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

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

相关文章

滑动窗口实例4(将x减到0的最小操作数)

题目&#xff1a; 给你一个整数数组 nums 和一个整数 x 。每一次操作时&#xff0c;你应当移除数组 nums 最左边或最右边的元素&#xff0c;然后从 x 中减去该元素的值。请注意&#xff0c;需要 修改 数组以供接下来的操作使用。 如果可以将 x 恰好 减到 0 &#xff0c;返回 …

全套解决方案:基于pytorch、transformers的中文NLP训练框架,支持大模型训练和文本生成,快速上手,海量训练数据!

全套解决方案&#xff1a;基于pytorch、transformers的中文NLP训练框架&#xff0c;支持大模型训练和文本生成&#xff0c;快速上手&#xff0c;海量训练数据&#xff01; 1.简介 目标&#xff1a;基于pytorch、transformers做中文领域的nlp开箱即用的训练框架&#xff0c;提…

WebGPU加载Wavefront .OBJ模型文件

在开发布料模拟之前&#xff0c;我想使用 WebGPU 开发强大的代码基础。 这就是为什么我想从 Wavefront .OBJ 文件加载器开始渲染 3D 模型。 这样&#xff0c;我们可以快速渲染 3D 模型&#xff0c;并构建一个简单而强大的渲染引擎来完成此任务。 一旦我们有了扎实的基础&#x…

视频文件损坏无法播放如何修复?导致视频文件损坏的原因

如果我们遇到因视频文件损坏而无法正常播放&#xff0c;我们该怎么办&#xff1f;这种情况通常意味着视频文件已经损坏。我们不能访问、编辑或使用它们。那么应该用什么正确的工具和修复程序来修复视频呢&#xff1f; 视频文件损坏的原因 了解视频损坏如何修复之前&#xff0c…

【C51基础实验 LED流水灯】

51单片机项目基础篇 LED流水灯1、硬件电路设计和原理分析2、软件设计2.1、利用循环和移位操作符功能实现&#xff1a;LED流水灯2.2、利用利用封装好的库函数功能实现&#xff1a;LED流水灯 3、编译结果4、结束语 LED流水灯 前言&#xff1a; 前几篇学会了LED驱动原理&#xff…

Mysql001:Mysql概述以及安装

前言&#xff1a;本课程将从头学习Mysql&#xff0c;以我的工作经验来说&#xff0c;sql语句真的太重要的&#xff0c;现在互联网所有的一切都是建立在数据上&#xff0c;因为互联网的兴起&#xff0c;现在的数据日月增多&#xff0c;每年都以翻倍的形式增长&#xff0c;对于数…

数据库CPU飙高问题定位及解决

在业务服务提供能力的时候&#xff0c;常常会遇到CPU飙高的问题&#xff0c;遇到这类问题&#xff0c;大多不是数据库自身问题&#xff0c;都是因为使用不当导致&#xff0c;这里记录下业务服务如何定位数据库CPU飙高问题并给出常见的解决方案。 CPU 使用率飙升根因分析 在分…

概念解析 | 量子时代的灵感:探索量子感知技术

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:量子感知技术。 量子时代的灵感:探索量子感知技术 量子感知技术是一个充满希望和挑战的新兴领域。在此,我们将深入探讨这个主题,概述其背景,解释其工作原理,讨论现有的…

mov怎么改成mp4?跟我一起操作吧

mov怎么改成mp4&#xff1f;mov因为并不是一种常见的视频文件格式&#xff0c;因此大家对这种视频文件可能知道的并不多&#xff0c;但如果你是用的是苹果手机&#xff0c;那么你会发现苹果手机拍摄的视频转移到电脑上后就是mov格式的&#xff0c;因为mov格式的视频并没有受到大…

JDBC使用了哪种设计模式

JDK中提供了操作数据库的接口&#xff0c;比如 java.sql.Driver java.sql.Connection java.sql.Statement java.sql.PreparedStatement 不同的数据库厂商提供操作自己数据库的驱动包&#xff0c; 比如mysql public class Driver extends NonRegisteringDriver implements jav…

一篇文章带你了解-selenium工作原理详解

前言 Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。支持的浏览器包括IE&#xff08;7, 8, 9, 10, 11&#xff09;&#xff0c;Mozilla Firefox&#xff0c;Safari&#xff0c;Google Chrome&#xff0c…

DC电源模块不同的尺寸可以适应实际应用场景

BOSHIDA DC电源模块不同的尺寸可以适应实际应用场景 DC电源模块是现代电子设备的必备部件之一&#xff0c;其可提供稳定的直流电源&#xff0c;保证电子设备正常运行。DC电源模块尺寸的选择直接影响到其适应的应用场景及其性能表现。本文将从尺寸方面分析DC电源模块的适应性&a…

【zookeeper】zookeeper介绍

分布式协调技术 在学习ZooKeeper之前需要先了解一种技术——分布式协调技术。那么什么是分布式协调技术&#xff1f;其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同步控制&#xff0c;让他们有序的去访问某种临界资源&#xff0c;防止造成"脏数据"的…

C++ list模拟实现

list模拟实现代码&#xff1a; namespace djx {template<class T>struct list_node{T _data;list_node<T>* _prev;list_node<T>* _next;list_node(const T& x T()):_data(x),_prev(nullptr),_next(nullptr){}};template<class T,class Ref,class Pt…

Mac操作系统Safari 17全新升级:秋季推出全部特性

苹果的内置浏览器可能是Mac上最常用的应用程序&#xff08;是的&#xff0c;甚至比Finder、超级Mac Geeks还要多&#xff09;。因此&#xff0c;苹果总是为其浏览器Safari添加有用的新功能。在今年秋天与macOS Sonoma一起推出的第17版中&#xff0c;Safari可以帮助你提高工作效…

活用 命令行通配符

本文是对 阮一峰老师命令行通配符教程[1]的学习与记录 通配符早于正则表达式出现,可以看作是原始的正则表达式. 其功能没有正则那么强大灵活,而胜在简单和方便. - 字符 切回上一个路径/分支 如图: !! 代表上一个命令, 如图: [Linux中“!"的神奇用法](https://www.cnblogs.…

不会还有人排长队吃饭吧?用这招,快速搞定!

随着现代企业对员工福利和工作环境的关注不断增加&#xff0c;企业智慧食堂已经成为了企业管理的重要组成部分。 智慧收银系统的出现不仅使员工用餐变得更加便捷和高效&#xff0c;还提供了一种强大的管理工具&#xff0c;有助于企业更好地理解员工消费行为、优化食堂运营&…

比较器的工作原理及性能指标介绍

一、什么是比较器 比较器的功能是比较两个或更多数据项&#xff0c;以确定它们是否相等&#xff0c;或者确定它们之间的大小关系和排列顺序&#xff0c;这称为比较。可以实现此比较功能的电路或设备称为比较器。比较器是将模拟电压信号与参考电压进行比较的电路。比较器的两个…

说说Flink中的State

分析&回答 基本类型划分 在Flink中&#xff0c;按照基本类型&#xff0c;对State做了以下两类的划分&#xff1a; Keyed State&#xff0c;和Key有关的状态类型&#xff0c;它只能被基于KeyedStream之上的操作&#xff0c;方法所使用。我们可以从逻辑上理解这种状态是一…

掌握逻辑漏洞复现技术,保护您的数字环境

环境准备 这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 1、支付逻辑漏洞 攻击相关介绍 介绍&#xff1a; 支付逻辑漏洞是指攻击者利用支付系统的漏洞&#xff0c;突破系统的限制&#xff0c;完成非法的支付操作。攻击者可以采…