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 + 5
      return maxval
    }
 // 获取最小值
 const getMin= (arr)=> {
      var min = Math.min.apply(null, arr)
      var minint = Math.floor(min / 1)
      var minval = minint * 1 - 5
      return 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>
  <div
    v-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'
import Vue from 'vue'
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, // 鼠标是否可以进入tooltip
          position: 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 == '折线图') {
                str += `<div class='tooltipTrigger'>${item.marker} ${item.seriesName}分布详情 <br/> 名称：${item.data.name} <br/>值：${item.data.value} <br/><br/></div>`
              }
            })
            str += `</div>`
            return str
          }
        },
        /*
        // echarts 5.0才可以返回 string | HTMLElement | HTMLElement[]
        // 可以使用其他组件
        formatter: function(params, ticket, callback) {
            const component = new Vue({
              render: (h) => {
                return (<div style='min-width:200px'>
                  {
                    params.map(item => {
                      return (
                        <div class='tooltipTrigger'>
                          {item.marker} {item.seriesName}分布详情 <br/> 名称：{item.data.name} <br/>值：{item.data.value}% <br/><br/>
                          <ElTooltip effect='dark' content='ElementUI组件提示' placement='top'><i style='font-size:14px;color:rgb(64, 158, 255);cursor: pointer;margin-left:5px' class='el-icon-question' ></i></ElTooltip>
                        </div>
                      )
                    })
                  }
                </div>)
              }
            })
            component.$nextTick(() => {
              callback(ticket, component.$el)
            })
            return 'Loading'
          }
        },
        */
        // 图例组件
         legend: [
          {
            bottom: '0%',
            left: '35%',
            textStyle: {
              fontSize: 12, // 字体大小
              color: '#000000' // 字体颜色（图例与图例文字配色保持一致）
            },
            data: [
              {
                name: '柱状图'
                //icon: 'circle',
              }
            ],
            formatter: function(name) {
              return name //这里可以对图例显示的文字进行操作
            }
          },
          {
            bottom: '0%',
            left: '52%',
            textStyle: {
              fontSize: 12, // 字体大小
              color: '#000000' // 字体颜色
            },
            data: [
              {
                name: '折线图'
              }
            ],
            formatter: function(name) {
              return name //这里可以对图例显示的文字进行操作
            }
          }
        ],
        // 直角坐标系内绘图网格
        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'],
          axisLabel: {
            interval: 0,
            rotate: 0 // 值>0向右倾斜，值<0则向左倾斜
          },
          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位小数
              }
            }
          }
        ],
        color: ['#eb9f0d', '#969ac7'], // 颜色
        series: [
          {
            name: '柱状图',
            type: 'bar',
            barWidth: '50%', // 宽度
            // color: ['#eb9f0d'],
            symbol: 'none',
            smooth: true,
            data: dataBar
          },
          {
            name: '折线图',
            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 + 5
      return maxval
    },
    getMin(arr) {
      var min = Math.min.apply(null, arr)
      var minint = Math.floor(min / 1)
      var minval = minint * 1 - 5
      return 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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【牛客】Tokitsukaze and Average of Substring

【牛客】Tokitsukaze and Average of Substring

原题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 前缀和。 开一个int类型的前缀和数组pre[30][N]&#xff08;pre[i][j]表示某字符转成的数字 i 在一段区间的前缀个数。因为字母表有‘a’~z…
阅读更多...
并发编程实现

并发编程实现

一、并行编程 1、Parallel 类 Parallel类是System.Threading.Tasks命名空间中的一个重要类&#xff0c;它提供数据并行和任务并行的高级抽象。 For和ForEach Parallel类下的For和ForEach对应着普通的循环和遍历(普通的for和foreach)&#xff0c;但执行时会尝试在多个线程上…
阅读更多...
Blender修改器

Blender修改器

修改器 Modifier&#xff0c;对模型进行修改&#xff0c;相当于一个函数。 修改器图标是界面右下角的扳手样式 每个修改器的顶部都有如下样式&#xff0c;从左到右分别为&#xff1a;展开/折叠&#xff0c;修改器类型&#xff0c;修改器名称&#xff0c;编辑模式按钮&#xff…
阅读更多...
游戏辅助 -- 某游戏一键端配置

游戏辅助 -- 某游戏一键端配置

游戏一键端下载地址及安装视频&#xff1a; https://pan.quark.cn/s/e6a373d94707 ​https://pan.quark.cn/s/ef7ab0c48776 准备工作 Vmware虚拟机软件&#xff1a;用于创建和管理虚拟机。 SecureCRT&#xff1a;一款支持SSH的终端仿真程序&#xff0c;用于远程登陆服务器…
阅读更多...
SoC系统中AXI4 AXI3兼容性及exclusive access

SoC系统中AXI4 AXI3兼容性及exclusive access

AXI4和AXI3是高级扩展接口&#xff08;Advanced eXtensible Interface&#xff09;的两个不同版本&#xff0c;它们都是用于SoC&#xff08;System on Chip&#xff09;设计中的总线协议&#xff0c;用于处理器和其它外设之间的高速数据传输。以下是它们之间的一些主要区别&…
阅读更多...
vscode设置免密登录远程服务器

vscode设置免密登录远程服务器

文章目录 1. 问题描述2. 解决方案3. 原理 1. 问题描述 当我们使用vscode的ssh连接远程服务器后&#xff0c;过一段时间后&#xff0c;总是要求登录服务器的密码。 这就导致一个麻烦就是: 无论是在公司还是在学校&#xff0c;密码往往不是自己设置的&#xff0c;所以记忆起来就…
阅读更多...
利用BACnet分布式IO控制器优化Niagara楼宇自动化系统

利用BACnet分布式IO控制器优化Niagara楼宇自动化系统

在智能建筑领域&#xff0c;随着物联网技术的飞速发展&#xff0c;如何实现高效、灵活且安全的楼宇自动化控制成为了行业关注的焦点。BACnet IP分布式远程I/O模块&#xff0c;作为这一领域的创新成果&#xff0c;正逐渐成为连接智能建筑各子系统的关键桥梁&#xff0c;尤其在与…
阅读更多...
蓝桥杯练习系统（算法训练）ALGO-946 Q神的足球赛

蓝桥杯练习系统（算法训练）ALGO-946 Q神的足球赛

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 足球赛上&#xff0c;只见Q神如闪电般的速度带球时而左&#xff0c;时而右&#xff0c;时而前&#xff0c;时而后&#xff…
阅读更多...
带你入门React

带你入门React

目录 前言一&#xff0c;基本配置1.1 环境搭建1.2 页面初始化渲染二&#xff0c;基础学习2.1 结构与样式开发2.2 数据展示2.3 行内样式2.4 条件渲染2.5 列表渲染2.6 点击事件 三&#xff0c;页面更新3.1 组件数据3.2 组件数据共享 总结 前言 笔者之前的工作经验都局限于Vue&am…
阅读更多...
pandas快速使用

pandas快速使用

DataFrame介绍 Dateframe结构和列表类似&#xff0c;区别是对于DataFrame的每一列和每一行均有一个标签。例如以下数据&#xff0c; 上述数据中&#xff0c;日期作为每行的标签。a、b、c、d、e分别是每列的标签 生成连续日期数据 使用方法date_range()&#xff0c;该方法有两…
阅读更多...
Lazada商品详情API接口：深度解析与应用

Lazada商品详情API接口：深度解析与应用

前言 在当今电子商务的繁荣时代&#xff0c;对于电商平台来说&#xff0c;提供一套高效、稳定的API接口是非常重要的。Lazada&#xff0c;作为东南亚领先的电商平台之一&#xff0c;其API接口体系为卖家、开发者以及第三方服务提供了丰富的功能和数据支持。其中&#xff0c;商品…
阅读更多...
邦注科技 模具保护器 CCD电子眼 专业工业视觉检测设备

邦注科技 模具保护器 CCD电子眼 专业工业视觉检测设备

模具保护器是一种用于保护模具的设备&#xff0c;可以在塑料压铸和冲床等加工过程中起到保护模具的作用。以下是关于模具保护器在保护塑料压铸和冲床模具方面的应用&#xff1a; 塑料压铸模具保护器&#xff1a; 防止碰撞&#xff1a;在塑料压铸过程中&#xff0c;模具可能会…
阅读更多...
初识C++ · 内存管理

初识C++ · 内存管理

目录 1 C/C的内存分布 2 C语言的内存管理 3 C的内存管理 4 operator new 和 operator delete 5 定位new 1 C/C的内存分布 语言不同&#xff0c;内存分布是相同的&#xff0c;对于局部变量都是放在栈上&#xff0c;全局变量都是放在静态区&#xff08;数据段&#xff09;&…
阅读更多...
jvm重要参数可视化和线上问题排查

jvm重要参数可视化和线上问题排查

jvm重要参数可视化和线上问题排查 目标jvm参数分类(了解)运行时数据区相关的&#xff08;jdk1.8&#xff09;处理 OOM 相关的垃圾回收器相关的GC 日志记录相关的意义,默认值,调优原则&#xff08;重要&#xff0c; 待拆分&#xff09; 排查 OOM 流程 和 常见原因参考文章 目标 …
阅读更多...
基于C语言中的类型转换，C++标准创造出了更加可视化的类型转换

基于C语言中的类型转换，C++标准创造出了更加可视化的类型转换

目录 前言 一、 C语言中的类型转换 二、为什么C需要四种类型转换 三、C中新增的四种强制类型转换操作符以及它们的应用场景 1.static_cast 2.reinterpret_cast 3.const_cast 4.dynamic_cast 前言 在C语言中&#xff0c;如果赋值运算符左右两侧的类型不同&#xff0c;或者…
阅读更多...
短视频矩阵系统贴牌---saas源头开发

短视频矩阵系统贴牌---saas源头开发

一、短视频矩阵运营注意事项&#xff1a; 如&#xff1a;房产行业 短视频矩阵运营是一个系统化的项目&#xff0c;涉及多个平台和账号的管理&#xff0c;以及内容的创作、发布和优化等多个方面。 以下是短视频矩阵运营的注意事项文档的概要以及结果运营数据 一周持续运营量 二…
阅读更多...
uni-app 多列picker切换列显示对应内容

uni-app 多列picker切换列显示对应内容

html部分&#xff1a; <view class"uni-list"><view class"uni-list-cell"><view class"uni-list-cell-left">选择用户</view><view class"uni-list-cell-db"><picker mode"multiSelector"…
阅读更多...
【JavaWeb】网上蛋糕商城后台-类目管理，退出

【JavaWeb】网上蛋糕商城后台-类目管理，退出

概念 本文讲解和实现类目管理和管理员的退出功能。 类目列表信息 点击类目管理&#xff0c;向服务器发送请求/admin/type_list 在servlet包中创建AdminTypeListServlet类&#xff0c;获得所有商品分类 package servlet;import model.Type; import service.TypeService;impo…
阅读更多...
网站localhost和127.0.0.1可以访问，本地ip不可访问解决方案

网站localhost和127.0.0.1可以访问，本地ip不可访问解决方案

部署了一个网站, 使用localhost和127.0.0.1加端口号可以访问, 但是使用本机的ip地址加端口号却不行. 原因可能有多种. 可能的原因: 1 首先要确认是否localhost对应的端口是通的(直接网址访问), 以及你无法访问的那个本机ip是否正确(使用ping测试)&#xff1b; 2 检查本机的防火…
阅读更多...
堆的基本操作（c语言实现）

堆的基本操作（c语言实现）

1.堆的基本操作 1.1定义堆 typedef int HPDataType;//堆中存储数据的类型typedef struct Heap {HPDataType* a;//用于存储数据的数组int size;//记录堆中已有元素个数int capacity;//记录堆的容量 }HP;1.2初始化堆 然后我们需要一个初始化函数&#xff0c;对刚创建的堆进行初…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站