echarts双y轴的设置

最新推荐文章于 2024-06-05 09:44:46 发布

Enidchan_

最新推荐文章于 2024-06-05 09:44:46 发布

阅读量1k

点赞数

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/EnidChann/article/details/102677087

版权

echarts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在ECharts中创建一个包含柱状图和折线图的图表，并实现双Y轴显示。通过实例展示如何配置双轴，使得两种不同数据类型在同一图表上清晰展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
需求: 柱状图与折线图同在一个图表内, 实现双y轴

-- common/echarts.js文件里
import echarts from 'echarts'
const chart = {
	myIncomeChart (xdata, incomedata, yoydata, yoyMin, yoyMax, incomeMax, incomeMin) {
	    const option = {
	      color: ['#59C1C1'],
	      grid: {
	        top: '80',
	        containLabel: false
	      },
	      tooltip: {
	        trigger: 'axis',
	        confine: true,
	        backgroundColor: '#59C1C1', // 自定义tooltip气泡框的样式
	        padding: [5, 10],
	        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)',
	        textStyle: {
	          fontFamily: 'SourceHanSans-Regular',
	          fontSize: '1.5rem',
	          boxShadow: '0px 0px 20px gray'
	        },
	        axisPointer: {
	          type: 'line' 
	        },
	        formatter (params) { // 自定义tooltip内的文字
	          let ratio = params[1].value
	          ratio = ratio > 0 ? '+' + ratio : ratio
	          let yoy = '环比：' + ratio + '%'
	          return yoy
	        }
	      },
	      legend: {
	        top: 30,
	        right: 20,
	        itemHeight: 4,
	        itemWidth: 20,
	        icon: 'rect'
	      },
	      xAxis: [
	        {
	          show: true,
	          type: 'category',
	          data: xdata,
	          splitLine: { show: false }, 
	          axisTick: { show: false },
	          axisLine: { show: false } 
	        }
	      ],
	      yAxis: [
	        { // 左侧y轴 (柱状图)
	          show: false,
	          type: 'value',
	          max: incomeMax,
	          min: incomeMin - 200,
	          splitLine: {
	            show: false
	          },
	          axisLine: {
	            lineStyle: {
	              color: '#666'
	            }
	          }
	        },
	        { // 右侧y轴 (折线图)
	          show: false,
	          type: 'value',
	          min: yoyMin,
	          max: yoyMax,
	          splitLine: {
	            show: false
	          },
	          axisLabel: {
	            show: true,
	            interval: 'auto',
	            formatter: `{value}%`
	          }
	          }
	        }
	      ],
	      series: [
	        {
	          type: 'bar',
	          name: '营业收入'
	          barWidth: '30%',
	          data: incomedata,
	          yAxisIndex: 0,  // 重点!!!!!! 表示左侧y轴
	        },
	        {
	          type: 'line',
	          name: '环比',
	          data: yoydata,
	          yAxisIndex: 1, // 重点!!!!!!!表示右侧y轴
	          smooth: true,
	          symbol: 'none',
	          lineStyle: {
	            color: '#59C1C1',
	            width: 2 // 折线宽度
	          }
	        }
	      ]
	    }
	    return option
	  },
  }
export default chart

-- 在index.vue文件
import mychart from '@/common/echarts/indexEcharts'

methods:{
	// 初始化图表
	incomeChart.setOption(mychart.myIncomeChart(xdata, incomedata, yoydata, yoyMin, yoyMax, incomeMax, incomeMin))
    // 点击数据联动
    incomeChart.on('updateAxisPointer', (event) => {
      this.active_year1 = this.incomeDataList[event.dataIndex].statDate
      this.active_income = this.incomeDataList[event.dataIndex].indicatorValue
    })
   // 页面一打开默认选中最新数据并弹出tooltip
    incomeChart.dispatchAction({
      type: 'showTip',
      position: [150, 140], // 可修改tooltip位置
      seriesIndex: 0, // 系列的 index
      dataIndex: yoydata.length - 1 // 数据的 index
    })
 }