vue中使用ECharts实现折线图和饼图

在开发后台管理项目时，需要统计后台用户数据，以折线图和饼图的形式显示，这边采用apache-echarts来实现需求。

 

1.安装echarts和引入

npm install echarts --save

import * as echarts from 'echarts';

2.使用echarts实现pie图

<template>
    <div id="chartPie" class="pie-wrap"></div>
</template>

<script>
    import * as echarts from 'echarts';
    require('echarts/theme/macarons');//引入主题

    export default {
    data() {
      return {
        chartPie: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },
    methods: {
      drawPieChart() {
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
        this.chartPie.setOption({
          title: {
            text: 'Pie Chart',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              n