echarts入门：全局echarts对象

最新推荐文章于 2024-07-26 14:59:35 发布

liudachu

最新推荐文章于 2024-07-26 14:59:35 发布

阅读量1.3k

点赞数 3

分类专栏： echarts 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/liudachu/article/details/109267795

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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]
    }]
});