echarts双Y轴等分

最新推荐文章于 2025-08-10 23:49:20 发布

原创最新推荐文章于 2025-08-10 23:49:20 发布 · 763 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何在Echarts中设置双Y轴并实现等分，包括安装Echarts步骤、main.js的配置方法以及具体使用案例，详细教程见链接。

1.安装ecarts

npm i echarts -S

2.main.js配置

import Vue from 'vue'
import App from './App'
import router from './router'

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.使用

<template>
<div>
  
  <div id="twoY" style="width: 800px;height:400px;"></div>
 
</div>
</template>
<script>

export default {
  data(){
    return{
     leftData:[4,74,3,4,1,2],
     rightData:[233,255,444,888,69],
    }
  },
  created(){
    
  },
  mounted(){
 this.drawPic()
  },
  methods:{
    drawPic(){
//计算最大值
  function calMax(arr) {
    let max = 0;
    arr.forEach((el) => {
      el.forEach((el1) => {
        if (!(el1 === undefined || el1 === '')) {
          if (max < el1) {
            max = el1;
          }
        }
      })
    })
    let maxint = Math.ceil(max / 9.5);//不让最高的值超过最上面的刻度
    let maxval = maxint * 10;//让显示的刻度是整数
    return maxval;
  }
 
//   //计算最小值
  function calMin(arr) {
    let min = 0;
    arr.forEach((el) => {
      el.forEach((el1) => {
        if (!(el1 === undefined || el1 === '')) {
          if (min > el1) {
            min = el1;
          }
        }
      })
    })
    let minint = Math.floor(min / 10);
    let minval = minint * 10;//让显示的刻度是整数
    return minval;
  }
 
  
    let  Max1 = calMax([this.leftData]), Max2 =calMax([this.rightData]);


       let  myChart = this.$echarts.init(document.getElementById("twoY"));

const option = {
    "color": [
        "#1890ff",
        "#1f9"
    ],
    "grid": {
        top: "25%",
          right: "10%",
          left: "5%",
          bottom: "10%",
    },
    "legend": {
        top: 5,
          left: 250,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
              fontSize: 14,
              color: 'red',
              padding: [3, 8, 0, 2]
          },
          data:['增长率', '数值'],
    },
  
     xAxis: [
        {
          type: "category",
          data: [
            "桥北",
            "镜湖",
            "目澜",
            "山塘",
            "坛丘",
            "衡悦"
        
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "red",
            interval: 0,
            textStyle: {
              fontSize: 10,
            },
            fontFamily: "LCDEF",
          },
        },
      ],
    yAxis: [{
      name: '单位：万元',
       nameLocation: "start",
      nameTextStyle: {color: '#999999'},
      type: "value",
      axisLine: {show: false},
      axisTick: {show: false},
      axisLabel: {verticalAlign: "bottom", color: "#999999"},
      min: 0,
      max: Max1,
      splitNumber: 5,
      interval: Max1  / 5
    }, {
      name: '单位：%',
       nameLocation: "start",
      type: 'value',
      nameTextStyle: {color: '#999999'},
      axisLine: {show: false},
      axisTick: {show: false},
      axisLabel: {verticalAlign: "bottom", color: "#999999"},
      min: 0,
      max: Max2,
      splitNumber: 5,
      interval: Max2  / 5
 
    }],
    

    "series": [{
            "type": "line",
            "name": "数值",
            "data": this.leftData,
        
        },
        {
            "type": "line",
            "name": "增长率",
            "yAxisIndex": 1,
            itemStyle: {
                color: '#20C578',
            },
            symbolSize: 10,
            symbol: 'circle',
            "data":this.rightData
        }
    ]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">


</style>