Echarts常用功能总结

之前做过柱形图和折线图，被前任引入的旧版本文件坑不少，再次做的时候都有些遗忘，趁项目不急的时候总结一下~

一、非模块化——单文件引入：

1、首先毫无疑问通过script标签引入echarts文件，官网http://echarts.baidu.com/echarts2/index.html可以下载

2、通过官网的例子结合实际补充说明

// srcipt标签式引入
var myChart = echarts.init(document.getElementById('main'));

// 过渡---------------------
myChart.showLoading({
    text: '正在努力的读取数据中...',    //loading话术
});

// ajax getting data...............

// ajax callback
myChart.hideLoading();

// 图表使用-------------------
var option = {
    legend: {                                   // 图例配置
        padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
        itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
        data: ['ios', 'android']
    },
    tooltip: {                                  // 气泡提示配置
        trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
    },
    xAxis: [                                    // 直角坐标系中横轴数组
        {
            type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [                                    // 直角坐标系中纵轴数组
        {
            type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
            boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比
            splitNumber: 4                      // 数值轴用，分割段数，默认为5
        }
    ],
    series: [
        {
            name: 'ios',                        // 系列名称
            type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
            data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        },
        {
            name: 'android',                    // 系列名称
            type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
            data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
        }
    ]
};
myChart.setOption(option);

...

// 增加些数据------------------
option.legend.data.push('win');
option.series.push({
        name: 'win',                            // 系列名称
        type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// 图表清空-------------------
myChart.clear();

// 图表释放-------------------
myChart.dispose();

legend：图例，每个图表最多仅有一个图例，下图中顶部中间

toolbox：工具箱，每个图表最多仅有一个工具箱，下图中顶部最右边

xAxis：横轴数组

yAxis：纵轴数组 axisLine是数组中通用属性  [{axisLine:{ *** }}]

 3、API说明

　　http://echarts.baidu.com/echarts2/doc/doc.html#AxisAxisline

二、模块化包引入：

通过require引入，这里说一下require的使用背景

实现JS文件文件的异步加载，避免网页失去响应

管理模块之间的依赖性，便于代码的编写和维护

 

 

 

引入require考虑到加载时长，可以放到网页底部，也可以用async属性，IE不支持，只支持defer，如下写就可以（data-main指定网页程序主模块，若主模块依赖于其他模块，需要使用AMD规范定义的的defer()函数）

<script src="js/require.js" defer async="true"  data-main="js/main" ></script>
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　// some code here

});  

 

下面是echarts官网上的引入的例子：

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});