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-cli3配置与跨域处理方法

    vue-cli3配置与跨域处理方法

    这篇文章主要介绍了vue-cli3配置与跨域处理方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue+elementUi实现点击地图自动填充经纬度以及地点

    vue+elementUi实现点击地图自动填充经纬度以及地点

    这篇文章主要为大家详细介绍了vue+elementUi实现点击地图自动填充经纬度以及地点,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue 指定文字高亮的实现示例

    vue 指定文字高亮的实现示例

    在做文字处理的项目时经常会遇到搜索文字并高亮的需求,本文就来介绍vue 指定文字高亮的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • vue component 中引入less文件报错 Module build failed

    vue component 中引入less文件报错 Module build failed

    这篇文章主要介绍了vue component 中引入less文件报错 Module build failed的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue如何自定义InputNumber计数器组件

    vue如何自定义InputNumber计数器组件

    这篇文章主要介绍了vue如何自定义InputNumber计数器组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现开始时间和结束时间范围查询

    Vue实现开始时间和结束时间范围查询

    这篇文章主要为大家详细介绍了Vue实现开始时间和结束时间的范围查询,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue中el-table多层级嵌套的具体实现

    vue中el-table多层级嵌套的具体实现

    本文主要介绍了vue中el-table多层级嵌套的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • vue项目如何全局修改el-button样式

    vue项目如何全局修改el-button样式

    这篇文章主要介绍了vue项目如何全局修改el-button样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中响应式系统实现原理图文讲解

    Vue中响应式系统实现原理图文讲解

    Vue的响应式实现是借助Object.defineProperty通过重写getter和setter方法来进行的数据劫持,Vue3通过Proxy代理拦截对象中任意属性的变化,通过Reflect反射对源对象的属性进行操作,然后再在get里收集依赖在set里派发更新
    2023-03-03
  • vue项目中用cdn优化的方法

    vue项目中用cdn优化的方法

    本篇文章主要介绍了vue项目中用cdn优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论