echarts を vue プロジェクトに追加するには、echarts の依存関係を追加し、それを使用するために main.js に echarts を導入するだけです。
1、npm install echarts --save
2. main.jsを変更する
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts3. 特定のページの使用法:
<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>
結果の表示:
このグラフに基づいて、ガント チャートでもデータを追加して、継続的な反復効果を形成する必要があります。
{
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]
}何も設定していない場合は、次のようになります。
どちらのデータ セットも元の位置から始まります。必要な結果は重ね合わせです。ここではパラメーター スタックを追加するだけです: ''、同じ名前を指定すると、効果は次のようになります:
最初の段落を表示せずに 2 番目の段落のみを表示する場合は、最初のデータ セットに対応するスタイルを設定できます。
itemStyle{
borderColor:'transparent',
color:'transparent'
}結果の表示:
必要な最終的な効果は次のとおりです。
上記の例から、このように実装できます。2 つのデータ セットを 1 つのグループとして扱い、各グループの最初のデータ セットが表示または非表示になります。プロジェクトの進捗グラフの場合は、開始時刻と非表示を使用できます。終了時刻をグループとして表示します。終了時刻と開始時刻の間の期間が継続時間です。この時間はここでの増分です。つまり、2 番目のデータ セットは最初のデータ セットに基づいて表示されます。これ以降は使用できません終了時刻を直接指定しますが、間隔を使用します。
データセット:
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'}}},'-','-','-']
}
]最終的な効果:
ここではデータ項目ごとに表示色を設定することができますが、具体的な操作としてはdata:[]配列を次のように変更します。
data:[
{
value:100,
itemStyle:
{
normal:
{color:'purple'}
}
},
'-',
'-',
'-']元のデータ項目はオブジェクトになり、オブジェクトの値は元の数値に対応し、スタイルは itemStyle 属性を使用して設定されます。
ガント チャートを作成する際の注意事項:
1. 属性スタックを使用したデータ表示オーバーレイ。
2. 開始時刻を非表示にし、透明に設定します。終了時刻は終了時刻ポイントに直接設定できません。これは増分であり、時間間隔を設定する必要があります。
3. 各データ項目を色などの個別のスタイルで表示したり、データ配列を変更したり、元の単一の数値を value、itemStyle、その他の属性を含むオブジェクトに変更したりできます。