echarts双Y轴,并实现图例等

2024-05-06 13:28
文章标签 实现 图例 echarts

本文主要是介绍echarts双Y轴,并实现图例等,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一个Y轴时yAxis为对象

yAxis: {type: 'value',name: '占比(%)'
},

两个Y轴时yAxis为数组

 yAxis: [{ // 左侧的type: 'value',name: '占比(%)',nameTextStyle: {padding: [0, 0, 10, -50]},min: 0,max: 100,splitNumber: this.splitNumber, // 设置坐标轴的分割段数interval: 20, // 标轴分割间隔axisLabel: {formatter: function(v) {return v.toFixed(0) + '%'},color: function(value, index) {return value >= 1000 ? 'red' : 'green'}}},{ // 右侧的type: 'value',name: 'IPU',nameTextStyle: {padding: [0, 0, 10, 50]},min: minData2,max: maxData2,splitNumber: 5,interval: (maxData2 - minData2) / 5,axisLabel: {formatter: function(v) {return v.toFixed(2)}}}
]

双Y轴分割:

 // 获取最大值const getMax = (arr)=> {var max = Math.max.apply(null, arr)var maxint = Math.ceil(max / 5)var maxval = maxint * 5 + 5return maxval}// 获取最小值const getMin= (arr)=> {var min = Math.min.apply(null, arr)var minint = Math.floor(min / 1)var minval = minint * 1 - 5return minval
}/*
splitNumber:表示分割数
interval:计算轴分割间隔 ( (maxData2 - minData2) / 5 ),也可以写死
*/

series中使用:

 series: [{name: '占比',type: 'bar',color: ['#eb9f0d'],symbol: 'none',smooth: true,data: dataBar},{name: 'IPU',type: 'line',color: ['#969ac7'],// symbol: 'none',// smooth: true,yAxisIndex: 1, // 在单个图表实例中存在多个y轴的时候有用data: dataLine}
]

案例图片:

在这里插入图片描述

案例源码

<template><divv-loading="loading"class="main-echart"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.1)"><div v-if="!loading" class="title">总IPU:1000 , 总占比98%</div><div id="echartLineBar" /></div>
</template>
<script>
import echarts from 'echarts'
export default {name: 'EchartLineBar',data() {return {splitNumber: 5,loading: true,dataBar: [{ 'name': '1', 'value': 20 },{ 'name': '2', 'value': 40 },{ 'name': '3', 'value': 30 },{ 'name': '4', 'value': 10 },{ 'name': '5', 'value': 50 },{ 'name': '6', 'value': 60 },{ 'name': '7', 'value': 80 },{ 'name': '8', 'value': 90 },{ 'name': '9', 'value': 5 }],dataLine: [{ 'name': '1', 'value': 134 },{ 'name': '2', 'value': 133 },{ 'name': '3', 'value': 132 },{ 'name': '4', 'value': 133 },{ 'name': '5', 'value': 129 },{ 'name': '6', 'value': 93 },{ 'name': '7', 'value': 90 },{ 'name': '8', 'value': 82 },{ 'name': '9', 'value': 20 }]}},mounted() {setTimeout(() => {this.initData(document.getElementById('echartLineBar'), {dataBar: this.dataBar, dataLine: this.dataLine})}, 1000)},methods: {initData(el, { dataBar = [], dataLine = [] }) {this.myChart = echarts.init(el)this.myChart.clear()// 调用方法,获取数据的最大值&最小值const dataLineArray = dataLine.map(n => n.value)var maxData2 = this.getMax(dataLineArray)var minData2 = this.getMin(dataLineArray)const option = {// 提示框tooltip: {trigger: 'axis',backgroundColor: '#ffffff',textStyle: {color: '#000000'},enterable: true, // 鼠标是否可以进入tooltipposition: function(point, params, dom, rect, size) {// return [point[0] - dom.offsetWidth / 2, '50%']return [point[0] - dom.offsetWidth / 2, point[1] - dom.offsetHeight]},extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',formatter: function(params) {// let str = params[0].name + '<br/>'let str = '<div style="min-width:200px">'params.forEach(item => {if (item.seriesName == '占比') {str += `<div class='tooltipTrigger'>${item.marker} ${item.seriesName}分布详情 <br/> 名称:${item.data.name} <br/>值:${item.data.value}% <br/><br/></div>`} else if (item.seriesName == 'IPU') {str += `<div class='tooltipTrigger'>${item.marker} ${item.seriesName}分布详情 <br/> 名称:${item.data.name} <br/>值:${item.data.value} <br/><br/></div>`}})str += `</div>`return str}},// 图例组件legend: [{bottom: '0%',left: '40%',textStyle: {fontSize: 12, // 字体大小color: '#000000' // 字体颜色(图例与图例文字配色保持一致)},data: [{name: '占比'}]},{bottom: '0%',left: '50%',textStyle: {fontSize: 12, // 字体大小color: '#000000' // 字体颜色},data: [{name: 'IPU'}]}],// 直角坐标系内绘图网格grid: {show: true,x: 70,y: 50,x2: 70,y2: 50},xAxis: {name: '',type: 'category',data: ['10', '20', '30', '40', '50', '60', '70', '80', '90'],nameTextStyle: {padding: [0, 0, 50, 50]}},yAxis: [{type: 'value',name: '占比(%)',nameTextStyle: {padding: [0, 0, 10, -50]},min: 0,max: 100,splitNumber: this.splitNumber, // 设置坐标轴的分割段数interval: 20, // 标轴分割间隔axisLabel: {formatter: function(v) {return v.toFixed(0) + '%'},color: function(value, index) {return 'green'}}},{type: 'value',name: 'IPU',nameTextStyle: {padding: [0, 0, 10, 50]},min: minData2,max: maxData2,splitNumber: this.splitNumber,interval: (maxData2 - minData2) / this.splitNumber,axisLabel: {formatter: function(v) {return v.toFixed(2) // 0表示小数为0位,1表示1位小数,2表示2位小数}}}],series: [{name: '占比',type: 'bar',color: ['#eb9f0d'],symbol: 'none',smooth: true,data: dataBar},{name: 'IPU',type: 'line',color: ['#969ac7'],// symbol: 'none',// smooth: true,yAxisIndex: 1, // 在单个图表实例中存在多个y轴的时候有用data: dataLine}]}this.myChart.setOption(option)this.loading = false// 自适应布局const resizeFn = () => {this.myChart.resize()}window.removeEventListener('resize', resizeFn, false)window.addEventListener('resize', resizeFn, false)},getMax(arr) {var max = Math.max.apply(null, arr)var maxint = Math.ceil(max / 5)var maxval = maxint * 5 + 5return maxval},getMin(arr) {var min = Math.min.apply(null, arr)var minint = Math.floor(min / 1)var minval = minint * 1 - 5return minval}}
}
</script>
<style lang="scss" scoped>
.main-echart {width:100%;height: 550px;.title{margin-left: 20px;font-size: 14px;}#echartLineBar {width: 100%;height:500px;}
}
</style>
<style>
.tooltipTrigger{width: 100%;border-bottom: 2px dotted #999999;padding-top: 10px;
}
.tooltipTrigger:last-child{border: none;
}
</style>

这篇关于echarts双Y轴,并实现图例等的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/964478

相关文章

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.