用 vue echarts写一个首页包括月销售额条形图，产品销售比例饼图以及订单数

好的，我可以为您提供一个简单的示例代码，但需要注意的是，这个代码只是一个初步的示例，具体的实现需要根据您的具体需求进行调整。

首先，您需要安装 `echarts` 和 `vue-echarts`：

npm install echarts vue-echarts --save

然后在您的代码中引入它们：

import Vue from 'vue'
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

接着，您可以在您的组件中定义数据和图表配置：

export default {
  data() {
    return {
      salesData: [
        { month: '1月', sales: 100 },
        { month: '2月', sales: 200 },
        { month: '3月', sales: 300 },
        { month: '4月', sales: 400 },
        { month: '5月', sales: 500 },
        { month: '6月', sales: 600 },
        { month: '7月', sales: 700 },
        { month: '8月', sales: 800 },
        { month: '9月', sales: 900 },
        { month: '10月', sales: 1000 },
        { month: '11月', sales: 1100 },
        { month: '12月', sales: 1200 }
      ],
      productData: [
        { name: '产品A', value: 100 },
        { name: '产品B', value: 200 },
        { name: '产品C', value: 300 },
        { name: '产品D', value: 400 },
        { name: '产品E', value: 500 }
      ],
      orderData: [
        { month: '1月', orders: 10 },
        { month: '2月', orders: 20 },
        { month: '3月', orders: 30 },
        { month: '4月', orders: 40 },
        { month: '5月', orders: 50 },
        { month: '6月', orders: 60 },
        { month: '7月', orders: 70 },
        { month: '8月', orders: 80 },
        { month: '9月', orders: 90 },
        { month: '10月', orders: 100 },
        { month: '11月', orders: 110 },
        { month: '12月', orders: 120 }
      ]
    }
  },
  components: {
    chart: ECharts
  },
  computed: {
    salesOptions() {
      return {
        title: {
          text: '月销售额'
        },
        tooltip: {},
        xAxis: {
          data: this.salesData.map(item => item.month)
        },
        yAxis: {},
        series: [{
          name: '销售额',
          type: 'bar',
          data: this.salesData.map(item => item.sales)
        }]
      }
    },
    productOptions() {
      return {
        title: {
          text: '产品销售比例'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '销售比例',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.productData
          }
        ]
      }
    },
    orderOptions() {
      return {
        title: {
          text: '订单数'
        },
        tooltip: {},
        xAxis: {
          data: this.orderData.map(item => item.month)
        },
        yAxis: {},
        series: [{
          name: '订单数',
          type: 'bar',
          data: this.orderData.map(item => item.orders)
        }]
      }
    }
  }
}

最后，您可以在模板中使用这些图表：

<template>
  <div>
    <chart :options="salesOptions"></chart>
    <chart :options="productOptions"></chart>
    <chart :options="orderOptions"></chart>
  </div>
</template>

这就是一个简单的示例，您可以根据您的具体需求进行调整。