To add echarts to the vue project, you only need to add echarts dependency, and then introduce echarts in main.js to use it.
1、npm install echarts --save
2. Modify main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts3. Specific page usage:
<template>
<div class="about">
<h1>This is echarts page</h1>
<div id="myechart" style="height:500px;width:1000px;" ></div>
</div>
</template>
<script>
export default{
name:'MyEchart',
mounted(){
this.drawEchart()
},
methods:{
drawEchart(){
let myechart = this.$echarts.init(document.getElementById("myechart"))
myechart.setOption({
title:{text:"gant"},
xAxis:{
type:'value'
},
yAxis:{
type:'category',
data:["pro1","pro2","pro3","pro4","pro5","pro6"]
},
series:[
{
type:'bar',
data:[10,20,30,46,78,22]
}
]
})
}
}
}
</script>
Display of results:
On the basis of this graph, the Gantt chart also needs to add data to form a continuously iterative effect.
{
type:'bar',
name:'base',
//stack:'Total',
data:[10,20,30,46,78,22]
},
{
type:'bar',
name:'data2',
//stack:'Total',
data:[20,20,30,20,10,20]
}If no settings are made, the effect will be as follows:
Both sets of data start from the original position. The result we want is superposition. Here we only need to add a parameter stack:'' and specify the same name. The effect is as follows:
If we don’t want to display the first paragraph and only display the second paragraph, we can set the style corresponding to the first data set:
itemStyle{
borderColor:'transparent',
color:'transparent'
}Display of results:
The final effect we need is as follows:
From the above example, we can achieve this by treating the two sets of data as one group, and the first data set of each group is displayed and hidden. If it is a project progress chart, we can treat the start time and end time as a group. The period between the end time and the start time is the duration. This time is an increment here, that is, the second data set is displayed on the basis of the first data set. It can no longer use the end time directly, but Use interval time.
data set:
series:[
{
type:'bar',
name:'base',
stack:'Total',
data:[86,41,119,46],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data2',
stack:'Total',
data:[100,100,100,100]
},
{
type:'bar',
name:'data3',
stack:'Total',
data:[75,67,64,52],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data4',
stack:'Total',
data:[100,100,100,100]
},
{
type:'bar',
name:'data5',
stack:'Total',
data:[44,90,154,84],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data6',
stack:'Total',
data:[100,100,100,100]
},
{
type:'bar',
name:'data7',
stack:'Total',
data:[46,183,'-',188],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data8',
stack:'Total',
data:[100,100,'-',100]
},
{
type:'bar',
name:'data9',
stack:'Total',
data:[40,'-','-','-'],
itemStyle:{
borderColor:'transparent',
color:'transparent'
}
},
{
type:'bar',
name:'data8',
stack:'Total',
data:[{value:100,itemStyle:{normal:{color:'purple'}}},'-','-','-']
}
]The final effect:
In this, the display color can be set for each data item. The specific operation is to change the data:[] array to:
data:[
{
value:100,
itemStyle:
{
normal:
{color:'purple'}
}
},
'-',
'-',
'-']The original data item becomes an object, the value of the object corresponds to the original numeric value, and the style is set using the itemStyle attribute.
Things to note when drawing a Gantt chart:
1. Data display overlay, using attribute stack.
2. Hide the start time and set it to be transparent. The end time cannot be set directly for the end time point. This is an increment and a time interval needs to be set.
3. For each data item display, the style can be set individually, such as color. The data array can be modified. The original single numeric value can be modified into an object, including attributes such as value and itemStyle.