折线图堆叠

骑猪看日落 2022-03-09 16:42 332阅读 0赞

<template>
      
      <div id="main" :style="{width: '600px',height:'400px'}"></div>
    </template>
    
    <script>
      let echarts = require("echarts/lib/echarts");
      // 引入柱状图
      require("echarts/lib/chart/bar");
      require("echarts/lib/component/tooltip");
      require("echarts/lib/component/title");
      export default {
        name: 'HelloWorld',
        data () {
          return {}
        },
        mounted(){
          this.initCharts();
        },
        methods: {
          initCharts(){
            this.chart = echarts.init(this.$el);
            this.setOptions();
          },
          setOptions(){
            this.chart.setOption({
              title: {
                text: '折线图堆叠'
              },
              tooltip: {
                trigger: 'axis'
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['4-5', '4-6', '4-7', '4-8', '4-9']
              },
              yAxis: {
                type: 'value',
                min:60,
                max:180
              },
              series: [
                {
                  name: '学',
                  type: 'line',
                  data: [160, 132, 101, 120, 140]
                },
                {
                  name: '习',
                  type: 'line',
                  data: [100, 102, 141, 154, 100]
                },
                {
                  name: '能',
                  type: 'line',
                  data: [150, 122, 101, 134, 90]
                }
              ]
            })
          }
        }
      }
    
    </script>
    
    
    <style scoped>
    
    </style>

官网小bug：[https://blog.csdn.net/LTAO427/article/details/83050319][https_blog.csdn.net_LTAO427_article_details_83050319]

[https_blog.csdn.net_LTAO427_article_details_83050319]: https://blog.csdn.net/LTAO427/article/details/83050319