vue echarts柱状图和饼图

你可以使用 Vue 和 Echarts 来创建柱状图和饼图。以下是一个简单的示例：

首先，确保你已经安装了 Echarts：

npm install echarts --save

然后，在你的 Vue 组件中，你可以引入 Echarts 并创建一个柱状图和饼图的实例。例如：

<template>
  <div>
    <div ref="barChart" style="width: 400px; height: 400px;"></div>
    <div ref="pieChart" style="width: 400px; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.initBarChart()
    this.initPieChart()
  },
  methods: {
    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart)
      const options = {
        // 配置柱状图的数据和样式
        // ...
      }
      barChart.setOption(options)
    },
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart)
      const options = {
        // 配置饼图的数据和样式
        // ...
      }
      pieChart.setOption(options)
    }
  }
}
</script>

通过在 `mounted` 钩子中调用 `initBarChart` 和 `initPieChart` 方法，你可以在组件加载后初始化柱状图和饼图的实例。然后，你可以根据 Echarts 的文档，配置相应图表的数据和样式。

注意，上述代码中的 `this.$refs.barChart` 和 `this.$refs.pieChart` 分别是柱状图和饼图的 DOM 引用，可以在模板中使用 `ref` 属性指定。

这只是一个简单的示例，你可以根据具体需求自定义柱状图和饼图的配置和样式。你可以参考 Echarts 的官方文档来了解更多关于如何使用和配置不同类型图表的信息。