由于项目需要自学了echarts，下面将学到的东西总结如下，如果有哪里写的不好，请批评指正

一、前期准备

1、使用echarts之前先要引入echarts.js，js可以到官网下载

2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。

3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使用setoption生成图表。

（代码如下）注：后面将不再对引入js，获取id，调用option生成图表做赘述

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <!-- 引入echarts.js -->

    <script src="js/echarts.js "></script>

    <script>

    获取容器的id并赋值给变量myChart

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

    /*用来配置参数*/

    option = {

       }

     /*调用option生成图表*/

    myChart.setOption(option)

    </script>

</body>

</html>

二、各种图表使用

1、柱状图代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="js/echarts.js "></script>

    <script>

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

    myChart.title = '坐标轴刻度与标签对齐';

    option = {

        color: ['#3398DB'],

        tooltip : {

            trigger: 'axis',

            axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

            }

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis : [

            {

                type : 'category',

                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

                axisTick: {

                    alignWithLabel: true

                }

            }

        ],

        yAxis : [

            {

                type : 'value'

            }

        ],

        series : [

            {

                name:'直接访问',

                type:'bar',

                barWidth: '60%',

                data:[10, 52, 200, 334, 390, 330, 220]

            }

        ]

    };

    myChart.setOption(option)

    </script>

</body>

</html>

运行结果

2、折线图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="pic4" style="width: 600px;height:400px;"></div>

    <script src="js/echarts.js"></script>

    <script>

        var myChart13 = echarts.init(document.getElementById('pic4'));

        var data = [];

        option15 = {

                title: {

                    text: '曲线',

                },

                tooltip: {

                    trigger: 'axis',

                },

                legend: {

                    data:['昨日(11月8日)','今日(11月9日)']

                },

                grid: {

                    left: '1%',

                    right: '1%',

                    bottom: '3%',

                    containLabel: true

                },

                toolbox: {

                    show: false,

                    feature: {

                        dataZoom: {

                            yAxisIndex: 'none'

                        },

                        dataView: {readOnly: false},

                        magicType: {type: ['line', 'bar']},

                        restore: {},

                        saveAsImage: {}

                    }

                },

                color:["red","#CD3333"],

                xAxis:  {

                    type: 'category',

                    boundaryGap: false,

                    data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']

                },

                yAxis: {

                    type: 'value',

                    name: '单位（kW）',

                    axisLabel: {

                        formatter: '{value}'

                    }

                },

                series: [

                    {

                        name:'昨日(11月8日)',

                        type:'line',

                        data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],

                    },

                    {

                        type:'line',

                        name : '今日(11月9日)',

                        data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],

                    }

                        ]

            };

        myChart13.setOption(option15);

    </script>

</body>

</html>

运行结果

3、饼图

由于代码重复就不浪费地方写所有代码，直接替换（一）中的option{}就可以

option = {

    title : {

        text: '某站点用户访问来源',

        subtext: '纯属虚构',

        x:'center'

    },

    tooltip : {

        trigger: 'item',

        formatter: "{a} <br/>{b} : {c} ({d}%)"

    },

    legend: {

        orient: 'vertical',

        left: 'left',

        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

    },

    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:'搜索引擎'}

            ],

            itemStyle: {

                emphasis: {

                    shadowBlur: 10,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        }

    ]

};

运行结果

4、全国地图

由于地图比较复杂，所以把全部代码展示出来

china.js可以到官网下载所有代码，在echarts/map文件夹中可以找到china.js,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 1000px;height:800px;"></div>

    /*<script src="node_modules/echarts/theme/shine.js"></script>*/

    <script src="js/echarts.js"></script>

    <script src="node_modules/echarts/map/js/china.js"></script>

    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('main'), 'shine');

              function randomData() {

            return Math.round(Math.random()*1000);

        }

        option = {

            title: {

                text: 'iphone销量',

                subtext: '纯属虚构',

                left: 'center'

            },

            tooltip: {

                trigger: 'item'

            },

            legend: {

                orient: 'vertical',

                left: 'left',

                data:['iphone3','iphone4','iphone5']

            },

            visualMap: {

                min: 0,

                max: 2500,

                left: 'left',

                top: 'bottom',

                text: ['高','低'],           // 文本，默认为数值文本

                calculable: true

            },

            toolbox: {

                show: false,

                orient: 'vertical',

                left: 'right',

                top: 'center',

                feature: {

                    dataView: {readOnly: false},

                    restore: {},

                    saveAsImage: {}

                }

            },

            series: [

                {

                     itemStyle: {

                            normal: {

                                        color: function (params) {

                                            var colorList = [

                                              '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',

                                               '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',

                                               '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'

                                            ];

                                            return colorList[params.dataIndex]

                                        },

                                    }

                                },

                    name: 'iphone3',

                    type: 'map',

                    mapType: 'china',

                    roam: false,

                    label: {

                        normal: {

                            show: true

                        },

                        emphasis: {

                            show: true

                        }

                    },

                    data:[

                        {name: '北京',value: randomData() },

                        {name: '天津',value: randomData() },

                        {name: '上海',value: randomData() },

                        {name: '重庆',value: randomData() },

                        {name: '河北',value: randomData() },

                        {name: '河南',value: randomData() },

                        {name: '云南',value: randomData() },

                        {name: '辽宁',value: randomData() },

                        {name: '黑龙江',value: randomData() },

                        {name: '湖南',value: randomData() },

                        {name: '安徽',value: randomData() },

                        {name: '山东',value: randomData() },

                        {name: '新疆',value: randomData() },

                        {name: '江苏',value: randomData() },

                        {name: '浙江',value: randomData() },

                        {name: '江西',value: randomData() },

                        {name: '湖北',value: randomData() },

                        {name: '广西',value: randomData() },

                        {name: '甘肃',value: randomData() },

                        {name: '山西',value: randomData() },

                        {name: '内蒙古',value: randomData() },

                        {name: '陕西',value: randomData() },

                        {name: '吉林',value: randomData() },

                        {name: '福建',value: randomData() },

                        {name: '贵州',value: randomData() },

                        {name: '广东',value: randomData() },

                        {name: '青海',value: randomData() },

                        {name: '西藏',value: randomData() },

                        {name: '四川',value: randomData() },

                        {name: '宁夏',value: randomData() },

                        {name: '海南',value: randomData() },

                        {name: '台湾',value: randomData() },

                        {name: '香港',value: randomData() },

                        {name: '澳门',value: randomData() }

                    ]

                }

            ]

        };

        myChart.setOption(option);

 </script>  

</body>

</html>

运行结果

5、城市地图（以北京为例）

beijing.js可以到官网下载所有代码，在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可

代码

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

</head>

<body>

    <div id="main" style="100%; height: 100%;"></div>

</body>

<script src="js/echarts.js"></script>

<script src="js/map/js/province/beijing.js"></script>

<script>

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

    var option = {

        title: {

            text : '北京地图',

            subtext : '-。-'

        },

        tooltip : {

            trigger: 'item',

            formatter: function(a){

                return a[2];

            }

        },

        legend: {

            orient: 'vertical',

            x:'right',

            data:['数据名称']

        },

        dataRange: {

            min: 0,

            max: 1000,

            color:['orange','yellow'],

            text:['高','低'],           // 文本，默认为数值文本

            calculable : true

        },

        series : [

            {

                name: '数据名称',

                type: 'map',

                mapType: '北京',

                selectedMode : 'single',

                itemStyle:{

                    normal:{label:{show:true}},

                    emphasis:{label:{show:true}}

                },

                data:[

                    {name: '怀柔区',value: Math.round(Math.random()*1000)},

                    {name: '延庆县',value: Math.round(Math.random()*1000)},

                    {name: '密云县',value: Math.round(Math.random()*1000)},

                    {name: '昌平区',value: Math.round(Math.random()*1000)},

                    {name: '平谷区',value: Math.round(Math.random()*1000)},

                    {name: '顺义区',value: Math.round(Math.random()*1000)},

                    {name: '门头沟区',value: Math.round(Math.random()*1000)},

                    {name: '海淀区',value: Math.round(Math.random()*1000)},

                    {name: '朝阳区',value: Math.round(Math.random()*1000)},

                    {name: '石景山区',value: Math.round(Math.random()*1000)},

                    {name: '西城区',value: Math.round(Math.random()*1000)},

                    {name: '东城区',value: Math.round(Math.random()*1000)},

                    {name: '宣武区',value: Math.round(Math.random()*1000)},

                    {name: '丰台区',value: Math.round(Math.random()*1000)},

                    {name: '房山区',value: Math.round(Math.random()*1000)},

                    {name: '通州区',value: Math.round(Math.random()*1000)},

                    {name: '大兴区',value: Math.round(Math.random()*1000)},

                ]

            }

        ]

    };

    myChart.setOption(option);

</script>

</html>

运行结果

其他图就不做赘述，官网www.echarts.baidu.com作品中有具体例子可以根据需要直接替换option中的内容即可得到想要的结果。

四、问题补充

下面补充的内容是我在用到时候遇到的，看了官网api百度搜索了很多找到，现在做总结放到这希望自己可以帮助到一些人，也为了以后自己用好找

1、图表自适应

     （1）多个echart时候
          window.addEventListener("resize", function () {
                myChart11.resize();
                myChart12.resize()
                myChart13.resize()
             });
     （2）单个时候 
         window.onresize = myChart11.resize;
2、X轴的坐标名全部显示
　　　　　　axisLabel:{
            interval:0   //设置间隔，0的时候全部显示
                    },
3、修改柱状图同一组数据柱子颜色不一样、柱子的宽度、柱子上的提示信息
       series : [
                type:'bar',  
                itemStyle: {
 　　　　　　　　　　//修改颜色
                    normal: {
                  　　color: function(params) {
          　　　　　　 var colorList = ['#2eddc1','#FCCE10','#E87C25','#27727B',];
          　　　　　　 return colorList[params.dataIndex]
         　　　　},
                                      　　//bar上显示的提示信息
                 　　label: {
                  　　　　 show: true,
                   　　　　position: 'top',
                   　　　　formatter: '{b}\n{c}'
                  　　}
                 }
             },
                    //bar的宽度
              barWidth: '30%',
              data:[1,2,3,4]
            }
       ]

4、折线图的折线平滑显示

　　　　series: [
                        smooth: true,

　　　　]

5、地图移动放大缩小

　　　　　　oamController: {  //可移动放大缩小地图
                                        show: true,
                                        x: 'right',
                                        mapTypeControl: {
                                            'china': true
                                        }
                                    },

6、改变地图颜色和轮廓颜色

　　　　　　　　series : [
                                        {
                                            itemStyle:{
                                                normal:{
                                                    label:{show:true},
                                                    areaStyle:{color:'#c0e7fa'},//地图整体颜色
                                                     borderColor: '#fff',//地图各省轮廓颜色
                                                     borderWidth: 1,//地图各省轮廓线条粗细
                                                    },
                                                emphasis:{label:{show:true}},
                                                
                                            },　　　　　　　　　　　　]

7、为地图绑定单击事件

　　使用click事件时必须设置series : [clickable : true,]

　　　　myChart.on(ecConfig.EVENT.CLICK, function (param){
                        var tooltipList='<div class="map-sql"><p class="map-title">{b}项目<p><p class="map-p1"><img src="././img/zhuangji.png"><span>容量：20ml</span><img class="map-img1" src="././img　　　　　　　　　　　　/zongfa.png"><span>总量：40kg</span></p><p class="map-p2"><img src="././img/huangguang.png"><span>光：30kW</span></p><p class="map-p1"><img src="././img/jiance.png"><span>监测：18个</span><img class="map-img1" src="././img/dianshu.png"><span>点数：941点</span></p></div> '
                         if (typeof param.seriesIndex == 'undefined') {    
                                return;    
                            }    
                            if (param.type == 'click') {  
                                //获取dom对象
                                var results = document.getElementsByClassName('map-lig');
                                 var objbj = document.getElementById('map-lightbj'); //北京
                                 var objsx = document.getElementById('map-lightsx');    //山西
                                 var objsc = document.getElementById('map-lightsc');//四川
                                 var objjl = document.getElementById('map-lightjl');//吉林
                                 var parm = param.name;
                                 if(parm == '北京'){
                                        for(var i=0;i<results.length;i++){
                                            if(objbj == results[i]){
                                                results[i].style.display = "block";
                                            }else{
                                            results[i].style.display = "none";
                                            }
                                        }
                                 }else if(parm == '山西'){
                                     for(var i=0;i<results.length;i++){
                                        if(objsx == results[i]){
                                            results[i].style.display = "block";
                                        }else{
                                        results[i].style.display = "none";
                                        }
                                    }
                                 }else if(parm == '四川'){
                                         for(var i=0;i<results.length;i++){
                                            if(objsc == results[i]){
                                                results[i].style.display = "block";
                                            }else{
                                            results[i].style.display = "none";
                                            }
                                        }
                                     }
                                 else if(parm == '吉林'){
                                         for(var i=0;i<results.length;i++){
                                            if(objjl == results[i]){
                                                results[i].style.display = "block";
                                            }else{
                                            results[i].style.display = "none";
                                            }
                                        }
                                     }
                                 else{
                                        for(var i=0;i<results.length;i++){
                                            results[i].style.display = "none";
                                        }
                                 }
                            }    
                    });
              });

附加新内容见echarts3使用总结2http://www.cnblogs.com/hhw3/p/7365117.html

上述内容是参照echarts官网http://echarts.baidu.com/,若有侵权请联系，谢谢！

作者：BlancheWang 
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

最新文章

  1. linux shell 用sed命令在文本的行尾或行首添加字符
  2. 谈谈Objective-C的警告 (转)
  3. hdu 1532 Dinic模板（小白书）
  4. C++ 中的virtual关键词
  5. 绘制FastMM内存分配流程图(小块内存分配)
  6. jQuery.Gantt
  7. charles支持https抓包配置
  8. 使用getInstance()方法的原因及作用
  9. 自建 Gitlab (邮箱配置、拆分 PostgreSQL、Redis) + 随想
  10. textarea 赋值的方法
  11. ssm文件配置
  12. html5-内联框架
  13. Win10系列：JavaScript综合实例1
  14. python闭包，看不懂请揍我
  15. Xmind 8 pro 软件破解版
  16. if 语句练习 身高体重问题
  17. Native Code
  18. 【Ansible】ansible循环
  19. 手机web——自适应网页设计（html/css控制）（转）
  20. Nagios配置文件说明

热门文章

  1. --HTML标签1
  2. 深究CSS中Position的属性和特性
  3. Mysql 函数使用记录(二)——ELT()、FIELD()、IFNULL()
  4. JS绘制拓扑图示例 （JTopo）
  5. 二: vue的属性及功能,axios
  6. 1. eclipse异常问题解决办法
  7. ASP.NET中Page_Load()与Page_Init()的区别
  8. long long 与__int64
  9. 配置java环境jdk
  10. 响应式图片 (responsive image)