vue echarts柱状统计图，多组数据对比

父组件
 <el-col :span="12" />
    <div class="content-container">
      <el-row>
        <el-col :span="18">
          <complexChart :mixture-data="MixtureData" />
        </el-col>
        <el-col :span="6">
          <chartRef :pie-data="optionRight2" class="cgart" />
        </el-col>
      </el-row>
 <script>
 export default {
data() {
  return {
     MixtureData: {
        title: '啦啦啦啦啦啦啦啦',
        width: 100 + '%', // 柱状图盒子宽度
        legend: {
          // 图例属性
          data: [
            {
              name: '任务',
              // 图例引用图片。
              icon: ''
            },
            {
              name: '完成',
          
              icon: ''
            },
            {
              name: '完成进度',
              icon: 'image://' + require('../../icons/svg/404.svg')
            }
          ],
          orient: 'horizontal', // 标记排列显示
          top: 15, // 标记位置
          left: 1 + '%', // 标记位置
          // icon: "roundRect",
          itemWidth: 24,
          itemHeight: 8
          // itemGap:5,//图例间距
          // padding:5,//每个图例padding
          // textStyle:{//图例文字样式设置
          //  lineHeight:5,
          // }
        },
        grid: {
          // 绘图区调整
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          // X轴显示分类
          type: 'category',
          dataList: [
            '北山街道',
            '西溪街道',
            '灵隐街道',
            '翠苑街道',
            '文新街道',
            '古荡街道',
            '转塘街道',
            '留下街道',
            '蒋村街道',
            '三墩镇',
            '双浦镇',
            '云栖小镇',
            '紫金港科技城'
          ],
          axisLabel: {
            // 坐标轴文字显示样式
            lineHeight: 18, // 字体行高
            fontNum: 8, // 每行显示字数
            rotate: 20, // 文字旋转角度，0不旋转
            align: 'right'
          }
        },
 
        series: [
          // 柱状图数据
          {
            name: '任务',
            type: 'bar',
            data: [
              52000,
              86500,
              86500,
              125000,
              63000,
              342500,
              203000,
              203000,
              87500,
              100000,
              45000,
              50500,
              100000
            ],
            label: {
              show: false,
              position: 'top' // 数值在右边显示
            },
            labelLine: { show: false }, // 是否显示线条
            itemStyle: {
              color: '#1492FF' // 柱状图颜色
            }
          },
          {
            name: '完成',
            type: 'bar',
            data: [
              10493,
              18631,
              18311,
              34883,
              16442,
              154657,
              33687,
              61340,
              16333,
              48180,
              10458,
              8465,
              18300
            ],
            label: {
              show: false,
              position: 'top' // 数值在右边显示
            },
            labelLine: { show: false }, // 是否显示线条
            itemStyle: {
              color: '#09C592'
            }
          },
          {
            name: '完成进度',
            type: 'line',
            data: [
              20.18,
              21.54,
              21.17,
              27.91,
              26.1,
              45.16,
              16.59,
              30.22,
              18.67,
              48.18,
              23.24,
              16.76,
              18.3
            ],
            yAxisIndex: 1, // 双Y轴，选择折线图对应某个轴
            label: {
              show: true,
              position: 'top', // 数值在右边显示
              formatter: '{c} %'
            },
 
            labelLine: { show: false }, // 是否显示线条
            itemStyle: {
              color: '#FF9314'
            }
          }
        ]
      },
  }
}
}
</script>
子组件
<template>
  <!-- //这是子组件 -->
  <div class="mixture_wap">
    <div id="mixtureId" class="mixture" />
  </div>
</template>
 
<script>
const _c = { id: 1 }
const echarts = require('echarts')
export default {
  props: {
    MixtureData: {
      type: Object
    }
  },
  data() {
    return {
      myHisLevelChart: ''
    }
  },
  created() {
  },
  mounted() {
    const _this = this
    var chartDom = document.getElementById('mixtureId')
    this.myHisLevelChart = echarts.init(chartDom)
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener('resize', this.initChart, false)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initChart, false)
  },
  methods: {
    initChart() {
      const _this = this
      this.myHisLevelChart.resize()
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 鼠标悬停显示样式
            shadowStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 2
            }
          },
          formatter: '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%' // 展示百分比  五条折线
        },
        legend: this.MixtureData.legend, // 标记属性
        grid: this.MixtureData.grid, // 绘图区调整
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 400000,
            interval: 100000
          },
          {
            type: 'value',
            min: 0,
            max: 125,
            interval: 25,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        xAxis: {
          // X轴显示数值
          type: this.MixtureData.xAxis.type,
          data: this.MixtureData.xAxis.dataList,
          axisLabel: {
            // 坐标轴文字显示样式
            interval: 0,
            lineHeight: this.MixtureData.xAxis.axisLabel.lineHeight,
            rotate: this.MixtureData.xAxis.axisLabel.rotate,
            formatter: function(value) {
              var str = ''
              var num = _this.MixtureData.xAxis.axisLabel.fontNum // 每行显示字数
              var valLength = value.length // 该项Y轴字数
              var rowNum = Math.ceil(valLength / num) // 行数
              if (rowNum > 1) {
                for (var i = 0; i < rowNum; i++) {
                  var temp = ''
                  var start = i * num
                  var end = start + num
                  temp = value.substring(start, end) + '\n'
                  str += temp
                }
                return str
              } else {
                return value
              }
            }
          }
        },
        series: this.MixtureData.series
      }
      this.myHisLevelChart.setOption(option, true)
    }
  }
}
</script>
 
<style lang="scss" scoped>
.mixture_wap {
  width: 100%;
  .mixture {
    width: 100%;
    height: 255px;
  }
}
</style>
 
复制