vue+echarts实现折线图、柱状图、饼图大屏纯前端

代码：

<template>
  <div class="outer">
    <div class="pic1" ref="myChart1"></div>
    <div class="pic2" ref="myChart2"></div>
    <div class="pic3" ref="myChart3"></div>
  </div>

</template>

<script>

import * as echarts from 'echarts';
 export default {
    name: "datapic",
    mounted() {
      this.drawLine();
      this.drawZhu();
      this.drawBing();
    },
    methods:{
      drawBing(){
         let myChart = echarts.init(this.$refs.myChart3);
        var option;

        option = {
          title: {
            text: '近12个月销售额占比（%）'
          },
          tooltip: {
            trigger: 'item'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          series: [
            {
              name: '销售额占比（%）',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 32, name: '食品' },
                { value: 13, name: '日用百货' },
                { value: 24, name: '果蔬' },
                { value: 12, name: '生鲜' },
                { value: 19, name: '蛋奶' }
              ]
            }
          ]
        };

        option && myChart.setOption(option);

      },
      drawLine(){
         let myChart = echarts.init(this.$refs.myChart1);
        var option;

        option = {
          title: {
            text: '近12个月销售额（元）'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['食品', '日用百货', '果蔬', '生鲜', '蛋奶']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
              '2021-11',
              '2021-12',
              '2022-1',
              '2022-2',
              '2022-3',
              '2022-4',
              '2022-5',
              '2022-6',
              '2022-7',
              '2022-8',
              '2022-9',
              '2022-10'
            ]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '食品',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
            },
            {
              name: '日用百货',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
            },
            {
              name: '果蔬',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
            },
            {
              name: '生鲜',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
            },
            {
              name: '蛋奶',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320]
            }
          ]
        };

        option && myChart.setOption(option);
      },
      drawZhu(){
         let myChart = echarts.init(this.$refs.myChart2);
        var option;

        option = {
          title: {
            text: '近12个月销售量（个）'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [
                '2021-11',
                '2021-12',
                '2022-1',
                '2022-2',
                '2022-3',
                '2022-4',
                '2022-5',
                '2022-6',
                '2022-7',
                '2022-8',
                '2022-9',
                '2022-10'
              ]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '食品',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
            },
            {
              name: '日用百货',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
            },
            {
              name: '果蔬',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
            },
            {
              name: '生鲜',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
            },
            {
              name: '蛋奶',
              type: 'bar',
              stack: 'Ad',
              data: [
                862, 1018, 964, 1026, 1679, 1600, 1570, 964, 1026, 1679, 1600, 1570
              ],
              emphasis: {
                focus: 'series'
              }
            }
          ]
        };

        option && myChart.setOption(option);

      }
    }
    }

</script>

<style>
  .outer{
    width: 90%;
    margin: 40px auto;
    height: 850px;
    position: relative;
  }
  .pic1{
    position: absolute;
    left: 0;
    top: 0;
    width:49%;
    height: 300px;
    margin:auto;
  }
  .pic2{
    position: absolute;
    right: 0;
    top: 0;
    width:49%;
    height: 300px;
    margin:auto;
  }
  .pic3{
    position: absolute;
    left: 0;
    bottom: 0;
    width:99%;
    height: 500px;
    margin:auto;
  }
</style>
效果：