echarts中堆叠图两个y轴配置

最新推荐文章于 2024-02-22 11:40:27 发布

KAGHQ

最新推荐文章于 2024-02-22 11:40:27 发布

阅读量733

点赞数

CC 4.0 BY-SA版权

分类专栏：总结文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/LRQQHM/article/details/130143783

总结专栏收录该内容

51 篇文章

订阅专栏

文章展示了如何在Vue.js应用中使用Echarts库创建一个包含两个Y轴的线图，分别展示销售数量和销售金额。通过设置`yAxisIndex`属性，数据被分配到左右两侧的Y轴，以清晰地比较两个不同的度量标准。

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

主要代码
series中设置yAxisIndex左边的是0右边的是1

yAxis: [
          {
            type: 'value',
            name: '销售数量',
            min: 0,
            max: 201,
          },
          {
            type: 'value',
            name: '销售金额',
            min: 0,
            max: 102,
          }
        ],

全部代码

<template>
  <div class="card">
    <div id="lineCharts" style="width: 600px;height:330px;"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, reactive, toRefs, getCurrentInstance, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  name: 'ehartLine',
  components: {
  },
  props: {

  },
  setup(props) {
    let echart = echarts;
    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("lineCharts"));
      // 把配置和数据放这里
      chart.setOption({
        tooltip: {
          //鼠标悬停提示内容
          trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
        },
        title: {
          show: true,
          text: "销售趋势图",//主标题文本
          textStyle: {
            color: '#8E96A2',//'red'，字体颜色
            fontWeight: 'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: 'sans-serif',//'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New' 
            fontSize: 18,//字体大小
            lineHeight: 18,//字体行高
          },
          left: 50,
          top: 20
        },
        legend: {
          data: ['销售数量', '销售金额'],
          icon: "circle",
          top: 20
        },
        xAxis: {
          data: ['1', '8', '16', '24']
        },
        grid: {
          top: '30%',
          left: '10%',
          right: '8%',
          bottom: '20%',
        },
        yAxis: [
          {
            type: 'value',
            name: '销售数量',
            min: 0,
            max: 201,
          },
          {
            type: 'value',
            name: '销售金额',
            min: 0,
            max: 102,
          }
        ],
        series: [
          {
            name: '销售数量',
            data: [20, 10, 29, 50],
            type: 'line',
            stack: 'x',
            color: '#2ED47A',
            yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
            areaStyle: {
              color: '#f6fdf8'
            },
            lineStyle: {
              normal: {
                width: 3,
                color: '#2ED47A', // 线条颜色
              },
            },
          },
          {
            name: '销售金额',
            data: [50, 100, 150, 30],
            type: 'line',
            stack: 'x',
            color: '#FD7656',
            yAxisIndex: 0, //在单个图表实例中存在多个y轴的时候有用
            areaStyle: {
              color: '#faf6f1'
            },
            lineStyle: {
              normal: {
                width: 3,
                color: '#FD7656', // 线条颜色
              },
            },
          }
        ]
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    }
    onMounted(() => {
      initChart()
    })
    onUnmounted(() => {
      echart.dispose()
      chart = null
    })
    return {
    };
  },
};
</script>


<style lang="scss" scoped>
.card {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #E7EBF2;
  border-radius: 5px;

  .title {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #34383E;
    padding: 20px 25px 18px 0;
    border-bottom: 1px solid #EEF1F5;
  }
}
</style>