该文章为记录,避免再次踩坑
安装所需依赖版本:
"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-chart
v-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