vue中使用echarts（饼图显示引导线和文字以及图例+柱形图显示格式化的图例）超详细

<template>
  <div>
    <div ref="pieChart" style="width: 400px; height: 400px;"></div>
    <div ref="barChart" style="width: 400px; height: 400px;"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChartPie = echarts.init(this.$refs.pieChart);
      let myChartBar = echarts.init(this.$refs.barChart);
 
      let optionPie = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c} ({d}%)'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            }
          }
        ]
      };
 
      let optionBar = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2011年', '2012年', '2013年', '2014年', '2015年'],
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['直接访问', '邮件营销', '搜索引擎', '联盟广告', '视频广告'],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            stack: '总访问量',
            label: {
              show: true,
              formatter: '{c}'
            },
            data: [320, 302, 30