A·Y

Echarts

6/29/2021 Echarts

# 简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender (opens new window)，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

Echarts不仅提供了常见条形图，折线图，扇形图等数十种类型的图，还支持自定义图，基本可以涵盖你所有的需求。

# 快速入门

最简单的了解方式就是通过一个案例。（Vue2环境 + Echarts5）

  1. 下载安装
npm install echarts --save
1
  1. 在main.js引用并定义全局变量
// import echarts from 'echarts' // 5.0-方式
import * as echarts from 'echarts' // 5.0+方式
Vue.prototype.$echarts = echarts
1
2
3

这里为了快速上手直接引用了全部的组件，通常情况下，我们都会选择按需引用，这点在之后会说明。

  1. 在组件中创建一个容器用于展示图
<div id="main" :style="{ width: '800px', height: '300px' }"></div>
1
  1. 在mounted函数中进行图的初始化创建

 


















var chartDom = document.getElementById('main');
var myChart = this.$echarts.init(chartDom);
var option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

option && myChart.setOption(option);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样一个最简单的柱状图案例就完成了。你可以在Echarts的官网上找到更多案例，并且每个案例都可选择按需引用的方式。传送门 (opens new window)

# 最后

Echarts的介绍至此结束，这里只是简单的了解，以后再填坑。