一、vue中使用三维折线图
效果图：
二、使用步骤
1.引入库
安装echarts
在package.json文件中添加
"dependencies": {
"echarts": "^5.1.2"
"echarts-gl": "^1.1.1",
// "echarts-gl": "^2.0.8"
},
npm install echarts-gl@1.1.1 --save
2.使用
完整代码如下（示例）：
HTML代码
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>js脚本代码
<script>
import echarts from 'echarts'
import "echarts-gl";
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
dataList: {
type: Array,
default: []
}
},
data() {
return {
chart: null,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
watch: {
dataList(val, oldVal) {//普通的watch监听
this.initChart()
}
},
methods: {
initChart() {
let data = [
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 1, 1, 5, 7, 9, 11, 12, 13, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17],
[5, 6, 9, 9, 9, 11, 11, 11, 13, 13, 14, 14, 14, 16, 16, 16, 16, 16, 18, 18, 18, 18],
[13, 17, 22, 22, 26, 33, 34, 36, 36, 37, 39, 40, 40, 42, 42, 42, 43, 43, 44, 44, 44, 44],
[13, 16, 17, 27, 35, 45, 49, 53, 58, 61, 65, 66, 68, 69, 71, 73, 73, 73, 74, 74, 74, 74]
]
let dataX = ['1/27', '1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10', '2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']
let dataY = ['生产', '收购', '运输', '销售', '消费']
var vdata = []
for (var i = 0; i < dataY.length; i++) {
vdata[i] = []
}
for (var t = 0; t < dataY.length; t++) {
var y = dataY[t];
for (var k = 0; k < data[0].length; k++) {
for (var p = 0; p < dataX.length; p++) {
var x = dataX[p];
var z = data[t][p];
vdata[t].push([x, y, z]);
}
break;
}
}
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption(
{
xAxis3D: {
type: 'category',
name: '',
data: dataX,
axisLabel: {
show: true,
interval: 0 //使x轴都显示
}
},
yAxis3D: {
type: 'category',
name: '',
data: dataY,
axisLabel: {
show: true,
interval: 0 //使y轴都显示
}
},
zAxis3D: {
type: 'value',
name: ''
},
//图例
legend: {
orient: 'vertical',
right: 50,
top: 200,
icon: 'roundRect',
textStyle: {
color: '#FFFFFF'
}
},
tooltip: {
show: true
},
grid3D: {
boxWidth: 300,
boxHeight: 120,
boxDepth: 200,
axisLine: {
show: true,
interval: 0,
lineStyle: {
color: '#FFFFFF'
}
},
viewControl: {
distance: 400
}
},
series: [
{
type: 'scatter3D',
name: '生产',
itemStyle: {
color: 'rgb(165, 0, 38)'
},
label: { //当type为scatter3D时有label出现
show: true,
position: 'top', //标签的位置，也就是data中数据相对于线在哪个位置
distance: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
borderWidth: 0,
borderColor: '#FFFFFF',
backgroundColor: 'transparent'
}
},
data: vdata[0]
},
{
type: 'scatter3D',
name: '收购',
itemStyle: {
color: 'rgb(215, 48, 39)'
},
label: {
show: true,
position: 'bottom',
distance: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
borderWidth: 0,
borderColor: '#FFFFFF',
backgroundColor: 'transparent'
}
},
data: vdata[1]
},
{
type: 'scatter3D',
name: '运输',
itemStyle: {
color: 'rgb(254,224,144)'
},
label: {
show: true,
position: 'bottom',
distance: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
borderWidth: 0,
borderColor: '#FFFFFF',
backgroundColor: 'transparent'
}
},
data: vdata[2]
},
{
type: 'scatter3D',
name: '销售',
itemStyle: {
color: 'rgb(255,255,191)'
},
label: {
show: true,
position: 'top',
distance: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
borderWidth: 0,
borderColor: '#FFFFFF',
backgroundColor: 'transparent'
}
},
data: vdata[3]
},
{
type: 'scatter3D',
name: '消费',
itemStyle: {
color: 'rgb(224,243,248)'
},
label: {
show: true,
position: 'bottom',
distance: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
borderWidth: 0,
borderColor: '#FFFFFF',
backgroundColor: 'transparent'
}
},
data: vdata[4]
},
{
type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
name: '生产',
lineStyle: {
width: 8, //线的宽度
color: 'rgb(165, 0, 38)' //线的颜色
},
data: vdata[0] //线数据和点数据所需要的格式一样
},
{
type: 'line3D',
name: '收购',
lineStyle: {
color: 'rgb(215, 48, 39)', //线的颜色
width: 8 //线的宽度
},
data: vdata[1]
},
{
type: 'line3D',
name: '运输',
lineStyle: {
color: 'rgb(254,224,144)',
width: 8
},
data: vdata[2]
},
{
type: 'line3D',
name: '销售',
lineStyle: {
color: 'rgb(255,255,191)',
width: 8
},
data: vdata[3]
},
{
type: 'line3D',
name: '消费',
lineStyle: {
color: 'rgb(224,243,248)',
width: 8
},
data: vdata[4]
},
]
}
)
}
}
}
</script>三、vue中使用三维柱状图
效果图
完整代码
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import "echarts-gl";
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
dataList: {
type: Array,
default: []
}
},
data() {
return {
chart: null,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
watch: {
dataList(val, oldVal) {//普通的watch监听
this.initChart()
}
},
methods: {
initChart() {
let data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
let dataX = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
let dataY = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption(
{
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
}
},
xAxis3D: {
type: 'category',
data: dataX
},
yAxis3D: {
type: 'category',
data: dataY
},
zAxis3D: {
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [
{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]]
};
}),
shading: 'lambert',
label: {
fontSize: 16,
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20,
color: '#900'
},
itemStyle: {
color: '#900'
}
}
}
]
}
)
}
}
}
</script>
