echarts双柱状折线图

echa

<template>
  <div class="cont4">
   

      <div ref="chart" :style="{width: '100%', height: '4rem'}"></div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
  
      cockpitData: [

        {
          "unit": "吨",
          "areaname": "1月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "氨氮排放量",
          "value": "250",
          "value1": '62'
        },

        {
          "unit": "吨",
          "areaname": "2月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "氨氮排放量",
          "value": "129",
          "value1": '34'
        },
        {
          "unit": "吨",
          "areaname": "3月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "氨氮排放量",
          "value": "60"
          ,
          "value1": '67'
        },
        {
          "unit": "吨",
          "areaname": "4月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "氨氮排放量",
          "value": "9"
          ,
          "value1": '54'
        },
        {
          "unit": "吨",
          "areaname": "5月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "氨氮排放量",
          "value": "12"
          ,
          "value1": '32'
        },
        {
          "unit": "吨",
          "areaname": "6月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "氨氮排放量",
          "value": "42"
          ,
          "value1": '32'
        },
        {
          "unit": "吨",
          "areaname": "7月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "化学需氧量",
          "value": "59",
          "value1": '78'
        },
        {
          "unit": "吨",
          "areaname": "8月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "化学需氧量",
          "value": "13",
          "value1": '54'
        },
        {
          "unit": "吨",
          "areaname": "9月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "化学需氧量",
          "value": "526",
          "value1": '32'
        },
        {
          "unit": "吨",
          "areaname": "10月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "化学需氧量",
          "value": "22"
          ,
          "value1": '65'
        },
        {
          "unit": "吨",
          "areaname": "12月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "化学需氧量",
          "value": "88",
          "value1": '56'
        },
        {
          "unit": "吨",
          "areaname": "12月",
          "time": "2019年",
          "title": "废水各地市当年排放量",
          "type": "化学需氧量",
          "value": "57",
          "value1": '43'
        },
      ],
    }
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chart)
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    updateChart() {
      // 循环遍历出x轴的name
      const xAx = this.cockpitData.map((item) => {
        return item.areaname
      })
      const yAy = this.cockpitData.map((item) => {
        return item.value
      })
      const yAy1 = this.cockpitData.map((item) => {
        return item.value1
      })
      console.log('柱状图数据', xAx, yAy);
      const option = {
        backgroundColor: "",

        "tooltip": {
          "trigger": "axis",
          "axisPointer": {
            "type": "shadow",
            textStyle: {
              color: "#fff"
            }

          },
        },
        "grid": {
          "borderWidth": 0,
          bottom: '15%',
          textStyle: {
            color: "#fff"
          }
        },
        "legend": {
          x: '4%',
          top: '11%',
          textStyle: {
            color: '#90979c',
          },
          "data": ['老用户', '新用户', '总']
        },


        "calculable": true,
        "xAxis": [{
          "type": "category",
          "axisLine": {
            lineStyle: {
              color: '#fff'
            }
          },
          "splitLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "splitArea": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "data": xAx,
        }],
        "yAxis": [{
          "type": "value",
          "splitLine": {
            "show": false
          },
          "axisLine": {
            lineStyle: {
              color: '#fff'
            }
          },
          "axisTick": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "splitArea": {
            "show": false
          },

        }],
        "dataZoom": [{
          "show": true,
          "height": 10,
          "xAxisIndex": [
            0
          ],
          bottom: 10,
          "start": 10,
          "end": 80,
          handleSize: '110%',
          handleStyle: {
            color: "#d3dee5",

          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "#90979c"


        }, {
          "type": "inside",
          "show": true,
          "height": 15,
          "start": 1,
          "end": 35
        }],
        "series": [{
          "name": "老用户",
          "type": "bar",
          "stack": "总量",
          "barMaxWidth": 35,
          "barGap": "10%",
          "itemStyle": {
            //柱状图颜色
            "normal": {
              "color": "rgba(255,144,128,1)",
              "label": {
                "show": false,
                "textStyle": {
                  "color": "#fff"
                },
                "position": "insideTop",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data": yAy
        },

        {
          "name": "新用户",
          "type": "bar",
          "stack": "总量",
          "itemStyle": {
            "normal": {
              "color": "rgba(0,191,183,1)",
              "barBorderRadius": 0,
              "label": {
                "show": false,
                "position": "top",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data": yAy1
        }, {
          "name": "总",
          "type": "line",
          "stack": "总量",
          symbolSize: 12,
          symbol: 'circle',
          "itemStyle": {
            "normal": {
              "color": "rgba(252,230,48,1)",
              "barBorderRadius": 0,
              "label": {
                "show": false,
                "position": "top",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data": yAy1
        },
        ]
      }
      this.chartInstance.setOption(option)
    },

  },
  mounted() {
    this.$nextTick(function () {
      this.initChart()
      this.updateChart()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  }
}
</script>

<style lang="scss"  scoped>
.cont4 {
  background: url('~@/assets/images/bk2.png');
  background-size: 100% 100%;
  padding: 0.1rem;
  .content {
    padding: 0.14rem;

    .chart {
      height: 22vh;
    }
  }
}
</style>