[JavaScript知识库]vue使用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>