Vue+ElementUI中使用Echarts绘制圆环图 折线图 饼图 柱状图

在Vue项目中使用ElementUI和Echarts绘制圆环图、折线图、饼图和柱状图，可以通过在Vue组件中引入Echarts库，并在模板中定义图表容器。以下是一个简单的例子：

1. 安装Echarts：

npm install echarts --save

2. 在Vue组件中使用Echarts绘制图表：

<template>
  <div>
    <!-- 圆环图 -->
    <div id="ring-chart" :style="{width: '400px', height: '400px'}"></div>
    <!-- 折线图 -->
    <div id="line-chart" :style="{width: '400px', height: '400px'}"></div>
    <!-- 饼图 -->
    <div id="pie-chart" :style="{width: '400px', height: '400px'}"></div>
    <!-- 柱状图 -->
    <div id="bar-chart" :style="{width: '400px', height: '400px'}"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  name: 'ChartComponent',
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const ringOption = {
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'], // 设置圆环的内半径和外半径
            // ... 其他配置项
          },
        ],
        // ... 其他全局配置项
      };
 
      const lineOption = {
        series: [
          {
            type: 'line',
            // ... 折线图其他配置项
          },
        ],
        // ... 其他全局配置项
      };
 
      const pieOption = {
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'], // 饼图半径
            // ... 饼图其他配置项
          },
        ],
        // ... 其他全局配置项
      };
 
      const barOption = {
        series: [
          {
            type: 'bar',
            // ... 柱状图其他配置项
          },
        ],
        // ... 其他全局配置项
      };
 
      // 初始化图表并绘制
      echarts.init(document.getElementById('ring-chart')).setOption(ringOption);
      echarts.init(document.getElementById('line-chart')).setOption(lineOption);
      echarts.init(document.getElementById('pie-chart')).setOption(pieOption);
      echarts.init(document.getElementById('bar-chart')).setOption(barOption);
    },
  },
};
</script>
 
<style scoped>
/* 样式按需定制 */
div[id^="chart"] {
  margin: 10px;
}
</style>

在这个例子中，我们在Vue组件的mounted钩子中调用了initCharts方法来初始化图表，并为每个图表指定了不同的配置项。每个图表都通过ElementUI定义的样式包裹在具有唯一id的div中，并且在<script>标签中引入了Echarts库。这样就可以在Vue组件中展示不同类型的图表。