名词解析
基本名词
名词
描述
chart
是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis
直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴
xAxis
直角坐标系中的横轴，通常并默认为类目轴
yAxis
直角坐标系中的纵轴，通常并默认为数值轴
grid
直角坐标系中除坐标轴外的绘图网格
legend
图例，表述数据和图形的关联
dataRange
值域选择，常用于展现地域数据时选择值域范围
dataZoom
数据区域缩放，常用于展现大数据时选择可视范围
toolbox
辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip
气泡提示框，常用于展现更详细的数据
timeline
时间轴，常用于展现同一组数据在时间维度上的多份数据
series
数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
图表名词
名词
描述
line
折线图，堆积折线图，区域图，堆积区域图。
bar
柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter
散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜或大小，当映射到大小时则为气泡图
k
K线图，蜡烛图。常用于展现股票交易数据。
pie
饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
require名词
radar
雷达图，填充雷达图。高维度数据展现的常用图表。
chord
和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force
力导布局图。常用于展现复杂关系网络聚类布局。
map
地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：
引入ECharts
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
模块化包引入
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很
简单，只需要配置好packet路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
fig({
    packages: [
        {
            name: 'echarts',
            location: '../../src',     
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});
模块化单文件引入（推荐）
如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发，这种方式只是我们预先帮你把常用图表组合连接合并在一起，你只需一个符合AMD规范的加载器，同时引入一个echarts相关js即可。如你所发现的，build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：
∙echarts.js : 经过压缩，包含除地图外的全部图表
∙echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
∙echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
∙echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，你需要配置如下：
/
/from echarts example
fig({
    paths:{
        'echarts':'./js/echarts',
        'echarts/chart/bar' : './js/echarts',      // 把所需图表指向单文件
        'echarts/chart/line': './js/echarts'
    }
});
fig配置后后就可以通过动态加载使用echarts
//from echarts example
require(
    [
        'echarts',
        'echarts/chart/line',  // 按需加载所需图表
        'echarts/chart/bar'
    ],
    function (ec) {
        var myChart = ec.init(domMain);
        var option = {
            ...
        }
        myChart.setOption(option);
    }
);
总结来说，模块化引入ECharts，你都需要如下4步：
1.引入一个模块加载器，如esl.js或者require.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。