MZbigScreen/src/components/oldStatistics/8.vue

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

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

    export default {
        //老年人收入来源统计
        name: "OldPersonSourcesOfIncomeCount",
        data() {
          return {
            dataArr: [],
            myChart: null
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonOldIncome({}, 'POST');
              this.dataArr = result;

              this.myChart = this.$echarts.init(document.getElementById('myChartold8'));
              this.myChart.setOption({
                  grid:{
                      left:"16%",
                      right:"5%",
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: true,
                      data: this.dataArr.map((item) => {
                          return item.label;
                      }),
                      splitLine: {
                          show: true,
                          lineStyle:{
                              color: ['#315070'],
                              width: 1,
                              type: 'solid'
                          }
                      },
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#344db0'
                          }
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: 'white',
                              formatter: '{value}',
                          },
                          fontSize: 12
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#5c6ab6'
                          }
                      },
                      splitLine: {
                          show: true,
                          lineStyle:{
                              color: ['#315070'],
                              width: 1,
                              type: 'solid'
                          }
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: 'white',
                              formatter: '{value}',
                          }
                      },
                      axisTick: {
                          show: false
                      },
                  },
                  series: [
                      {
                          type: 'line',
                          smooth: true,
                          areaStyle: {
                              color: {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [{
                                      offset: 0, color: '#A79A84' // 0% 处的颜色
                                  }, {
                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
                                  }],
                                  global: false // 缺省为 false
                              }
                          },
                          symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
                          symbolSize: [10, 10],
                          data: this.dataArr.map((item) => {
                              return item.value;
                          }),
                          label: {
                              show: true,
                              formatter: '{c}',
                              color: '#fff',
                              fontSize: 16
                          },
                          itemStyle: {
                              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                  offset: 0,
                                  color: '#FF6C13'
                              }, {
                                  offset: 1,
                                  color: '#ffea22'
                              }]),
                          },
                          lineStyle: {
                              width: 2
                          }
                      }
                  ]
              });
          }
        },
        watch: {
            data() {
                this.myChart.destroy();
                this.draw();
            }
        },
        mounted() {
            this.draw();
        }
    }
</script>

<style scoped>

</style>