图表展示 echarts百度图表插件

引入echarts.js
echarts官网 http://echarts.baidu.com/index.html

//html
<!--开括一片 图表区域-->
<div id="main" style="width: 600px;height:400px;"></div>

//js
var bad = {"badList":[{"bad":8,"cid":1,"d":3,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":400,"id":3579,"percent":2,"regDate":1527984609,"regPerson":"","status":1,"updDate":1528030210,"updPerson":"0","ym":6,"ymd":20180603},{"bad":5,"cid":1,"d":2,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":431,"id":3576,"percent":1,"regDate":1527916807,"regPerson":"","status":1,"updDate":1527943809,"updPerson":"0","ym":6,"ymd":20180602},{"bad":17,"cid":1,"d":1,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":945,"id":3527,"percent":1,"regDate":1527814209,"regPerson":"","status":1,"updDate":1527857407,"updPerson":"0","ym":6,"ymd":20180601},{"bad":19,"cid":1,"d":31,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":647,"id":3495,"percent":2,"regDate":1527727808,"regPerson":"","status":1,"updDate":1527771009,"updPerson":"0","ym":5,"ymd":20180531},{"bad":1,"cid":1,"d":30,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":217,"id":3468,"percent":0,"regDate":1527649208,"regPerson":"","status":1,"updDate":1527684606,"updPerson":"0","ym":5,"ymd":20180530},{"bad":1,"cid":1,"d":29,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":86,"id":3431,"percent":1,"regDate":1527561007,"regPerson":"","status":1,"updDate":1527598209,"updPerson":"0","ym":5,"ymd":20180529},{"bad":0,"cid":1,"d":28,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":50,"id":3389,"percent":0,"regDate":1527469806,"regPerson":"","status":1,"updDate":1527511807,"updPerson":"0","ym":5,"ymd":20180528},{"bad":1,"cid":1,"d":27,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":15,"id":3355,"percent":6,"regDate":1527382201,"regPerson":"","status":1,"updDate":1527425408,"updPerson":"0","ym":5,"ymd":20180527},{"bad":0,"cid":1,"d":26,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":0,"id":3334,"percent":0,"regDate":1527315606,"regPerson":"","status":1,"updDate":1527339006,"updPerson":"0","ym":5,"ymd":20180526},{"bad":0,"cid":1,"d":25,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":18,"id":3298,"percent":0,"regDate":1527217209,"regPerson":"","status":1,"updDate":1527252608,"updPerson":"0","ym":5,"ymd":20180525},{"bad":4,"cid":1,"d":23,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":108,"id":3228,"percent":3,"regDate":1527041407,"regPerson":"","status":1,"updDate":1527079809,"updPerson":"0","ym":5,"ymd":20180523},{"bad":3,"cid":1,"d":22,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":274,"id":3180,"percent":1,"regDate":1526948409,"regPerson":"","status":1,"updDate":1526993408,"updPerson":"0","ym":5,"ymd":20180522},{"bad":1,"cid":1,"d":20,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":40,"id":3130,"percent":2,"regDate":1526779206,"regPerson":"","status":1,"updDate":1526820608,"updPerson":"0","ym":5,"ymd":20180520},{"bad":0,"cid":1,"d":19,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":14,"id":3112,"percent":0,"regDate":1526707209,"regPerson":"","status":1,"updDate":1526734209,"updPerson":"0","ym":5,"ymd":20180519},{"bad":0,"cid":1,"d":18,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":64,"id":3068,"percent":0,"regDate":1526605209,"regPerson":"","status":1,"updDate":1526647809,"updPerson":"0","ym":5,"ymd":20180518},{"bad":0,"cid":1,"d":17,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":82,"id":3045,"percent":0,"regDate":1526536209,"regPerson":"","status":1,"updDate":1526561406,"updPerson":"0","ym":5,"ymd":20180517},{"bad":0,"cid":1,"d":16,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":64,"id":3011,"percent":0,"regDate":1526439607,"regPerson":"","status":1,"updDate":1526475007,"updPerson":"0","ym":5,"ymd":20180516},{"bad":2,"cid":1,"d":15,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":179,"id":2969,"percent":1,"regDate":1526346008,"regPerson":"","status":1,"updDate":1526388607,"updPerson":"0","ym":5,"ymd":20180515},{"bad":1,"cid":1,"d":13,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":150,"id":2904,"percent":0,"regDate":1526173208,"regPerson":"","status":1,"updDate":1526215807,"updPerson":"0","ym":5,"ymd":20180513},{"bad":3,"cid":1,"d":12,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":296,"id":2878,"percent":1,"regDate":1526086807,"regPerson":"","status":1,"updDate":1526129409,"updPerson":"0","ym":5,"ymd":20180512},{"bad":0,"cid":1,"d":11,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":60,"id":2849,"percent":0,"regDate":1526021408,"regPerson":"","status":1,"updDate":1526043006,"updPerson":"0","ym":5,"ymd":20180511},{"bad":0,"cid":1,"d":10,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":175,"id":2805,"percent":0,"regDate":1525915208,"regPerson":"","status":1,"updDate":1525956608,"updPerson":"0","ym":5,"ymd":20180510},{"bad":5,"cid":1,"d":9,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":208,"id":2779,"percent":2,"regDate":1525843210,"regPerson":"","status":1,"updDate":1525870209,"updPerson":"0","ym":5,"ymd":20180509},{"bad":1,"cid":1,"d":8,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":141,"id":2729,"percent":0,"regDate":1525740006,"regPerson":"","status":1,"updDate":1525783806,"updPerson":"0","ym":5,"ymd":20180508},{"bad":0,"cid":1,"d":7,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":47,"id":2710,"percent":0,"regDate":1525674008,"regPerson":"","status":1,"updDate":1525697408,"updPerson":"0","ym":5,"ymd":20180507},{"bad":1,"cid":1,"d":6,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":41,"id":2672,"percent":2,"regDate":1525569006,"regPerson":"","status":1,"updDate":1525611008,"updPerson":"0","ym":5,"ymd":20180506},{"bad":2,"cid":1,"d":5,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":409,"id":2638,"percent":0,"regDate":1525480206,"regPerson":"","status":1,"updDate":1525524607,"updPerson":"0","ym":5,"ymd":20180505},{"bad":8,"cid":1,"d":4,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":1731,"id":2617,"percent":0,"regDate":1525396808,"regPerson":"","status":1,"updDate":1525438206,"updPerson":"0","ym":5,"ymd":20180504},{"bad":1,"cid":1,"d":3,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":397,"id":2582,"percent":0,"regDate":1525311008,"regPerson":"","status":1,"updDate":1525351810,"updPerson":"0","ym":5,"ymd":20180503},{"bad":0,"cid":1,"d":2,"deviceid":"bb76680ae63b13de2e02dbd206cca2c1","good":75,"id":2554,"percent":0,"regDate":1525224606,"regPerson":"","status":1,"updDate":1525265406,"updPerson":"0","ym":5,"ymd":20180502}]};
        var bad_percent = [];//获取日期
        var bad_ymd = [];//获取不良率
        var bad_good = [];//获取成功
        var bad_bad = [];//获取失败


        for(var i in bad.badList) {
            bad_percent.push(bad.badList[i].percent);
            bad_ymd.push(bad.badList[i].ym +"-"+ bad.badList[i].d);
            bad_good.push(bad.badList[i].good);
            bad_bad.push(bad.badList[i].bad);
        }


        // 绘制图表。
        echarts.init(document.getElementById('main')).setOption({
                tooltip: {
                    trigger: 'item' //悬浮出现信息
                },
                legend: {
                    data:['不良率%']   //切换样式 名称
                },
            toolbox: {
                show : true,
                feature : {//工具插件
                    dataView : {
                        show: true,
                        readOnly: false,
                        optionToContent:function(opt){//点击详细 自定义渲染
                            var bad_ymd = opt.xAxis[0].data;     //获取X轴信息
                            var bad_percent = opt.series[0].data;//获取Y轴信息
                            var table = '<table id="list" cellspacing="0" style="width:100%;text-align:center">'
                                         + '<tbody>'
                                            + '<tr>'
                                                + '<td>日期</td>'
                                                + '<td>成功</td>'
                                                + '<td>失败</td>'
                                                + '<td>不良率</td>'
                                            + '</tr>';
                            for (var i = 0, l = bad_ymd.length; i < l; i++) {
                                     table += '<tr>'
                                                + '<td>' + bad_ymd[i] + '</td>'
                                                + '<td>' + bad_good[i] + '</td>'
                                                + '<td>' + bad_bad[i] + '</td>'
                                                + '<td>' + bad_percent[i] + '%</td>'
                                             + '</tr>';
                            }
                                  table += '</tbody>'
                                       +'</table>';
                            return table;
                        }
                    },
                    magicType : {show: true, type: ['line', 'bar']},//柱形图切换 折线图切换
                }
            },
                xAxis: {//X轴标题信息
                    data: bad_ymd
                },
                yAxis: {},
                color :['#c23531'],
                series: [
                    {
                    name: '不良率%',//与上方央视名称必须一致
                    type: 'bar',
                    data: bad_percent,//每条信息值
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                    }
                ]

        });

效果图

用于测试 值是写死了 一般都是从后台取JSON 渲染
若是出现标题乱码或者效果没显示 也许是echarts.js版本过低造成的
或者打开F12查看错误信息
遇到什么问题即可 看官方文档

第一步 去官网下载echarts.js
第二部 拷贝html
第三部 拷贝js
第四部 即可看到效果