echarts(6大基础图表)的使用

目录

一、vue2挂载

二、柱状图

2.1、基础柱状图介绍

2.2、标记:最大值\最小值(markPoint)、平均值(markLine)

2.3、显示:数值显示(label)、柱子宽度(barWidth)、横向柱状图

三、折线图

3.1、标记:最大值\最小值(markPoint)、平均值(markLine)、标注区间(markArea)

3.2、线条控制:平滑(smooth)、风格(lineStyle)

3.3、填充风格(areaStyle)

3.4、紧挨边缘(boundaryGap)、缩放(scale)

3.5、堆叠图(stack)

四、散点图

4.1、气泡图:散点大小(symbolSize)、散点颜色(itemStyle.color)效果

4.2、涟漪动画(type:effectScatter)效果

五、直角坐标系常用配置

5.1、网格:grid

5.2、坐标轴:axis

5.3、区域缩放:dataZoom

六、饼图

6.1、显示数值(label.formatter)

6.2、圆环(radius)

6.3、南丁格尔图(roseType)、选中效果(selectedMode)

​七、雷达图

7.1、显示数值(label)、区域面积(areaStyle)

7.2、绘制类型(shape)

八、仪表盘图

8.1、数值范围、多个指针、颜色

九、通用配置

9.1、标题:title

9.1、提示:tooltip

9.1、工具按钮:toolbox

9.1、图例:legend

十、基础小结

一、vue2挂载

(1)、npm i echarts成功后,在项目的package.json文件里可以看到版本号: "echarts": "^4.9.0"。

(2)、在项目的main.js中

import echarts from "echarts"
Vue.prototype.$echarts = echarts;//挂载到原型,可以在全局使用

(3)、官网:快速上手 - 使用手册 - Apache ECharts

(4)、每个图的具体信息配置项:Documentation - Apache ECharts

二、柱状图

2.1、基础柱状图介绍

<template><div><el-card><divref="echartsMain"style="width: 60%; height: 500px"id="main1"></div></el-card></div>
</template>
<script>
export default {data() {return {list: [{ time: "一班", value: 110 },{ time: "二班", value: 90 },{ time: "三班", value: 190 },{ time: "四班", value: 70 },{ time: "五班", value: 300 },],};},mounted() {this.getData();},methods: {getData() {// this.$nextTick(() => {});//解决挂载时拿不到this.$refs.echartsMain的bug// let myChart = this.$echarts.init(this.$refs.echartsMain);//这样写也行let myChart = this.$echarts.init(document.getElementById("main1"));myChart.setOption({title: {text: "基础柱状图显示",},xAxis: {//xAxis:直角坐标系中的X轴type: "category",data: this.list.map((d) => d.time),axisLabel: {//倾斜展示角度rotate: 60,// 垂直显示// formatter: function (value) {//   return value.split("").join("\n");// },},},yAxis: {//yAxis:直角坐标系中的Y轴type:'value',//数值轴},series: [//series:系列列表{barWidth:30,name: "日期",type: "bar",//决定图标类型(bar、line、pie)data: this.list.map((d) => d.value),},],});},},
};
</script>

常见效果如下:


2.2、标记:最大值\最小值(markPoint)、平均值(markLine)

series: [{......markPoint: {data: [{type: "max",name: "最大值",},{type: "min",name: "最小值",},],},markLine: {data: [{type: "average",name: "平均值",},],},},],

2.3、显示:数值显示(label)、柱子宽度(barWidth)、横向柱状图

series: [{...... barWidth: "30%",label: {show: true,rotate: 60,position: "top",},},],

横向展示:只需将xAxis和yAxis的值或者type的值互换即可

        xAxis: {// type: "category", // data: this.list.map((d) => d.time),type: "value",},yAxis: {// type: "value",type: "category", data: this.list.map((d) => d.time),},

三、折线图

将series中 type的值设置为"line"即可!一般用于分析数据随着时间的变化趋势!

常见效果如下:


3.1、标记:最大值\最小值(markPoint)、平均值(markLine)、标注区间(markArea)

series: [{......markPoint: {data: [{type: "max",},{type: "min",},],},markLine: {data: [{type: "average",},],},markArea: {data: [[{ xAxis: "1月" }, { xAxis: "2月" }],[{ xAxis: "6月" }, { xAxis: "7月" }],],},},],

3.2、线条控制:平滑(smooth)、风格(lineStyle)

series: [{......smooth: true,lineStyle: {color: "green",type: "dotted",//solid、dotted、dashed},},],

3.3、填充风格(areaStyle)

series: [{......areaStyle: { color: "skyblue" },},],

3.4、紧挨边缘(boundaryGap)、缩放(scale)

xAxis: {type: "category",data: xDataArr,boundaryGap: false,//紧挨边缘},
yAxis: {type: "value",scale:true,//脱离0值比例(缩放)},

3.5、堆叠图(stack)

一组数据基于另一组数据进行累加后展示,防止相近数据交叉,显得‘杂乱无章’

        series: [{name: "销量",type: "line",data: yDataArr,stack: "all",areaStyle: {},},{name: "other",type: "line",data: yDataArr2,stack: "all",areaStyle: {},},],

四、散点图

将series中 type的值设置为"scatter",xAxis和yAxis的type都设置为"value"!

一般用于推断变量间的(正)相关性(eg:身高和体重的关系),也可以用在地图标注上!

<script>    var datas = [{ gender: "male", height: 164.2, weight: 55.5 },{ gender: "male", height: 167.5, weight: 59 },{ gender: "male", height: 170.2, weight: 62.3 },{ gender: "male", height: 176.6, weight: 76.3 },{ gender: "male", height: 179.1, weight: 79.1 },{ gender: "male", height: 177.8, weight: 84.1 },{ gender: "male", height: 180.3, weight: 83.2 },{ gender: "male", height: 180.3, weight: 83.2 },{ gender: "male", height: 183, weight: 90.9 },];var axisData = [];for (var i = 0; i < datas.length; i++) {var height = datas[i].height;var weight = datas[i].weight;var newArr = [height, weight];axisData.push(newArr);}let myChart = this.$echarts.init(document.getElementById("main1"));myChart.setOption({xAxis: {type: "value",scale: true,},yAxis: {type: "value",scale: true,},series: [{type: "scatter",data: axisData,//二维数组},],});
</script>

4.1、气泡图:散点大小(symbolSize)、散点颜色(itemStyle.color)效果

        series: [{type: "scatter",data: axisData, //二维数组showEffectOn:'emphasis',rippleEffect:{scale:10},symbolSize: function (arg) {// BMI=体重(kg)/(身高m*身高m)  >28即为肥胖  >23.9即为超重var height = arg[0] / 100;var weight = arg[1];var Bmi = weight / (height * height);if (Bmi > 24) {return 24;}return 10;},itemStyle: {color: function (arg) {var height = arg.data[0] / 100;var weight = arg.data[1];var Bmi = weight / (height * height);if (Bmi > 24) {return "red";}return "green";},},},],

4.2、涟漪动画(type:effectScatter)效果

1、将type原本的值“scatter”设置为“effectScatter,每个散点会由内而外像水波一样荡漾开来!

2、想要鼠标划到对应散点上再出现水波纹:在type同级添加showEffectOn:'emphasis';

3、想要水波纹范围扩大:在type同级添加rippleEffect:{scale:10}

五、直角坐标系常用配置

直角坐标系图表:柱状图、折线图、散点图

5.1、网格:grid

作用:控制直角坐标系的布局和大小

        grid: {show: true,borderWidth: 10,borderColor: "gold",left: 20,top: 20,width: 300,height: 150,},xAxis: {.....},yAxis: {.....},

5.2、坐标轴:axis

(1)、类型type:

value:数值轴,会自动从目标数据中读取数据

category:类目轴,通过data设置类目数据

(2)、显示位置position

xAxis:可取值为top或者bottom

yAxis:可取值为left或者right

5.3、区域缩放:dataZoom

(1)、类型type:

slider:滑块滚动

inside:鼠标滚动

(2)、指明产生作用的轴

xAxisIndex:控制哪个x轴,值为数字

yAxisIndex:控制哪个y轴,值为数字

(3)、指明初始状态的缩放情况

start:起始百分比

end:结束百分比

     dataZoom: [{type: "slider",// type: "inside",//滚动条不显示,直接鼠标滚动xAxisIndex: 0,},{type: "slider",yAxisIndex: 0,start: 0,end: 80,},],xAxis: {.....},yAxis: {.....},

六、饼图

将series中 type的值设置为"pie"即可!一般用于反映模块的占比情况!

6.1、显示数值(label.formatter)

  myChart.setOption({series: [{type: "pie",data: this.list,label: {show: true,formatter: function (arg) {return (arg.name + "平台" + arg.value + "元\n" + arg.percent + "%");},},},],});

6.2、圆环(radius)

label: {......},
radius:['50%','75%']//[内圆半径,外圆半径]

6.3、南丁格尔图(roseType)、选中效果(selectedMode)

label: {......},           
roseType:'radius',//饼图的每个区域的半径和模块占比相关,
selectedMode:'multiple',//single:单个区域偏离原点、multiple:多个区域偏离原点

七、雷达图

将series中 type的值设置为"radar"即可!一般用于分析多个维度数据与标准数据的比对情况!

7.1、显示数值(label)、区域面积(areaStyle)

      let myChart = this.$echarts.init(document.getElementById("main1"));var dataMax = [{ name: "易用性", max: 100 },{ name: "功能", max: 100 },{ name: "拍照", max: 100 },{ name: "跑分", max: 100 },{ name: "续航", max: 100 },];myChart.setOption({radar: {indicator: dataMax, //配置各个维度的最大值,},series: [{type: "radar",label: {show: true,},areaStyle: {}, //给每个对象添加阴影区域data: [{name: "华为手机",value: [80, 90, 80, 82, 90],},{name: "中兴手机",value: [70, 82, 75, 70, 78],},],},],});

7.2、绘制类型(shape)

        radar: {indicator: dataMax, //配置各个维度的最大值,shape:'polygon',//polygon:多边形   circle:圆形},series: [......],

八、仪表盘图

将series中 type的值设置为"gauge"即可!一般用于分析进度把控以及数据范围的监测

      myChart.setOption({series: [{type: "gauge",data: [{value: 97,itemStyle: {color: "pink",},}, //每一个对象就代表一个指针{value: 80,itemStyle: {color: "green",},},],min:50  //min  max 仪表盘数值范围},],});

8.1、数值范围、多个指针、颜色

数值范围:min、max

多个指针:增加data中的数组元素;

颜色:(itemStyle.color)

九、通用配置

9.1、标题:title

(1)、文字样式:textStyle

(2)、标题边框:borderWidth、borderColor、borderRadius

(3)、标题位置:top、left、right、bottom

title: {text: "基础柱状图显示",textStyle: {color: "red",},borderWidth: 5,borderColor: "blue",borderRadius: 5,top: 10,left: 100,},
xAxis: {......},
yAxis: {......},

9.1、提示:tooltip

(1)、触发类型(trigger):item、axis

(2)、触发时机(triggerOn):mouseover、click

(3)、格式化(formatter):字符串模板、回调函数

title: {......},
tooltip: {trigger: "axis",triggerOn: "click",// formatter: "{b} 的成绩是 {c}",formatter: function(msg){console.log(msg[0]);return msg[0].name+'分数为'+msg[0].data},},
xAxis: {......},

9.1、工具按钮:toolbox

内置有导出图片、数据视图、动态类型切换、数据区域缩放、数据重置5个工具

title: {......},
toolbox: {feature: {saveAsImage: {},//导出图片dataView: {},//更改图表数据restore: {},//将更改的数据还原dataZoom: {},//框选指定区域“放大”(单独展示)magicType: {//类型切换:可以将原数据切换为不同类型的图表不同再画一个了type: ["bar", "line", "stack"],},},},
xAxis: {......},

9.1、图例:legend

legend用于筛选系列:它里面的data的值需要和series数组中该组数据的name值完全一致,否则无法显示。点击上面任意一个系列框框,下面就会留下对应的数据。

legend: {data: ["第一种", "第二种"],},
series: [{name: "第一种",type: "bar",data: this.list.map((d) => d.value),},{name: "第二种",type: "bar",data: yData2,},],

备注:也可以用echarts实现矢量地图(type:'map'),不过一般都用百度地图(需要ak)

十、基础小结

nametype

use

柱状图bar                  比较不同类别之间的数据差异
折线图line                  分析数据随着时间的变化趋势
散点图scatter/effectScatter                  推断变量间的(正)相关性
饼图pie                  反映的占比情况
雷达图radar                  分析多个维度数据与标准数据的比对情况
仪表盘图gauge                  分析进度把控以及数据范围的监测

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

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

相关文章

R可视化:组间点图比较

散点组间比较 散点组间比较 介绍 ggplot2绘制散点组间比较加载R包 knitr::opts_chunk$set(message = FALSE, warning = FALSE)library(tidyverse) library(ggplot2) library(ggprism) library(ggbeeswarm) library(rstatix)rm(list = ls()) options(stringsAsFactors = F) o…

android11禁止进入屏保和自动休眠

应某些客户要求&#xff0c;关闭了开机进入屏保&#xff0c;一段时间会休眠的问题。以下diff可供参考&#xff1a; diff --git a/overlay/frameworks/base/packages/SettingsProvider/res/values/defaults.xml b/overlay/frameworks/base/packages/SettingsProvider/res/value…

Python3 笔记:repr() 函数

repr() 函数将对象转化为供解释器读取的形式。 语法&#xff1a; repr(object) 返回一个对象的 string 格式。 tuple1 (1,2,3) print(type(repr((tuple1)))) # 运行结果&#xff1a;<class str> repr(str)与在字符串前加上“r”或“R”的原理有点相似&#xff0c;但…

node模块的本质

对于一个模块而言&#xff0c;有两个关键的地方&#xff0c;一是有自己的作用域&#xff0c;二是有对外暴露的接口 不知道大家有没有想过这样一个问题&#xff0c;模块是怎么实现上面两个特性的呢&#xff1f;其实通过一个 立即执行函数 就可以了 实际上 Node 在编译的时候&a…

常见5大开发进度盲点问题及解决方案

在软件开发项目中&#xff0c;识别并解决常见的进度管理盲点问题&#xff0c;对于确保项目按时、按预算、高质量完成至关重要。它直接关系到项目能否顺利进行&#xff0c;忽视任何一个问题&#xff0c;都可能导致项目延期、成本超支、质量下降&#xff0c;甚至项目失败。 因此&…

IT技术培训班:实用还是虚幻?

在学习IT技术的过程中&#xff0c;我经常被各种五花八门的技术培训班所安利。这些培训班以各种方式向我宣传&#xff0c;声称可以快速提升技能、获得认证、找到高薪工作等&#xff0c;让我不禁怀疑&#xff1a;在培训班里学技术真的有用吗&#xff1f;我对此抱有怎样的态度呢&a…

香橙派华为昇腾CANN架构编译opencv4.9

香橙派华为升腾AI盒子 为啥要编译opencv4.9.0&#xff0c; 因为在4.9.0 中增加了华为昇腾CANN的外接开发库&#xff0c;下图为盒子外观&#xff0c;此次一接到这个盒子&#xff0c;立刻开始开箱操作&#xff0c;首先就是要编译opencv4.9&#xff0c;以前在香橙派3588 的盒子中…

大模型应用:LLM基本原理及应用场景

1.背景 23年以来&#xff0c;随着OpenAI公司的ChatGPT横空出世&#xff0c;大模型一词开始火爆全球。国内外以OpenAI、Google、百度、阿里、字节等大厂为代表&#xff0c;相继推出一系列大模型及其应用&#xff0c;涉及社交、问答、代码助手等多个方面。 目前主流的大模型及产…

Echarts - 多个页面内有N个 echarts 图表,封装组件 CommonEcharts 快捷实现

目录 子组件父组件使用注意 option 文件效果展示相关数据处理&#xff08;代码备份 - 可不看&#xff09;数据处理后页面展示 子组件 CommonEcharts.vue <template><div><div v-for"id in domId" :id"id" :key"id" class"…

代码随想录算法训练营Day53 | 1143.最长公共子序列、1035.不相交的线、53. 最大子序和 | Python | 个人记录向

本文目录 1143.最长公共子序列做题看文章 1035.不相交的线做题看文章 53. 最大子序和做题看文章 以往忽略的知识点小结个人体会 1143.最长公共子序列 代码随想录&#xff1a;1143.最长公共子序列 Leetcode&#xff1a;1143.最长公共子序列 做题 无思路。 看文章 dp[i][j]&…

基于事件的架构工作机制和相关产品

基于事件的架构 基于事件的架构可否这样理解&#xff0c;每个事件相当于传统API的一次函数调用请求&#xff0c;比如Add(123,456)。区别在于&#xff0c;基于事件的架构只是把这个请求发出&#xff0c;并不急于得到结果&#xff0c;而是等合适的子系统处理完这个请求&#xff…

go select

select 是与 switch 相似的控制结构&#xff0c;与 switch 不同的是&#xff0c;select 中虽然也有多个 case&#xff0c;但是这些 case 中的表达式必须都是 channel 的收发操作。 select 能够让 goroutine 同时等待多个 channel 可读或者可写&#xff0c;在多个 channel 状态改…

使用awk对nginx access.log进行统计分析

nginx可以配置访问日志&#xff0c;如果我们要对日志文件进行统计分析&#xff0c;在linux环境下可以借助awk命令完成。 日志格式配置如下所示&#xff1a; log_format access_json {"timestamp":"$time_iso8601","host":"$server_addr&qu…

Flutter 中的 AnimatedOpacity 小部件:全面指南

Flutter 中的 AnimatedOpacity 小部件&#xff1a;全面指南 在Flutter中&#xff0c;动画是一种为用户提供视觉反馈和增强用户体验的强大工具。AnimatedOpacity是Flutter动画库中的一个组件&#xff0c;它允许你通过改变一个组件的透明度来创建淡入和淡出效果。本文将详细介绍…

章十五、Maven —— Maven 简介、Maven 开发环境搭建、命令、打包案例

一、 Maven 简介 Maven 是 Apache 软件基金会的一个开源项目&#xff0c;是一个优秀的项目构建工具&#xff0c;它用来帮助开发者管理项目中的 jar&#xff0c;以及 jar 之间的依赖关系&#xff08;在A.jar文件中用到了B.jar&#xff09;、完成项目的编译&#xff08;.java -&g…

Compose Button移除水波纹效果

一、背景 在使用Compose实现Button按钮时&#xff0c;设计要求移除按钮的水波纹效果&#xff0c;只保留按压效果&#xff0c;经查Compose1.4.3版本中&#xff0c;并没有直接移除水波纹的能力 二、遇到问题 经过多次尝试&#xff0c;使用Compose的Button组件始终无法实现目标效…

html通过数据改变,图片跟着改变

改变前 改变后 通过数据来控制样式展示 <template><div>通过num控制图标是否更改{{num}}<div class"box"><!-- 如果num大于1则是另一种&#xff0c;样式&#xff0c;如果小时1&#xff0c;则是另一种样式 --><div class"item&qu…

android怎么告诉系统不要回收

在Android中&#xff0c;如果你想告诉系统不要回收你的应用程序&#xff0c;可以通过设置Activity的属性来实现。你可以设置android:configChanges属性&#xff0c;指定在哪些配置更改时不重新创建Activity。 例如&#xff0c;如果你想指示系统在屏幕方向更改时不要重新创建Ac…

又是一知识点

1.说一下什么是mvvm模式 Model代表数据模型&#xff0c;数据和业务逻辑都在Model层中定义&#xff1b;View代表UI视图&#xff0c;负责数据的展示&#xff1b;ViewModel负责监听Model中数据的改变并且控制视图的更新&#xff0c;处理用户交互操作&#xff1b; View 的变化会自…

小阿轩yx-Shell 编程之循环语句与函数

小阿轩yx-Shell 编程之循环语句与函数 for 循环语句 可以很好地解决顺序编写异常烦琐、困难重重的全部代码 &#xff08;&#xff09;{}&#xff1a;里边写的都是命令 &#xff09;&#xff1a;不能嵌套 $&#xff08;&#xff09;&#xff1a;可以嵌套&#xff0c;适合更…