cxyy-web2/src/views/one/parts/echarts2.vue

<template>
  <div class="echarts">
    <div class="left">
      <div ref="echarts1" class="echarts1"></div>
    </div>
    <div class="right">
      <div ref="echarts2" class="echarts2"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.echarts {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .left {
    width: 50%;
    .echarts1 {
      height: 600px;
      width: 100%;
    }
  }
  .right {
    width: 50%;
    .echarts2 {
      height: 600px;
      width: 100%;
    }
  }
}
</style>
<script setup>
import * as echarts from 'echarts'
// 接口
import { UtilStore } from '@/store/api/util'
const utilStore = UtilStore()
const info = ref({})
const echarts1 = ref(null)
const echarts2 = ref(null)
onMounted(async () => {
  await search()
  await echarts1View()
  await echarts2View()
})
const search = async () => {
  let res = await utilStore.sstatistics()
  if (res.errcode == '0') info.value = res.data
}
function echarts1View() {
  const myChart1 = echarts.init(echarts1.value)
  const option1 = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    calculable: true,
    series: [
      {
        name: '供给行业数据分析',
        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        lableLine: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: info.value.one.list
      }
    ]
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', function () {
    myChart1.resize()
  })
}
function echarts2View() {
  var myChart2 = echarts.init(echarts2.value)
  var option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 50,
      left: 44,
      right: 44,
      bottom: 30
    },
    legend: {
      right: '0',
      textStyle: {
        color: '#FFFFFF'
      },
      color: ['#ffcc00', '#28f2e6']
    },
    xAxis: [
      {
        type: 'category',
        data: info.value.two.nameList,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#7FC5F5'
          },
          fontSize: 18,
          interval: 0
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(127,197,245,0.5)',
            width: 1 //这里是为了突出显示加上的
          }
        },
        triggerEvent: true
      }
    ],
    yAxis: {
      // y轴
      type: 'value',
      splitNumber: 5, // 横线数

      axisLabel: {
        show: true,
        formatter: '{value}',
        fontSize: 18,
        color: '#7FC5F5'
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          color: 'rgba(127,197,245,0.5)',
          width: 1
        }
      }
    },
    series: [
      {
        data: info.value.two.list,
        type: 'bar',
        barWidth: '40%',
        label: {
          normal: {
            show: true,
            position: 'top',
            fontSize: 18
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#FFFFFF'
              }
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#28f2e6' },
              { offset: 0.5, color: 'rgba(40,242,230,0.8)' },
              { offset: 1, color: 'rgba(255,255,255,0.5)' }
            ])
          }
        }
      }
    ]
  }
  option2 && myChart2.setOption(option2)
  window.addEventListener('resize', function () {
    myChart2.resize()
  })
}
</script>