Ext JS 和Echart结合

最新推荐文章于 2021-04-02 05:30:41 发布

弄码哥

最新推荐文章于 2021-04-02 05:30:41 发布

阅读量818

点赞数 1

文章标签： C# EXT .net Echart

本文链接：https://blog.csdn.net/wbb1990/article/details/77198571

版权

最近由于需要，写了一个C#版的EXT JS 和 Echart的结合，通过一般处理程序动态的获取数据值，比较粗糙，没有深化

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <script src="../../../echarts/doc/asset/js/jquery.js"></script>
    <script src="../../../echarts/build/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="height:550px;"></div>
   
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        var x = new Array();
        var y = new Array();
        var TitleData = new Array();
        var maxValue = 1;
        var minValue = 1;
        var maxName = "";
        var minName = "";
        // 获取原始数据
        $.ajax({
            type: 'post',
            url: "EChart_Column.ashx",
            //data: { type: "2" },
            dataType: 'JSON',
            async: false,//同步执行
            success: function (data) {
                debugger;
                // 根据数据库取到结果拼接现在结果
                var a = '';
                var b = '';
                $.each(data.children, function (i, val) {
                    debugger;
                    this;
                    x.push(val.processname);
                    y.push(val.num);

                    if (val.num > maxValue) {
                        maxValue = val.num;
                        maxName = val.processname;
                    }
                    else if (val.num <= minValue) {
                        minValue = val.num;
                        minName = val.processname;
                    }
                });
            }
        });

       
        require.config({
            paths: {
                 echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
         [
           'echarts',
           'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
         ],
         function (ec) {
             // 基于准备好的dom，初始化echarts图表
             var myChart = ec.init(document.getElementById('main'));
             //myChart.showLoading({
             //    text: '加载中...',
             //    effect: 'whirling'
             //});
             //设置数据 
             var option = {
                 //设置标题
                 title: {
                     text: '系统流成使用',
                     subtext: '流程使用最多:' + maxName+':' + maxValue + '\n' + '流程使用最少:' + minName+':' + minValue,
                     padding: 5,
                     
                 },
                 //设置提示
                 tooltip: {
                     show: true
                 },
                 //设置图例
                 legend: {
                     data: ['各流程使用数量'],
                    
                 },
                 //控制文字域显示的高度
                 grid:
                     {
                    x: 100,
                    x2: 200,
                    top : 100,    //距离容器上边界40像素
                    bottom: 70,   //距离容器下边界30像素
                    y2: 140,
                    y:100
                     },
                
                 //设置坐标轴
                 xAxis: [
                   {
                       type: 'category',
                       data: x,
                       zleval:5,
                      
                       rotate: -50,
                       axisLabel: {
                           show: true,
                           //interval:'auto',
                           rotate: 50
                           ,
                           height:100,
                           textStyle: {
                               fontStyle: 'normal',
                               baseline: 'bottom',
                               align: 'left'

                               
                           }
                       }
                   }
                 ],
                 yAxis: [
                   {
                       type: 'value'
                   }
                 ],
                 //设置数据
                 series: [
                   {
                       "name": "发起流程数量",
                       "type": "bar",
                       "data": y
                   }
                 ]
             };

             // 为echarts对象加载数据 
             myChart.setOption(option); 
         }

       
       );


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

效果图

这个可以继续深化