<template>
<div class="hello">
<div>折線圖</div>
<div id="line"></div>
</div>
</template>
<script>
export default {
props: ['bar','info'],
data () {
return {
}
},
mounted() {
// 基於準備好的dom,初始化echarts實例
var myChart = this.$echarts.init(document.getElementById('line'));
myChart.setOption({
legend: {
// 必須與 series name對應
data: ['2015 降水量'],
bottom:0
// top:10
},
grid: {
// top: 10,
// bottom: 20
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '2015 降水量',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
// 線型數據
markLine: {
lineStyle: {
type: 'dashed',
color:"blue"
},
// 獲取最低點到最高點的數據
data: [
[
{type: 'min'}, {type: 'max'}
]
]
},
itemStyle:{
normal : {
// 在上方顯數字
label: {
// 是否開啓
show: true,
// 顯示位置
position: 'top',
// 字體樣式
textStyle: {
color: '#222'
}
}
},
},
}
]
});
}
}
</script>
<style scoped>
#line{
width:100% ;
height:25rem;
}
</style>
echarts 實線 虛線
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.