Echart 商业级数据图表

简介

最近工作上用到这个图表库，图表丰富，用起来也很方便。纯javascript，可以流畅得运行在PC和移动设备上，兼容大部分浏览器。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

Echarts官网：http://echarts.baidu.com/echarts2/index.html

Echarts实例：http://echarts.baidu.com/echarts2/doc/example.html

配置

1. 下载资源文件，去官网下载

http://echarts.baidu.com/echarts2/index.html

2. 目录结构介绍

（1）build 开发所有源文件，一次性引入全部图表 echarts-all.js，推荐引入echarts.js

（2）doc 全部demo事例文件夹

（3）index.html 文档入口

开发模式

1. 开发

如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入

如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

1、引用资源的主文件

2、指图表对象

var myChart = echarts.init(document.getElementById('div1'));

var option = {};

myChart.setOption(option);

示例1 折线图：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .chart{
        width:900px;
        height:400px;
        border:1px solid #dddddd;
        margin:10px auto;
    }
    </style>
    <script src="build/source/echarts.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
<div class="chart" id="chart"></div>
<script>

</script>
</body>
</html>

// 自定义模块加载
    require.config({
        paths:{
            echarts:'./build/dist'  //引入资源文件夹路径
        }
    });
    require(['echarts','echarts/chart/line'],function(ec){
        var chart = document.getElementById("chart");
        var myChart = ec.init(chart);
        var option = {
            title:{
                text:'标题',  
                x:'center'   //放置位置——水平
            },
            tooltip:{
                trigger:'axis'  //气泡提示配置
            },
            legend:{  //图例配置
                data:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                padding:5,//图例内边距，默认上下左右内边距为5
                itemGap:10,  //Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                y:'bottom'  //垂直安放位置
            },
            toolbox:{  //工具箱
                show:true, //是否显示工具箱
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar','stack','tiled']},
                    restore:{show:true},
                    saveAsImage:{show:true}
                }
            },
            xAxis:[{   //x轴
                type:'category',  //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value' 
                boundary:false,   //坐标轴两端空白策略
                data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            yAxis:[{
                type:'value'
            }],
            series:[
              {   //图表数据
                  name:'邮件营销',
                  type:'line',
                  stack:'总量',   //组合名称
                  data: [120, 132, 101, 134, 90, 230, 210]
               },
               {
                  name:'联盟广告',
                     type:'line',
                  stack:'总量',
                     data:[220, 182, 191, 234, 290, 330, 310]
               },
               {
                     name: '视频广告',
                  type: 'line',
                  stack: '总量',
                  data: [150, 232, 201, 154, 190, 330, 410]
               },
               {
                     name: '直接访问',
                  type: 'line',
                  stack: '总量',
                  data: [320, 332, 301, 334, 390, 330, 320]
               },
               {
                  name: '搜索引擎',
                  type: 'line',
                  stack: '总量',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]

        };
        myChart.setOption(option);

    });

运行结果：

2. 柱状图，饼图

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .chart{
        width:900px;
        height:400px;
        border:1px solid #dddddd;
        margin:20px auto;
    }
    </style>

</head>
<body>
<!-- 折线图 -->
<div class="chart" id="chart1"></div>  

<!-- 柱状图 -->
<div class="chart" id="chart2"></div>

<!-- 饼图 -->
<div class="chart" id="chart3"></div>


<script src="build/source/echarts.js"></script>
<script src="js/main.js"></script>
</body>
</html>

js:

/*
 *2016.9.6
 *主模块
 */
 // 自定义模块加载
    require.config({
        paths:{
            echarts:'./build/dist'  //引入资源文件夹路径
        }
    });
    require([
        'echarts',
        'echarts/chart/line',  //折线图
        'echarts/chart/bar',   //柱形图
        'echarts/chart/pie',   //饼图
        'echarts/chart/chord', //和弦图
        'echarts/chart/map', //地图
        'echarts/chart/radar'   //雷达
        //★一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
        ],
        function(ec){
        var chart1 = document.getElementById("chart1"),  //折线图
            chart2 = document.getElementById("chart2"), //柱状图
            chart3 = document.getElementById("chart3");
        var myChart1 = ec.init(chart1),
            myChart2 = ec.init(chart2),
            mychart3 = ec.init(chart3);

        // 折线图
        var option1 = {
            title:{
                text:'标题',  
                x:'center'   //放置位置——水平
            },
            tooltip:{
                trigger:'axis'  //气泡提示配置
            },
            legend:{  //图例配置
                data:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                padding:5,//图例内边距，默认上下左右内边距为5
                itemGap:10,  //Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                y:'bottom'  //垂直安放位置
            },
            toolbox:{  //工具箱
                show:true, //是否显示工具箱
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar','stack','tiled']},
                    restore:{show:true},
                    saveAsImage:{show:true}
                }
            },
            xAxis:[{   //x轴
                type:'category',  //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value' 
                boundary:false,   //坐标轴两端空白策略
                data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            yAxis:[{
                type:'value'
            }],
            series:[
              {   //图表数据
                  name:'邮件营销',
                  type:'line',
                  stack:'总量',   //组合名称
                  data: [120, 132, 101, 134, 90, 230, 210]
               },
               {
                  name:'联盟广告',
                     type:'line',
                  stack:'总量',
                     data:[220, 182, 191, 234, 290, 330, 310]
               },
               {
                     name: '视频广告',
                  type: 'line',
                  stack: '总量',
                  data: [150, 232, 201, 154, 190, 330, 410]
               },
               {
                     name: '直接访问',
                  type: 'line',
                  stack: '总量',
                  data: [320, 332, 301, 334, 390, 330, 320]
               },
               {
                  name: '搜索引擎',
                  type: 'line',
                  stack: '总量',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]

        };

        // 柱状图
        var option2 = {
            title:{
                text:'某地区蒸发量和降水量',
                subtext:'数据纯属虚构'
            },
            tooltip:{
                trigger:'axis'
            },
            legend:{
                data:['蒸发量','降水量']
            },
            toolbox:{
                show:true,
                feature:{
                  mark: { show: true },
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
            },
            xAxis:[{
                type:'category',
                data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }],
            yAxis:[{
                type:'value'
            }],
            series:[
              {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
              },
              {
                  name:'降水量',
                  type:'bar',
                  data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
              }
            ]
        };

        // 饼图
        var option3={
            title:{
                text:'某站点用户访问来源',
                subtext:'虚构数据',
                x:'center'
            },
            tooltip:{
                trigger:'item',
                formatter:'{a} <br/>{b} : {c} ({d}%)'
            },
            legend:{
                orient:'vertical',
                x:'left',
                data:['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            toolbox:{
                show:true,
                feature:{
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType:{
                        show:true,
                        type: ['pie', 'funnel'],
                        option: {
                          funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                          }
                        }

                    },
                    restore:{show:true},
                    saveAsImage:{show:true}
                }
            },
            series:[
            {
                name:'访问来源',
                type:'pie',
                radius:'55%',
                center:['50%','60%'],
                data:[
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ]
            }
            ]

        };

        myChart1.setOption(option1);
        myChart2.setOption(option2);
        mychart3.setOption(option3);


    });

运行结果：

三：相关实例化方法

1、setOption(Object option,{boolean = true} notMerge)

var option={
        title:{
            text:'我的第一个图表示例'
        },
        tooltip:{
            trigger:'axis'
        }
    };

2. boolean notMerge,表示是否合并option，默认false，可以不设置

万能接口，配置图表实例任何可配置选项（详见option），多次调用时option选项是默认是合并（merge）的，如果不需求，可以通过notMerger参数为true阻止与上次option的合并。

3. setSeries(Array series,{boolean = }notMerge)

1)Array类型的series序列数据，如下

var Array seriesList = new Array();

var seriesObj = new seriesObj();
seriesObj.name = "蒸发量";
seriesObj.type = "line";
seriesObj.data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];

//设置series
myChart.setSeries(seriesList,false);

4. showLoading(Object loadingOption)

mychart.showLoading({
        text:'图表数据正在努力加载...',
        x:'center',
        y:'center',
        textStyle:{
            color:'red',
            fontSize:14
        },
        effect:'spin'
    });

    //隐藏图表数据加载过度提示消息
    myChart.hideLoading();

四：主要配置

title:{
    show:true,
    text:'标题'，    subtext:'副标题'，    left:150,               //距离左边的像素   center||right    borderColor:'red',      //边框颜色    borderWidth:5,           //边框宽度    textStyle:{              //设置标题字体样式        fontSize:18    }
}

来源：https://www.cnblogs.com/Naomi-love/p/5846150.html

标签

chart