Vue项目中使用ECharts

原创已于 2025-12-02 10:54:54 修改 · 465 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端扫盲

于 2024-10-14 15:39:16 首次发布

请添加图片描述

王旭晨：个人主页

🔥 个人专栏: 《开发工具指南》《前端小站》《MySQL数据库》

🔖世事无常，平常心是解药 —— 今日欢喜明日失落，从容面对便无恙。—— 林清玄

1. 安装 ECharts

通过 npm 或 yarn 安装 ECharts：

npm install echarts --save
# 或者
yarn add echarts

2. 在 Vue 项目中使用 ECharts

直接使用

在 Vue 组件中，你可以直接导入 ECharts 并使用它。这里是一个简单的示例，展示如何在 Vue 2 组件中创建一个柱状图：

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'BarChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      };
      myChart.setOption(option);
    }
  }
};
</script>

使用 ECharts 插件

你还可以使用 vue-echarts 插件，这将使在 Vue 中使用 ECharts 更加便捷。首先，安装 vue-echarts：

npm install vue-echarts --save
# 或者
yarn add vue-echarts

然后，在你的 Vue 组件中使用它。以下是一个使用 vue-echarts 的示例：

<template>
  <div>
    <v-chart :options="options" :autoresize="true"></v-chart>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts.vue';
import 'echarts/lib/chart/bar'; // 引入柱状图
import 'echarts/lib/component/tooltip'; // 引入提示框
import 'echarts/lib/component/title'; // 引入图表标题
import 'echarts/lib/component/legend'; // 引入图例
import 'echarts/lib/component/toolbox'; // 引入工具箱

export default {
  components: {
    v_chart: ECharts
  },
  data() {
    return {
      options: {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      }
    };
  }
};
</script>

这样，你就可以在 Vue 项目中使用 ECharts 来创建各种图表了。如果需要更复杂的功能或遇到任何问题，随时可以提问！

🌸🌸🌸 完结撒花 🌸🌸🌸