# ECharts

# 参考文档

# 简介

Echarts，全称 Enterprise Charts，商业级数据图表。

ECharts 是一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts 最初由百度团队开源，并于 2018 年初捐赠给 Apache 基金会，成为 ASF 孵化级项目。2021 年 1 月 26 日晚，Apache 基金会官方宣布 ECharts 项目正式毕业，成为 Apache 顶级项目。

# 快速上手

快速上手-官方文档 (opens new window)

npm install echarts --save 或者 npm install echarts -S

引入依赖

全局引入 main.js

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;

1
2
3
4

局部引入(单页面) import * as echarts from 'echarts';

创建容器，设置宽高！

<template>
    <div id="myChart" style="width: 300px; height: 400px;"></div>
</template>

1
2
3

初始化并配置图表，需要在组件的 mounted 生命周期钩子中初始化 ECharts 图表。这是因为在这个阶段，图表容器已经被插入到 DOM 中，可以被 ECharts 访问。

import * as echarts from 'echarts';
export default {
    name: 'Chart',
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            // const chart = echarts.init(document.getElementById('myChart'))
            cost myChart = echarts.init(this.$refs.myChart)
            // 图表配置
            const option = {
                // ...
            }
            myChart.setOption(option)
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 讨论区

由于评论过多会影响页面最下方的导航，故将评论区做默认折叠处理。

点击查看评论区内容，渴望您的宝贵建议~

← ECharts 总览