我用了vue.js

也可以不用 

 

 

 

  <script>
        $(function () {
            var vm = new Vue(
                {
                    el: '#app',
                    data: {

                    },
                    mounted: function () {
                        _this = this;
                        var list = [];
                        var dataname = [];
                        $.ajax({
                            type: "Post",
                            url: "RealTime.aspx/GetData",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                a = JSON.parse(data.d);
                                // 基于准备好的dom,初始化echarts实例
                                var myChart = echarts.init(document.getElementById('Count'));
                                $.each(a, function (i, item) {
                                    var series = {
                                        name: item.Name, type: "line", stack: "次数", data: [item.Jan, item.Feb, item.Mar, item.Apr, item.May, item.Jun, item.Jul, item.Aug, item.Sept, item.Oct, item.Nov, item.Dec]
                                    };
                                    dataname.push(item.Name);
                                    list.push(series);
                                });
                                // 指定图表的配置项和数据
                                option = {
                                    title: {
                                        text: '同行业部门证书发布分析',
                                        subtext: '数据来自今年内当前部门同行业发布证书数量'
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        formatter: function (params, ticket, callback) {
                                            var htmlStr = '';
                                            for(var i=0;i<params.length;i++){
                                                var param = params[i];
                                                var xName = param.name;//x轴的名称
                                                var seriesName = param.seriesName;//图例名称
                                                var value = param.value;//y轴值
                                                var color = param.color;//图例颜色
            
                                                if(i===0){
                                                    htmlStr += xName + '<br/>';//x轴的名称
                                                }
                                                htmlStr +='<div>';
                                                //为了保证和原来的效果一样,这里自己实现了一个点的效果
                                                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            
                                                //圆点后面显示的文本
                                                htmlStr += seriesName + ':' + value + '次';
            
                                                htmlStr += '</div>';
                                            }
                                            return htmlStr;
                                        }
                                        
                                    },
                                    legend: {
                                        data: dataname
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    toolbox: {//工具栏,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
                                        feature: {//各工具配置项。
                                            dataView: {
                                                show: true,
                                                title: '数据表格',
                                                readOnly: true,
                                                optionToContent: function (opt) {
                                                    var  axisData = opt.xAxis[0].data; //坐标数据
                                                    var series = opt.series; //折线图数据
                                                    var tdHeads = '<td  style="padding: 10 10px">时间</td>'; //表头
                                                    var tdBodys = ''; //数据
                                                    series.forEach(function (item) {
                                                        //组装表头
                                                        tdHeads += '<td style="padding: 10 10px">'+item.name+'</td>';
                                                    });
                                                    var table = '<table class="table table-border table-bordered table-bg table-hover table-sort"><tbody><tr>' + tdHeads + ' </tr>';
                                                    for (var i = 0, l = axisData.length; i < l; i++) {
                                                        for (var j = 0; j < series.length; j++) {
                                                            //组装表数据
                                                            tdBodys += '<td>'+series[j].data[i]+'</td>';
                                                        }
                                                        table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+tdBodys+'</tr>';
                                                        tdBodys = '';
                                                    }
                                                    table += '</tbody></table>';
                                                    return table;
                                                }
                                            },
                                            magicType:{
                                                show:true,
                                                type: ['line', 'bar', 'stack', 'tiled', 'pie']
                                            },
                                            restore: {//配置项还原。
                                                show: true
                                            },
                                            saveAsImage: {//保存为图片。
                                                show: true
                                            }
                                        }
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月', ]
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: { formatter: '{value}次' }

                                    },
                                    series: list
                                };
                                

                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            },
                            error: function (err) {
                                alert(err);
                            }
                        });
                    },
                    methods: {

                    }
                })
        })

    </script>

<div style="height:100%">
    <div id="Count" style="width:100%;height:380px;"></div>
    </div>

Logo

前往低代码交流专区

更多推荐