<div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: 100px"></div>
js函數中：
this.EchartsData = this.$echarts.init(document.getElementById('echarts'));
let option1 = {
title: {
text: '我是折線圖', //標題
subtext: '我來自福建',//副標題
x:'left', //可設置標題的位置，有left,center,right三個
textStyle: {
color: 'red', //設置標題的顏色 fontSize:'18' //設置標題的字體大小
}
},
tooltip : {
trigger: 'axis', //默認是item,是當鼠標移動到圖表上時顯示當前節點的信息，如果為axis是顯示已這個橫坐標范圍內的所有節點的信息
formatter: "{a} <br/>{b}: {c} ({d}%)"
axisPointer: {
type: 'cross',// 設置鼠標移動到當前節點的會有虛線標識這個節點的橫坐標和縱坐 標，還有一個是shadow，顯示的當前橫坐標范圍內的所有節點信息
label: {
backgroundColor: 'red'//設置當前節點的橫坐標與縱坐標的背景顏色，突出當前節 點的坐
}
}
},
grid: { //設置圖標距離四周的距離
x:50,
y:80,
x2:60,
y2: 70,
containLabel: true
},
legend: {
data:['折線一','折線二','折線三','折線四','折線五'],
//這個里面的每一個都自懂綁定series中對應的name的信息，這個是可以用來進行切換是否顯示這個信息
x: 'center', //用來設定這些圖例的位置，有left,center,right
textStyle: { //
color: 'red', //設置legend的顏色
fontSize:'18' //設置legend的字體大小
}，
itemHeight:10 //高度
itemWidth:10 //寬度
x:50,
y:50,
right:'50',
},
dataZoom: [ //可實現底下多個滾動條，然后可左右滑動
{
show: true, //是否顯示滾動條
realtime: true,
start:0, //滾動條的起點位置
end: 80, //滾動條的終止位置
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,
0.3-8.8,4.4- 8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,
8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,
24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', // 修改默認的滑塊樣式
handleSize: '50%', //修改掛快的半徑
handleStyle: {
color: '#fff', //修改滑塊的顏色
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2, // x軸向右偏移的陰影
shadowOffsetY: 2 // y軸向下偏移的陰影
},
bottom:'0%',
height: '40'
}
],
toolbox: {
left:'right', //設置先出圖標操作的圖標位置
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis : [
{
type : 'category',
boundaryGap : false,//圖標的左邊是否留白，false不留白，true留白
data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLine: {
symbol: ['none', 'arrow'], //設置x軸或y軸箭頭
lineStyle: {
color: '#B5B5B5',
width: 2, //這里是為了突出顯示加上的 }
}, //刻度是向內還是向外
axisTick:{ inside:true, length:1, },
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//網格顏色
}
},
axisLabel:{ //調整x軸的lable //
interval:0, //按x軸的長度顯示的刻度的個數 例如：本來顯示20個刻度，因為x軸端只顯示了10個，
rotate:0, //實現x軸的刻度的標識實現旋轉，
textStyle:{
fontSize:10,// 讓字體變大
color:"#B5B5B5"
}
},
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //設置x軸的標題的位置
},
boundaryGap : false,
}
}
],
yAxis : [
{
type : 'value',
name : '高度(ml)',//設置左上角的單位指標
axisLabel: {
formatter: '{value}ml' //設置y軸坐標的單位
},
},
axisLine: {
symbol: ['none', 'arrow'], //設置x軸或y軸箭頭
lineStyle: {
color: '#B5B5B5',
width: 2, //這里是為了突出顯示加上的
}
}, //刻度是向內還是向外
axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle:{
type: 'solid',
color:'#FCFCFC',//網格顏色
}
},
axisLabel:{ //調整x軸的lable
interval:0, //按x軸的長度顯示的刻度的個數 例如：本來顯示20個刻度，因為x軸端只顯示了10個，
rotate:0, //實現x軸的刻度的標識實現旋轉，
textStyle:{
fontSize:10,// 讓字體變大
color:"#B5B5B5"
}
},
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //設置x軸的標題的位置
},
boundaryGap : false,
}
], //label的屬性可2放在外面也可以放在里面的series對應的內一個選項里面進行設置
label:{ //修改每個柱子所對應的數據
normal:{
show: true, //設置數據是否顯示
position:'inside',//設置顯示在位置，有inside,outside,top,bottom,
textStyle: {
fontSize: 15//設置字體大小 //
color:'red'//設置柱子上面數據的顏色
}
}
},
series : [
{
name:'折線一',
type:'line',
stack: '總量',
areaStyle: {
normal: {
color:'red'//設置填充顏色
}
},
label: {
normal: {
show: true,
position:'top',//設置顯示在內還是在外
textStyle: {
fontSize: 15,//設置字體大小
color:'red'//設置柱子上面數據的顏色
}
}
},
itemStyle : { //設置折線的顏色
normal : {
color:'#000000', //圖例顏色
lineStyle:{
color:'#000000', //線條顏色
width:1 //線條粗細
}
}
},
data:[120, 132, 101, 134, 90, 230, 210] },
在柱狀圖中的警戒線markLine中屬性：
markLine : {
symbol:"none", //去掉警戒線最后面的箭頭
label:{
position:"start" //將警示值放在哪個位置，三個值“start”,"middle","end" 開始 中點 結束
fontSize:18,
formatter:'69.5%'
},
barGap:'46%' //增加柱間距
data : [{
silent:false, //鼠標懸停事件 true沒有，false有
lineStyle:{ //警戒線的樣式 ，虛實 顏色
type:"solid",
color:"#FA3934",
},
yAxis: 0.75 // 警戒線的標注值，可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分為最大，最小，平均值
}]
}