为什么会有这个笔记

因为官方实例感觉有点不全，缺少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等）相关推荐

前端笔记-js文件首行添加;号（前端小技巧）
这里记录一个前端的小技巧: 一般来说,我们自己写js代码,都会在首行添加";"号原因是html加载js,如果有多个,那么这些js文件会被合并. 当某个js文件,尾巴没有 &quo ...
前端笔记-vue cli为web添加底纹
目录基本概念代码与实例基本概念这里主要是使用了css预处理首先下载包 npm install stylus stylus-loader 随后创建文件,然后写代码这里还要导入代码: 这里还要 ...
Henry前端笔记之 git实际操作问题记录
Henry前端笔记之 git实际操作问题记录在拉取后发现之前有未推送的更改早上有一次提交没有推送成功后来强制拉取覆盖了因为冲突太多~~ 现在决定找回之前的提交错误分析: 解决方案: 参考文献 ...
Henry前端笔记之 HTML相关
Henry前端笔记之 HTML相关一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签.(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合) 标签写法要用小 ...
前端笔记知识点整合之JavaScript（五）关于数组和字符串那点事
前端笔记知识点整合之JavaScript(五)关于数组和字符串那点事一.数组 1.1数组概念数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整 ...
Chrome浏览器新标签页设置首页主页修改添加网站Infinity插件好用
Infinity new tab 是一款美观实用的chrome 新标签页.最常访问的网站添加,修改,删除网址都有,每日一图,云备份等功能都具备.是一款基于html5的Chrome扩展程序,它重新定义了 ...
【超级无敌详细的黑马前端笔记！即时更新~】
[超级无敌详细的黑马前端笔记!即时更新~] 这个笔记,是我自己在同步学习黑马前端使用的,不可以商用哦学习路径基础概念铺垫(了解) 认识网页五大浏览器和渲染引擎 Web标准 HTML初体验 HTM ...
Pink老师前端笔记-CSS第六天
Pink老师前端笔记-CSS第六天 # day08-前端基础CSS第六天今日目标能够说出为什么要用定位能够说出定位的 4 种分类能够说出 4 种定位各自的特点能够说出为什么常用子绝父相 ...
前端笔记-利用thymeleaf隐藏显示input及label
先来看看效果: 这里有一个add.html,添加,修改都使用这个文件,当点击添加后: add.html被构造成这样(点击添加后): 当点击编辑后: 对应的前端源码如下: <!DOCTYPE ht ...

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

为什么会有这个笔记

官方实例

修改后的实例

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

最新文章

热门文章