1说墨、創(chuàng)建ID
<div?id="chartLine"></div>
2源请、在組建里面引入
import?echarts?from?"echarts";
3富稻、在data里定義chartLine為null
?????????chartLine:null,
????????public_data:[],??//定義X軸
????????data1:[],??//y軸上周數(shù)據(jù)
????????data2:[],??//y軸本周數(shù)據(jù)
4顷牌、在methods：{}獲取ID并獲取接口數(shù)據(jù)及調(diào)用
methods:{
? ??drawLineChart()?{
??????this.chartLine=?echarts.init(document.getElementById("chartLine"));
??????this.chartLine.setOption({
????????backgroundColor:?"#0f3c42",//背景色
????????title:?{
????????????textStyle:?{?color:?"#65eacc"?},
????????????text:?"進(jìn)水瞬時(shí)流量"
????????},
????????tooltip:?{
????????????trigger:?"axis"
????????},
????????legend:?{
????????????x:?"right",?//?'center'?|?'left'?|?{number},
????????????y:?"top",?//?'center'?|?'bottom'?|?{number}
????????????padding:?10,?//?[5,?10,?15,?20]
????????????itemGap:?20,
????????????textStyle:?{?color:?"#fff"?},
????????????data:?["本周",?"上周"]
????????},
????????xAxis:?{
????????????type:?"category",
????????????//?boundaryGap:?false,
????????????axisLine:?{
????????????????lineStyle:?{
????????????????????type:?"solid",
????????????????????color:?"#7ec8d3",?//左邊線的顏色
????????????????????width:?"2"?//坐標(biāo)線的寬度
????????????????}
????????????},
????????????axisLabel:?{
????????????????textStyle:?{
????????????????????color:?"#7ec8d3"?//坐標(biāo)值得具體的顏色
????????????????}
????????????},
????????????data:this.public_data
????????},
????????yAxis:?{
????????????type:?"value",
????????????axisLine:?{
????????????????lineStyle:?{
????????????????????type:?"solid",
????????????????????color:?"#7ec8d3",?//左邊線的顏色
????????????????????width:?"2"?//坐標(biāo)線的寬度
????????????????}
????????????},
????????????axisLabel:?{
????????????????textStyle:?{
????????????????????color:?"#7ec8d3"?//坐標(biāo)值得具體的顏色
????????????????}
????????????}
????????},
????????series:?[
????????????{
????????????????name:?"本周",
????????????????type:?"line",
????????????????smooth:?true,
????????????????//修改折線的顏色
????????????????itemStyle:?{
????????????????????color:'#d5e24a'
????????????????},
????????????????data:?this.data1
????????????},
????????????{
????????????????name:?"上周",
????????????????type:?"line",
????????????????smooth:?true,
????????????????itemStyle:?{
????????????????????color:'#0055ba'
????????????????},
????????????????data:this.data2
????????????}
????????]
??????});
????},
? ? //獲取數(shù)據(jù)
? ? Echarts_list(){
????????????this.$axios.get('接口').then(res?=>?{
????????????????console.log(res)
????????????????//將獲取到的X軸數(shù)據(jù)復(fù)制給this.public_data
????????????????//將獲取到的y軸上周數(shù)據(jù)復(fù)制給this.data1
????????????????//將獲取到的y軸本周數(shù)據(jù)復(fù)制給this.data2
????????})
????}
}
//在mounted(){}調(diào)用
mounted()?{
??????this.drawLineChart()
??????this.Echarts_list()
??}
//?watch監(jiān)聽(tīng)實(shí)時(shí)數(shù)據(jù)
watch:?{
??????public_data(val){
????????this.drawLineChart()
??????}
??},
注明：如果那里有不對(duì)的地方還請(qǐng)大牛多多指教
