溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue怎么使用echarts實現折線圖”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue怎么使用echarts實現折線圖”吧！
效果圖：
代碼：
<template>
<div class="proCharts" ref='charts'>
</div>
</template>
<script>
import echarts from 'echarts' //npm install echarts@4.9.0
export default {
data () {
return {
option:{
color:['rgb(8,252,7)','rgb(255,168,0)',],
title: {
text: ''
},
tooltip: { //提示框
trigger: 'axis',
},
legend: {//圖例的類型
icon:'roundRect',//圖例icon圖標
data: [
{
name:"上年",
textStyle: {
color: '#fff'
}
},{
name:"本年",
textStyle: {
color: '#fff'
}
},
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top:'17%',
containLabel: true //grid區域是否包含坐標軸的刻度標簽
},
xAxis: {
type: 'category', //坐標軸類型。
boundaryGap: false, //坐標軸兩邊留白策略
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
axisLabel: {//坐標軸刻度標簽的相關設置
interval:0,
textStyle: {
color: '#fff',
fontSize :10
},
},
axisLine:{//坐標軸軸線相關設置
show :true,
lineStyle:{
color:'rgb(2,121,253)'
}
},
axisTick:{ //坐標軸刻度相關設置。
show :false,
}
},
yAxis: {
type: 'value',
axisLabel: { //x軸的坐標文字
show: true,
textStyle: {
color: '#fff' //文字的顏色
},
},
max:100,//最大值100
axisLine:{//坐標軸軸線相關設置
show :true,
lineStyle:{
color:'rgb(2,121,253)'
}
},
axisTick:{ //坐標軸刻度相關設置。
show :false,
},
splitLine:{ //坐標在grid區域的分割線
lineStyle: { //設置分割線的樣式(圖表橫線顏色)
color: ['#153a8a']
}
}
},
series: [
{
name: '上年',
type: 'line',
data: [10,20,30,50,50,10,50,60,10,50,10,30],
lineStyle:{
color:'rgb(8,252,7)' //線的顏色
}
},
{
name: '本年',
type: 'line',
data: [20,20,30,50,50,10,50,20,30,50,50,30],
lineStyle:{
color:'rgb(255,168,0)' //線的顏色
}
}
]
}
}
},
created () {
},
mounted () {
this.mycharts()
},
methods: {
mycharts(){
let myChart =echarts.init(this.$refs.charts,"macarons");
myChart.setOption(this.option)
//圖表自適應
window.addEventListener("resize",function(){
myChart.resize() // myChart 是實例對象
})
}
}
}
</script>
<style scoped>
.proCharts{
width: 100%;
height: 400px;
background: rgb(14, 51, 129);
}
</style>感謝各位的閱讀，以上就是“vue怎么使用echarts實現折線圖”的內容了，經過本文的學習后，相信大家對vue怎么使用echarts實現折線圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
