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轴展示。

总结

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

相关文章

  • Vue3 跨域配置devServer的参数和设置方法

    Vue3 跨域配置devServer的参数和设置方法

    这篇文章主要介绍了Vue3 跨域配置devServer的参数和设置,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue-router路由懒加载及实现的3种方式

    vue-router路由懒加载及实现的3种方式

    这篇文章主要给大家介绍了关于vue-router路由懒加载及实现的3种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Vue+Element-ui弹窗 this.$alert is not a function问题

    Vue+Element-ui弹窗 this.$alert is not a function问题

    这篇文章主要介绍了Vue+Element-ui弹窗 this.$alert is not a function问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue 导航守卫和axios拦截器有哪些区别

    vue 导航守卫和axios拦截器有哪些区别

    这篇文章主要介绍了vue 导航守卫和axios拦截器有哪些区别,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • vue项目中main.js的用法

    vue项目中main.js的用法

    src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件, Vue.use()的作用就是让它里面被注册的组件能够被全局使用,本文通过实例代码介绍vue项目中main.js的用法,感兴趣的朋友一起看看吧
    2023-10-10
  • vue2.0使用md-edit编辑器的过程

    vue2.0使用md-edit编辑器的过程

    这篇文章主要介绍了vue2.0+使用md-edit编辑器的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-02-02
  • 解决vue.js在编写过程中出现空格不规范报错的问题

    解决vue.js在编写过程中出现空格不规范报错的问题

    下面小编就为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue 组件事件触发和监听实现源码解析

    Vue 组件事件触发和监听实现源码解析

    这篇文章主要为大家介绍了Vue 组件事件触发和监听实现源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Vuejs实现购物车功能

    Vuejs实现购物车功能

    这篇文章主要为大家详细介绍了Vuejs实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 浅谈VUE uni-app 模板语法

    浅谈VUE uni-app 模板语法

    这篇文章主要介绍了uni-app 的模板语法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10

最新评论