[JavaScript知识库]echarts3D柱状图，多个柱子，单个柱子，传参即可

?

<template>
  <!-- 折线图 -->
  <div ref="line" class="line"></div>
</template>

<script>
// colorList  横条颜色数组
// data 数据 格式为： []
// areaStyle 渐变色
import * as echarts from 'echarts'
import { onMounted, reactive, toRefs, ref, watch } from 'vue'
export default {
  props: {
    areaStyle: {
      type: Array,
      default: null
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    yAxisTitle: {
      type: String,
      default: '能耗:（MV）'
    },
    gridData: {
      type: Object,
      default: () => {
        return {
          left: '10%',
          top: '15%',
          right: '3%',
          bottom: '12%'
        }
      }
    }
  },
  setup(props) {
    let line = ref('')
    const state = reactive({})

    // let series = []
    // props.data.forEach(item => {
    //   series.push({
    //     name: item.name,
    //     data: item.data,
    //     type: 'line',
    //     areaStyle: {
    //       opacity: 0.5,
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, item.areaStyle ? item.areaStyle : null)
    //     }
    //   })
    // })
    const methods = {
      drawLine() {
        // 初始化
        var myChart = echarts.init(line.value)
        // 配置项
        var normalColor = '#fff'
        var fontSize = 16
        var datas = props.data
        let option = {
          tooltip: {
            trigger: 'item',
            show: true
          },
          grid: {
            left: '10%',
            top: '15%',
            right: '3%',
            bottom: props.data.bottom ? props.data.bottom : '12%'
          },
          animation: false, //去除加载时缓动动画
          legend: {
            show: true,
            selectedMode: false, //取消图例上的点击事件
            data: datas.legendData,
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: normalColor,
                fontSize: fontSize,
                fontWeight: '700'
              },
              margin: 20
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: normalColor
              }
            },
            data: datas.xdata
          },
          yAxis: [
            {
              type: 'value',
              name: props.data.ytitle ? props.data.ytitle : '能耗:（MV）',
              nameTextStyle: {
                color: '#fff',
                fontSize: '15px'
              },
              color: normalColor,
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#384267',
                  type: 'dashed'
                }
              },
              axisLabel: {
                show: props.data.yline != false ? true : false,
                formatter: '{value}',
                textStyle: {
                  color: normalColor,
                  fontSize: fontSize
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#384267',
                  width: 1,
                  type: 'dashed'
                },
                show: props.data.yline != false ? true : false
              }
            },
            {
              type: 'value',
              name: '单位：',
              show: false,
              nameTextStyle: {
                fontSize: fontSize
              },
              color: normalColor,
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: normalColor,
                  fontSize: fontSize
                }
              },
              axisLine: {
                lineStyle: {
                  color: normalColor
                }
              }
            }
          ],
          series: [
            {
              name: props.data.legendData[0] ? props.data.legendData[0] : null,
              data: props.data.Data1 ? props.data.Data1 : null,
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: props.data.color[0] ? props.data.color[0] : '#3A1BFD'
                    },
                    {
                      offset: 1,
                      color: props.data.color[1] ? props.data.color[1] : '#3BEFFD'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff'
              }
            },
            {
              name: props.data.legendData[1] ? props.data.legendData[1] : null,
              data: props.data.Data2 ? props.data.Data2 : null,
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: props.data.color[2] ? props.data.color[2] : 'rgba(	255, 69, 0,1)'
                    },
                    {
                      offset: 1,
                      color: props.data.color[3] ? props.data.color[3] : 'rgba(	255, 69, 0,0.31)'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff'
              }
            },
            {
              name: props.data.legendData[2] ? props.data.legendData[2] : null,
              data: props.data.Data3 ? props.data.Data3 : null,
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: props.data.color[4] ? props.data.color[4] : 'rgba(	50, 205, 50, 1)'
                    },
                    {
                      offset: 1,
                      color: props.data.color[5] ? props.data.color[5] : 'rgba(	50, 205, 50, 0.3)'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff'
              }
            },
            {
              name: props.data.legendData[3] ? props.data.legendData[3] : null,
              data: props.data.Data4 ? props.data.Data4 : null,
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: props.data.color[6] ? props.data.color[6] : 'rgba(138,43,226,1)'
                    },
                    {
                      offset: 1,
                      color: props.data.color[7] ? props.data.color[7] : 'rgba(138,43,226,0.3)'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff'
              }
            },
            {
              name: props.data.legendData[4] ? props.data.legendData[4] : null,
              data: props.data.Data5 ? props.data.Data5 : null,
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: props.data.color[8] ? props.data.color[8] : 'rgba(255,140,0,1)'
                    },
                    {
                      offset: 1,
                      color: props.data.color[9] ? props.data.color[9] : 'rgba(255,140,0,0.3)'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff'
              }
            },
            {
              name: props.data.legendData[5] ? props.data.legendData[5] : null,
              data: props.data.Data6 ? props.data.Data6 : null,
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: props.data.color[10] ? props.data.color[10] : 'rgba(255, 20, 147,1)'
                    },
                    {
                      offset: 1,
                      color: props.data.color[11] ? props.data.color[11] : 'rgba(255, 20, 147,0.3)'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff'
              }
            },
            // 以上是数据
            {
              // 第六个柱子底部正方形
              name: '',
              data: props.data.Data6 ? props.data.Data6 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbol: 'diamond',
              symbolOffset: ['200%', '50%'],
              symbolSize: [30, 15],
              color: props.data.color[11] ? props.data.color[11] : 'rgba(255, 20, 147, 0.3)'
            },
            {
              // 第六个柱子顶部正方形
              name: '',
              data: props.data.Data6 ? props.data.Data6 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              symbol: 'diamond',
              symbolOffset: ['60', '-50%'],
              symbolSize: [20, 12],
              zlevel: 2,
              color: props.data.color[10] ? props.data.color[10] : 'rgba(255, 20, 147,1)'
            },
            {
              // 第五个柱子底部正方形
              name: '',
              data: props.data.Data5 ? props.data.Data5 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbol: 'diamond',
              symbolOffset: ['120%', '50%'],
              symbolSize: [30, 15],
              color: props.data.color[9] ? props.data.color[9] : 'rgba(255,140,0, 0.3)'
            },
            {
              // 第五个柱子顶部正方形
              name: '',
              data: props.data.Data5 ? props.data.Data5 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              symbol: 'diamond',
              symbolOffset: ['36', '-50%'],
              symbolSize: [20, 12],
              zlevel: 2,
              color: props.data.color[8] ? props.data.color[8] : 'rgba(255,140,0,1)'
            },

            {
              // 第四个柱子底部正方形
              name: '',
              data: props.data.Data4 ? props.data.Data4 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbol: 'diamond',
              symbolOffset: ['40%', '50%'],
              symbolSize: [30, 15],
              color: props.data.color[7] ? props.data.color[7] : 'rgba(138,43,226, 0.3)'
            },
            {
              // 第四个柱子顶部正方形
              name: '',
              data: props.data.Data4 ? props.data.Data4 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              symbol: 'diamond',
              symbolOffset: ['12', '-50%'],
              symbolSize: [20, 12],
              zlevel: 2,
              color: props.data.color[6] ? props.data.color[6] : 'rgba(138,43,226, 1)'
            },
            {
              // 第三个柱子底部正方形
              name: '',
              data: props.data.Data3 ? props.data.Data3 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbol: 'diamond',
              symbolOffset: ['-40%', '50%'],
              symbolSize: [30, 15],
              color: props.data.color[5] ? props.data.color[5] : 'rgba(50,205,50, 0.3)'
            },
            {
              // 第三个柱子顶部正方形
              name: '',
              data: props.data.Data3 ? props.data.Data3 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              symbol: 'diamond',
              symbolOffset: ['-12', '-50%'],
              symbolSize: [20, 12],
              zlevel: 2,
              color: props.data.color[4] ? props.data.color[4] : 'rgba(50,205,50, 1)'
            },
            {
              // 第二个柱子底部正方形
              name: '',
              data: props.data.Data2 ? props.data.Data2 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbol: 'diamond',
              symbolOffset: ['-120%', '50%'],
              symbolSize: [30, 15],
              color: props.data.color[3] ? props.data.color[3] : 'rgba(255,69,0,0.3)'
            },
            {
              // 第二个柱子顶部正方形
              name: '',
              data: props.data.Data2 ? props.data.Data2 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              symbol: 'diamond',
              symbolOffset: ['-35', '-50%'],
              symbolSize: [20, 12],
              zlevel: 2,
              color: props.data.color[2] ? props.data.color[2] : 'rgba(255,69,0,1)'
            },
            {
              // 第一个底部正方形
              name: '',
              data: props.data.Data1 ? props.data.Data1 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbol: 'diamond',
              symbolOffset: ['-300%', '50%'],
              symbolSize: [20, 15],
              color: props.data.color[1] ? props.data.color[1] : 'rgba(27,252,229,1)'
            },
            {
              // 第一个顶部正方形
              name: '',
              data: props.data.Data1 ? props.data.Data1 : null,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              symbol: 'diamond',
              symbolOffset: ['-60', '-50%'],
              symbolSize: [20, 12],
              zlevel: 2,
              color: props.data.color[0] ? props.data.color[0] : 'rgba(54,8,254,1)'
            }
          ]
        }

        // ===
        myChart.clear()
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        window.onresize = function () {
          myChart.resize()
        }
      }
    }
    onMounted(() => {
      methods.drawLine()
    })

    watch(
      props,
      newVal => {
        if (newVal) {
          methods.drawLine() //调用ECharts的方法重新绘制
        }
      },
      {
        // 被侦听的内容需要是函数的写法 () => stuInfo.friend
        deep: true
      }
    )
    return {
      ...toRefs(state),
      ...methods,
      line
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  width: 100%;
  height: 100%;
}
</style>

注意需要传参

? processBar: {

? ? ? ? xdata: ['炼钢厂', 'H型钢厂', 'ESP', '石灰厂'],

? ? ? ? // Data1: [200, 35, 112, 275],

? ? ? ? // Data2: [80, 35, 112, 275],

? ? ? ? Data3: [200, 35, 112, 275],

? ? ? ? Data4: [80, 35, 112, 275],

? ? ? ? // Data5: [200, 35, 112, 275],

? ? ? ? // Data6: [80, 35, 112, 275],

? ? ? ? legendData: ['', '', '11月', '国标', '', ''],

? ? ? ? color: ['', '', '', '', '', '', 'rgba(255,0,255,1)', 'rgba(255,0,255,0.3)']

? ? ? },

颜色和length没有也需要传 传空?