1、循環(huán)遍歷數(shù)據(jù)ID
2刽严、在組件引入?import?echarts?from?'echarts'
3寸潦、在data里定義roseChart:?"roseChart",
4、在methods：{}獲取ID并獲取接口數(shù)據(jù)及調(diào)用
//曲線分析圖
????drawRose?()?{
??????var?roseCharts?=?document.getElementsByClassName("roseChart");?//?對應(yīng)地使用ByClassName
??????for?(var?i?=?0;?i?<?roseCharts.length;?i++)?{?//?通過for循環(huán)琉历，在相同class的dom內(nèi)繪制元素
????????var?myChart?=?echarts.init(roseCharts[i]);
????????myChart.setOption({
??????????title:?{
????????????text:?this.list[i].name
??????????},
??????????legend:?{
????????????data:?this.list[i].legend
??????????},
??????????tooltip:?{
????????????show:?true,
????????????transitionDuration:?0,//防止tooltip的抖動
????????????trigger:?'axis',
????????????axisPointer:?{
??????????????type:?"cross",
??????????????axis:?"x"
????????????},
????????????padding:?[10,?10],
????????????extraCssText:?'box-shadow:?1px?0?2px?0?rgba(163,163,163,0.5)'
??????????},
??????????xAxis:?[{
????????????data:?this.list[i].times,
????????????axisLabel:?{
??????????????interval:?0,
??????????????rotate:?40
????????????},
??????????}],
??????????yAxis:?{},
??????????series:?[{
????????????name:?this.list[i].legend[0],
????????????type:?'line',
????????????data:?this.list[i].tdatas,
????????????smooth:?true,
????????????showAllSymbol:?true,
????????????itemStyle:?{
??????????????normal:?{
????????????????color:?'yellow',
????????????????lineStyle:?{
??????????????????color:?"yellow",
??????????????????width:?1
????????????????},
????????????????areaStyle:?{
??????????????????color:?{
????????????????????type:?'linear',
????????????????????x:?0,
????????????????????y:?1,
????????????????????x2:?0,
????????????????????y2:?0,
????????????????????colorStops:?[{
??????????????????????offset:?0,
??????????????????????color:?'#fff'?//?0%?處的顏色
????????????????????},?{
??????????????????????offset:?1,
??????????????????????color:?'yellow'?//?100%?處的顏色
????????????????????}]
??????????????????}
????????????????}
??????????????}
????????????}
??????????},
??????????{
????????????name:?this.list[i].legend[1],
????????????type:?'line',
????????????data:?this.list[i].ydatas,
????????????showAllSymbol:?true,
????????????smooth:?true,
????????????itemStyle:?{
??????????????normal:?{
????????????????color:?'#3A84FF',
????????????????lineStyle:?{
??????????????????color:?"#3A84FF",
??????????????????width:?1
????????????????},
????????????????areaStyle:?{
??????????????????color:?{
????????????????????type:?'linear',
????????????????????x:?0,
????????????????????y:?1,
????????????????????x2:?0,
????????????????????y2:?0,
????????????????????colorStops:?[{
??????????????????????offset:?0,
??????????????????????color:?'rgba(0,?0,?0,?0)'?//?0%?處的顏色
????????????????????},?{
??????????????????????offset:?1,
??????????????????????color:?'#1fb5fc'?//?100%?處的顏色
????????????????????}]
??????????????????}
????????????????}
??????????????}
????????????}
??????????},]
????????})
??????}
????}
5坠七、獲取接口并將之賦值到data里面定義的數(shù)組
6水醋、watch監(jiān)聽
watch:?{
????list?(val)?{
??????this.drawRose()
????},
??}
7、后臺數(shù)據(jù)格式
