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

总结

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

相关文章

  • Vuex中State的使用方法

    Vuex中State的使用方法

    这篇文章主要介绍了Vuex中State的使用方法,Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态,这也意味着,每个应用将仅仅包含一个 store 实例,需要的朋友可以参考下
    2023-11-11
  • Vue如何使用混合Mixins和插件开发详解

    Vue如何使用混合Mixins和插件开发详解

    这篇文章主要介绍了Vue如何使用混合Mixins和插件开发详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 深入解析Vue源码实例挂载与编译流程实现思路详解

    深入解析Vue源码实例挂载与编译流程实现思路详解

    这篇文章主要介绍了Vue源码实例挂载与编译流程实现思路详解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

    vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

    validate()可以指定校验范围内,或者是全局的 字段。而validateAll()只能校验全局。这篇文章主要介绍了vue+VeeValidate 校验范围(部分校验,全部校验) ,需要的朋友可以参考下
    2018-10-10
  • Vue项目部署后首页白屏问题排查与解决方法

    Vue项目部署后首页白屏问题排查与解决方法

    在部署 Vue.js 项目时,有时会遇到首页加载后出现白屏的情况,这可能是由于多种原因造成的,本文将介绍一些常见的排查方法和解决方案,帮助开发者快速定位问题并解决,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • Element-ui中的Cascader级联选择器基础用法

    Element-ui中的Cascader级联选择器基础用法

    这篇文章主要为大家介绍了Element-ui中的Cascader级联选择器基础用法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue 组件中slot插口的具体用法

    vue 组件中slot插口的具体用法

    这篇文章主要介绍了vue 中slot 的具体用法,包括子组件父组件的代码介绍,需要的朋友可以参考下
    2018-04-04
  • Vue中的基础过渡动画及实现原理解析

    Vue中的基础过渡动画及实现原理解析

    这篇文章主要介绍了Vue中的基础过渡动画原理解析,需要的朋友可以参考下
    2018-12-12
  • 简易Vue评论框架的实现(父组件的实现)

    简易Vue评论框架的实现(父组件的实现)

    本篇文章主要介绍了简易 Vue 评论框架的实现(父组件的实现),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue搭建后台系统需要注意的问题

    Vue搭建后台系统需要注意的问题

    这篇文章主要介绍了Vue搭建后台系统需要做的几点,文中给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11

最新评论