目錄

?

為什么會有這個筆記

官方實例

修改后的實例

---

?

為什么會有這個筆記

因為官方實例感覺有點不全，缺少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>

?

總結

以上是生活随笔為你收集整理的前端笔记-StackedBar3D的初步修改（添加legend等）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。