MZbigScreen/src/components/oldStatistics/5.vue

<template>
  <div id="myChartold5" style="width: 100%; height: 100%;"></div>
</template>

<script>
    import { oldPersonOldHealth } from '../../api'

    export default {
        name: "MzColumnCharts",
        data() {
          return {
            dataArr: [],
            colorArr: [
              { color1: '#ff2311', color2: 'rgba(255, 128, 125, 0.1)' },
              { color1: '#2222ff', color2: 'rgba(161, 154, 255, 0.1)' },
              { color1: '#00c8ff', color2: 'rgba(154, 235, 255, 0.1)' },
              { color1: '#ff00fd', color2: 'rgba(255, 159, 242, 0.1)' }
            ],
            myChart: null
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonOldHealth({}, 'POST');
              this.dataArr = result;

              this.myChart = this.$echarts.init(document.getElementById('myChartold5'));
              this.myChart.setOption({

                  xAxis: {
                      type: 'category',
                      data: this.dataArr.map((item) => item.label),
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#3075e2'
                          }
                      },
                      splitLine:{
                          show:false
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: 'white'
                          }
                      }

                  },
                  yAxis: {
                      type: 'value',
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#3075e2'
                          }
                      },
                      splitLine:{
                          show:false
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: 'white'
                          }
                      }
                  },
                  series: [{
                      type: 'bar',
                      barWidth:'40',
                      data: this.dataArr.map((item) => item.value),
                      itemStyle: {
                          color: (params) => {
                              return new this.$echarts.graphic.LinearGradient(
                                  0, 0, 0, 1,
                                  [
                                      {offset: 0, color: this.colorArr[ params.dataIndex ].color1},
                                      {offset: 1, color: this.colorArr[ params.dataIndex ].color2}
                                  ]
                              )
                          }
                      },
                      label: {
                          show: true,
                          position: 'top',
                          color: '#fff',
                          fontSize: 16
                      }
                  }]
              });
          }
        },
        mounted() {
          this.draw();
        }
    }
</script>

<style scoped>

</style>