在vue中使用Echarts的3D柱状图

该文章为记录，避免再次踩坑

安装所需依赖版本：

"echarts": "^4.9.0",
"echarts-gl": "^1.1.1",
"vue-echarts": "^5.0.0-beta.0",

在main.js引入

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)import 'echarts-gl'

组件代码

<template><div class="echarts-class"><v-chartv-if="options":options="options"height="100%"width="100%"class="echarts-class"/></div>
</template><script>
export default {props: {data: {type: Array,default: () => [],},},data() {return {options: false,};},mounted() {this.init();},methods: {init() {let that = this;console.log(this.data);let minvalue = 9999999;let maxvalue = 0;function generateData(theta, min, max) {var data = [];for (let i of that.data) {data.push([i.x, i.y, i.z]);minvalue = Math.min(minvalue, i.z);maxvalue = Math.max(maxvalue, i.z);}return data;}var data = generateData();this.options = {visualMap: {show: false,min: minvalue,max: maxvalue,inRange: {color: ["#313695","#4575b4","#74add1","#abd9e9","#e0f3f8","#ffffbf","#fee090","#fdae61","#f46d43","#d73027","#a50026",],},},xAxis3D: {type: "category",},yAxis3D: {type: "category",},zAxis3D: {type: "value",},grid3D: {axisLine: {lineStyle: { color: "#000" },},axisPointer: {lineStyle: { color: "#000" },},viewControl: {},light: {main: {shadow: true,quality: "ultra",intensity: 1.5,},},},series: [{type: "bar3D",data: data,shading: "lambert",label: {formatter: function (param) {return param.value[2].toFixed(1);},},},],};},},watch: {data: {handler(val, oldVal) {this.init();},deep: true,},},
};
</script><style lang="scss" scoped>
.echarts-class {width: 100%;height: 100%;
}
</style>

传入的data格式为

[{x:"A",y:"00:00",z:50},{x:"B",y:"00:00",z:40},{x:"C",y:"00:00",z:30},{x:"A",y:"01:00",z:50},{x:"B",y:"01:00",z:60},{x:"C",y:"01:00",z:70}
]

如需帮助可直接私信

QQ：929477145

在vue中使用Echarts的3D柱状图相关推荐

echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
Vue中使用Echarts构建3D地球层+模拟时钟
文章目录前言一.Echarts示例二.使用步骤 1.引入库 2.完整代码总结前言 Echarts官网上的例子大多是原生js,那么我们在vue项目中该如何使用?本文举两个例子. 一.Ech ...
【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
VUE 中渲染Echarts 动画柱状图
VUE 中渲染Echarts 动画柱状图效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echart ...
Vue中使用echarts实现柱状图（双柱）
实现效果: echarts使用说明请查看:Vue中使用echarts实现常用图表总结 option配置: option = {tooltip: {trigger: 'axis',axisPointer ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

在vue中使用Echarts的3D柱状图

该文章为记录，避免再次踩坑

安装所需依赖版本：

在main.js引入

组件代码

传入的data格式为

在vue中使用Echarts的3D柱状图相关推荐

最新文章

热门文章