Echarts是百度商业前端数据可视化团队开发 的商业级数据图表,提供折线,柱状,散点,K线,饼图,雷达,和铉,力导向分布图,地图,仪表盘等多种数据图表.

echarts主要文件在根目录下build/dit,包含一个echarts.js文件和chart文件夹. echarts推荐模块化加载资源文件,需要用到什么图,再把对应的js文件require进来,实例:

require.config({
    paths: {
        echarts: '/path/to/echarts/build/dist'
    }
});
require(
    [
        'echarts',
        'echarts/chart/pie',
        'echarts/chart/line',
    ],
)

第一段指定资源文件存放目录,第二段中的文件都是相对这一路径的相对位置,是必需的. 第二段echarts指echarts.js文件,统一调配用.第二行开始根据需要加载.

require之后,我们新建一个函数进行图表的配置,在这个函数中设置图表参数,元素初始化,动态数据生成等等.

图表参数的设置类似这样,这里拿echarts官方文档的例子

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]
        }
    ]
};

这个类json格式的对象定义了图表所需的参数,接下来用这两行代码将图表生成在对应的dom下.

var myChart = ec.init(document.getElementById('DOMID')); 
myChart.setOption(option);

当然,图表需要生成在指定的容器类,所以我们需要先设定一个dom

<body>
<div style="height:400px" id="DOMID">
</div>
</body>

这个容器的高度属性是不能缺少的,否则图表显示参数缺失.

完整的图表代码如下:

<html>
<body>
<div style="height:400px" id="domid">
</div>
<script src="/path/to/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
    paths: {
        echarts: '/path/to/echarts/build/dist'
    }
});
require(
    [
        'echarts',
        'echarts/chart/pie',
        'echarts/chart/line',
    ],
    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]
            }
        ]
    };
    var myChart = ec.init(document.getElementById('domid')); 
    myChart.setOption(option); 
)
</script>
</body>
</html>