vue使用echarts如何实现双柱状图和双y轴的柱状图

 更新时间:2023年10月07日 09:33:56   作者:这是提莫大人  
这篇文章主要介绍了vue使用echarts如何实现双柱状图和双y轴的柱状图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用echarts实现双柱状图和双y轴的柱状图

1.引入

cnpm i echarts -S

2.main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.echarts.vue文件中

实现多个柱形图就用series

双y轴就用yAxis多放一个参数

<template>
  <div class="MonthsCon">
    <div id="MonthsConChart" style=" height: 230px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      xData: [1,3, 3],
      yetData: [10, 20, 30], // 已办结
      inData: [11, 12 , 14], // 受理中
      rateData: [1, 2, 3], // 办结率
    };
  },
  mounted() {
    this.initMap() 
  },
  methods: {
    initMap() {
      var myChart = this.$echarts.init(document.getElementById('MonthsConChart'));
      const option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                icon: 'rect',//形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
                itemWidth: 10,  // 设置宽度
                itemHeight: 4, // 设置高度
                itemGap: 24, // 设置间距
                data: ['夏天的销量', '冬天的销量'],
                textStyle: {
                    //文字样式
                    color: '#c1dafc',
                    fontSize: '12'
                },
                right: '30%'
              },
              xAxis: [
                {
                  type: 'category',
                  data: ['春天', '夏天', '秋天','冬天'],
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '单位个',
                  min: 0,
                  max: 50,
                  interval: 10,
                  axisLabel: {
                    formatter: '{value}'
                  }
                },
                {
                  type: 'value',
                  name: '单位个',
                  min: 0,
                  max: 50,
                  interval: 10,
                  axisLabel: {
                    formatter: '{value}'
                  }
                }
              ],
              series: [
                {
                  name: '夏天的销量',
                  type: 'bar',
                  barWidth: '5%',
                  data: [20, 20, 30, 40]
                },
              {
                name: '冬天的销量',
                type: 'bar',
                barWidth: '5%',
                data: [10,20, 11, 1]
              }
              ],
              color: ['#b1de6a', '#4ab0ee']
            };
      myChart.setOption(option);
    }
  },
};
</script>

echarts实现双y轴,并且实现制定数据使用y轴

在使用echarts中,我们经常会用到双y轴去展示数据,有时候,我们可能需要自己去设置,具体使用某一个y轴去展示某一个具体的数据。

如图所示

我们的y轴有两个,数据共有3个,这个图有两个不好的点:

1.没有标明左右坐标具体是显示什么的

2.很明显今日访问人数和昨日访问人数需要使用同一个坐标进行数据的对比。

优化后的设置

1.双y轴的设置,加上具体是用来显示什么数据的

2.设置具体的数据使用某一个y轴进行展示

其中yAxisIndex,默认为0,在单个图表实例中存在多个y轴的时候使用,所以,我们可以通过设置这个,实现具体的数据使用具体的y轴展示。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现简单的购物车功能

    vue实现简单的购物车功能

    这篇文章主要为大家详细介绍了vue实现简单的购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue3如何优雅的实现移动端登录注册模块

    vue3如何优雅的实现移动端登录注册模块

    这篇文章主要给大家介绍了关于vue3如何优雅的实现移动端登录注册模块的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue.js实现回到顶部动画效果

    vue.js实现回到顶部动画效果

    这篇文章主要为大家详细介绍了vue.js实现回到顶部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 前端框架学习总结之Angular、React与Vue的比较详解

    前端框架学习总结之Angular、React与Vue的比较详解

    这篇文章主要跟大家分享了关于前端框架中Angular.js、React.js与Vue.js的全方位比较,文章介绍的非常详细,对大家进行区分对比这三者之间的差异区别很有帮助,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • vue添加锚点,实现滚动页面时锚点添加相应的class操作

    vue添加锚点,实现滚动页面时锚点添加相应的class操作

    这篇文章主要介绍了vue添加锚点,实现滚动页面时锚点添加相应的class操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • element ui循环调用this.$alert 消息提示只显示最后一个

    element ui循环调用this.$alert 消息提示只显示最后一个

    这篇文章主要介绍了element ui循环调用this.$alert 消息提示只显示最后一个,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 详解关于element级联选择器数据回显问题

    详解关于element级联选择器数据回显问题

    这篇文章主要介绍了详解关于element级联选择器数据回显问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue中组件传值的常见方式小结

    vue中组件传值的常见方式小结

    在 Vue.js 中,组件之间的数据传递是一个常见的需求,Vue 提供了多种方法来实现这一目标,包括 props、全局事件总线、消息的订阅与发布等,下面我们就来学习一下这些方法的具体实现吧
    2023-12-12
  • Vue中created和mounted使用场景分析

    Vue中created和mounted使用场景分析

    vue.js中created方法是一个生命周期钩子函数,一般可以在created函数中调用ajax获取页面初始化所需的数据,这篇文章主要介绍了Vue中created和mounted使用场景分析,需要的朋友可以参考下
    2023-05-05
  • el-select与el-tree结合使用实现树形结构多选框

    el-select与el-tree结合使用实现树形结构多选框

    我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论