echarts入门：全局echarts对象

最新推荐文章于 2025-04-18 17:22:49 发布

原创最新推荐文章于 2025-04-18 17:22:49 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

echarts 专栏收录该内容

8 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue项目中通过npm安装ECharts，并将其全局挂载到Vue原型上，以便在组件中方便地使用。首先，通过运行`npm install echarts --save`来安装ECharts。然后，在`src/main.js`文件中导入ECharts并将其挂载到Vue.prototype上。在其他组件中，可以使用`this.echarts`来创建和操作ECharts实例，例如初始化图表和设置选项。此外，还提供了一个基础的ECharts图表绘制示例，帮助理解如何在实际应用中使用全局echarts对象。

npm 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

挂载到 Vue 原型上

在 src/main.js 文件中挂载，将其挂载到 Vue 的原型对象上

import * as echarts from 'echarts';
// 将全局echarts对象挂载到Vue的原型对象上 
Vue.prototype.echarts = echarts

使用全局 echarts 对象

在其他组件中使用

this.echarts

使用全局echarts案例

// 基于准备好的dom，初始化echarts实例
var myChart = this.echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

ECharts 基础概念概览