【前端 Echarts】小白初步学习小结Echarts基本使用

一些可供学习的网站

图表链接

Examples - Apache ECharts

ppchart

http://analysis.datains.cn/finance-admin/index.html#/chartLib/all

Echarts图表效果图（Make A Pie替代）_狮兄的博客-CSDN博客_echarts效果图

小结基本使用

下载并引入
https://github.com/apache/incubator-echarts/tree/4.5.0
dist/echarts.min.js
DOM容器（自定义id或者类）
<div id="main" style="width: 600px;height:400px;">div>
初始化echarts实例对象（通过id或者类获取DOM容器）
var myChart = echarts.init(document.getElementById('main'));
指定配置项和数据（option，参考echarts官网，选择想要的图表样式，根据设计图修改设计自己的）

Apache ECharts

Examples - Apache ECharts

Documentation - Apache ECharts
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
将配置项设置给echarts实例对象
myChart.setOption(option);

小结基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series

系列列表。每个系列通过 type 决定自己的图表类型

大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。