Vue implements three-dimensional column chart based on echarts
|
The three-dimensional column chart consists of three parts: the front, the right, and the top. When drawing, you need to draw the front as a graphic, the right and the top as a graphic, then register it in echats, and render it in renderItem in the series of option The code is as follows: (1) Registering and drawing graphics
registry () {
let MyCubeRect = this.$echarts.graphic.extendShape({
shape:
x: 0,
y: 0,
width: 20,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p0 = [shape.x, shape.y]
const p1 = [shape.x - shape.width / 2, shape.y]
const p4 = [shape.x + shape.width / 2, shape.y]
const p2 = [shape.x - shape.width / 2, xAxisPoint[1]]
const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p2[0], p2[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p4[0], p4[1])
ctx.lineTo(p0[0], p0[1])
ctx.closePath()
}
})
let MyCubeShadow = this.$echarts.graphic.extendShape({
shape:
x: 0,
y: 0,
width: 20,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p1 = [shape.x - shape.width / 2, shape.y]
const p4 = [shape.x + shape.width / 2, shape.y]
const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
const p5 = [shape.x + shape.width / 2 + shape.zWidth, xAxisPoint[1] - shape.zHeight]
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p5[0], p5[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p4[0], p4[1])
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p7[0], p7[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p4[0], p4[1])
ctx.closePath()
}
})
this.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
this.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
}(2) Rendering graphics
barChartOption: {
tooltip: {
trigger: 'axis',
axisPointer:
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
containLabel: true,
top: '30px',
bottom: '0px',
left: '0px'
},
xAxis:
type: 'category',
axisLabel: {
interval: 0,
fontSize: fontSize(12)
},
axisLine: {
show: false,
lineStyle:
color: '#98b9c5'
}
},
data: [] // data passed in through the backend js},
yAxis: {
type: 'value',
axisLabel: {
fontSize: fontSize(12)
},
axisLine: {
show: false,
lineStyle:
color: '#98b9c5'
}
},
splitLine: {
lineStyle:
color: '#3a586a',
type: 'dashed'
}
}
},
series: [{
name: 'Energy consumption per unit area',
type: 'custom',
renderItem: (params, api) => {
let location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'MyCubeRect',
shape:
api,
xValue: api.value(0) - 0.5,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'MyCubeShadow',
shape:
api,
xValue: api.value(0) - 0.5,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: api.style(),
text: ''
}
}]
}
},
stack: 'Energy consumption per unit area',
label: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
fontSize: fontSize(12),
color: '#fff',
align: 'center'
}
},
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#b1950d' },
{ offset: 0.5, color: '#aea20d' },
{ offset: 1, color: '#a5aa12' }
]
)
},
data: [] //Data passed in from the backend}]
}Note: 1) When registering graphics, style: only style can be used: api.style();
generateBarChart() {
let vm = this
if (this.$refs['uintEnergyConsume']) { //this.$refs is the ref value of the generated graphics area this.$echarts.graphic.registerShape('MyCubeRect', this.MyCubeRect)
this.$echarts.graphic.registerShape('MyCubeShadow', this.MyCubeShadow)
this.barChart = this.$echarts.init(this.$refs['uintEnergyConsume'])
this.barChart.setOption(this.barChartOption, false, true)
$(window).resize(function () { //Screen adaptation vm.handleResize()
})
}
}(4) Code in template <div ref="uintEnergyConsume" id="uintEnergyConsume" class="chart-container" style="width: 100%;" element-loading-text="Loading..."></div> </div> (5) The effects are as follows:
Reference graphic URL: Vue uses Echarts to implement a three-dimensional bar chart The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Maven project remote deployment && How to configure database connection using tomcat
>>: MySQL 8.0.20 installation and configuration tutorial under Docker
Recommend
jQuery implements form validation function
jQuery form validation example / including userna...
How to reasonably use the redundant fields of the database
privot is the intermediate table of many-to-many ...
Detailed explanation of MySQL master-slave inconsistency and solutions
1. MySQL master-slave asynchrony 1.1 Network Dela...
Correct use of Vue function anti-shake and throttling
Preface 1. Debounce: After a high-frequency event...
Analysis of the reasons why the index does not take effect when searching in the MySql range
1 Problem Description This article sorts the esta...
Sample code for implementing menu permission control in Vue
When people are working on a backend management s...
HTML form tag tutorial (2):
This tutorial introduces the application of vario...
Docker meets Intellij IDEA, Java development improves productivity tenfold
Table of contents 1. Preparation before developme...
Docker images export and import operations
What if the basic images have been configured bef...
VMwarea virtual machine installation win7 operating system tutorial diagram
The installation process of VMwarea will not be d...
Using streaming queries in MySQL to avoid data OOM
Table of contents 1. Introduction 2. JDBC impleme...
HTML is actually the application of learning several important tags
After the article "This Will Be a Revolution&...
Detailed explanation of generic cases in TypeScript
Definition of Generics // Requirement 1: Generics...
How to implement responsive layout in vue-cli
When we are doing front-end development, we will ...
The difference between VOLUME and docker -v in Dockerfile
There are obvious differences between volume moun...