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