echarts 實線 虛線

在這裏插入圖片描述

<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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章