sgxt_web/src/views/home/echarts/3DbarEcharts.vue

<template>
  <div style="height:100%;width:100%" :id="echartsId"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { fa } from "element-plus/es/locale.mjs";
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
const props = defineProps({
  echartsId:{
    type:String,
    default:'lineId'
  },
  data:{
    type:Object,
    default:{
      list:[],
      colors:[]
    }
  }
});
watch(()=>props.data,val=>{
  nextTick(()=>{ haandleData(val)  })
},{immediate:true,deep:true})

const haandleData = (data)=>{
  let val = [],x_value=[]
  let color = data.colors;
  let topColor = data.topColor;
  data.list.forEach(item=>{
    val.push(item.val);
    x_value.push(item.label);
  })
  chartFn(val,x_value,color,topColor)
}

function chartFn(val,x_value,color,topColor) {
  var myChart = echarts.init(document.getElementById(props.echartsId));
  const sideData1 = val//[100, 110, 120, 134, 190, 230];
  const name = ''; //"销量";
  var x_value = x_value;//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  var option = {
    tooltip: { trigger: 'axis' },
    legend: {
      show: false,
    },
    grid: {
      top:"30px",
      left:"5px",
      right:"0px",
      bottom:"10%",
      containLabel: true
    },
    toolbox: {
      show: true,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: false
        },
        data: x_value,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#333" //X轴文字颜色
          },
        },
      }
    ],
    yAxis: [
      {
        name:'单位：元/吨',
        nameTextStyle: { color: "#fff" },
        type: 'value',
        splitLine: { show: false },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#333" //X轴文字颜色
          },
        },
      }
    ],
    series: [
      {
        name: name,
        tooltip: { show: false },
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: color ? color[0] : '#28EEBF'// 0% 处的颜色
            }, {
              offset: 1,
              color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
            }], false)
          }
        },
        data: sideData1,
        barGap: 0,
        label: {
          show: true,
          position: 'top',
          distance: 10,
          textStyle: {
            color: '#0EBBC5',
            fontSize: 14,
            fontWeight: 'bold'
          },
          formatter: '{c}'
        }
      },
      {
        name: name,
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: color ? color[0] : '#28EEBF'// 0% 处的颜色
            }, {
              offset: 1,
              color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
            }], false)
          }
        },
        barGap: 0,
        data: sideData1,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'white',
            fontSize: 10
          }
        }
      }, 
      {
        name: name,
        tooltip: {
          show: false
        },
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#fff',
          color: topColor || '#1bd6c2' // 顶部方块的颜色
        },
        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
        symbolSize: ['22', '12'], // 第一个值控制顶部方形大小
        symbolOffset: ['-0', '-6'], // 控制顶部放行 左右和上下
        symbolRotate: -30,
        symbolPosition: 'end',
        barGap: 0,
        data: sideData1,
        z: 3,
      }
    ]
  };
  option && myChart.setOption(option);
  window.addEventListener('resize',function(){
    myChart.resize();
  })
}
</script>

<style lang="scss" scoped>

</style>