前端笔记-StackedBar3D的初步修改（添加legend等）

目录

 

为什么会有这个笔记

官方实例

修改后的实例

---

 

为什么会有这个笔记

因为官方实例感觉有点不全，缺少tilte和一系列的东西，在此补全下，并且全部简单处理，在此记录下，方便以后查阅。

 

官方实例

运行截图如下

代码如下：

$.getScript('vendors/simplex.js').done(function () {


function generateData() {
    var data = [];
    var noise = new SimplexNoise(Math.random);
    for (var i = 0; i <= 10; i++) {
        for (var j = 0; j <= 10; j++) {
            var value = noise.noise2D(i / 5, j / 5);
            data.push([i, j, value * 2 + 4]);
        }
    }
    return data;
}

var series = [];
for (var i = 0; i < 10; i++) {
    series.push({
        type: 'bar3D',
        data: generateData(),
        stack: 'stack',
        shading: 'lambert',
        emphasis: {
            label: {
                show: false
            }
        }
    });
}

myChart.setOption({
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        viewControl: {
            // autoRotate: true
        },
        light: {
            main: {
                shadow: true,
                quality: 'ultra',
                intensity: 1.5
            }
        }
    },
    series: series
});

});

 

修改后的实例

运行截图如下：

代码如下：

<template>
  <div>
    <div>
      <div id="barMain" style="width: 500px; height:500px"></div>
    </div>
  </div>
</template>

<script>
  import "echarts-gl";

  export default {
    name: "Bar3DSimpleGraph",
    mounted(){
      this.drawLine();
    },
    methods: {

      //开始画图了
      drawLine(){

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('barMain'));

        let hours = [ '1a', '2a', '3a', '4a', '5a'];
        let days = ['Saturday'];


        let option = {
          xAxis3D: {
            type: 'category',
            data: hours
          },
          yAxis3D: {
            type: 'category',
            data: days
          },
          zAxis3D: {
            type: 'value'
          },
          grid3D: {
            viewControl: {
              // autoRotate: true
            },
            light: {
              main: {
                shadow: true,
                quality: 'ultra',
                intensity: 1.5
              }
            }
          },
          tooltip: {},
          legend: {
            data: ['一档', '二档','三档','四档','五档']
          },
          series: [
            {
              type: 'bar3D',
              name: "一档",
              data: [[0, 2, 20], [1, 2, 2], [2, 2, 2], [3, 2, 2], [4, 2, 2]],
              stack: 'stack',
              shading: 'lambert',
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              type: 'bar3D',
              name: "二档",
              data: [[0, 2, 2], [1, 2, 20], [2, 2, 2], [3, 2, 2], [4, 2, 2]],
              stack: 'stack',
              shading: 'lambert',
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

      }
    }
  }

</script>

<style scoped>

</style>