关闭

Echart-3 学习总结

标签: Echart-3 ajax
1266人阅读 评论(0) 收藏 举报
分类:

Echart 是百度开发的,不用收费。提供了丰富的图表类型。本质上讲就是一个js库了,至于底层是什么底层依赖轻量级的 Canvas 类库 ZRender,这东西也不懂。

然后其实我认为最好的学习Echart方法就是按照人家给出的API来弄。看着例子来搞效果会好点。http://echarts.baidu.com/


先说一下怎么实现一个小demo 虽然官网上有,不过我其实不太会require导入,所以就直接单文件引入了。

对我这个初学者来说,只要记住三句代码就应该可以很简单的写出一个demo来,创建js文件如下所示。

$(function () {
    var myChart = echarts.init(document.getElementById('dealProgressBar'));
    var banli = ['已交办','处理中','已反馈','已办理'];
    // 指定图表的配置项和数据
    var option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        xAxis : [
            {
                type : 'category',
                data : banli,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    textStyle: {
                        color: '#000000',
                        fontStyle: 'normal',
                        fontWeight: 'bold'
                    }
                }
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '30%',
                itemStyle: {
                    normal: {
                        label: {
                            position:'top',
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
                    }
                },
                data:[334, 390, 330, 220]
            }
        ]
    };
    myChart.setOption(option);
})

var myChart = echarts.init(document.getElementById('dealProgressBar'));
这句意思就是初始化在 id为dealProgressBar里面的代码 一般存放图表的容器为一个div 然后给定固定大小,百分比和实际像素都可以。

option这个变量里面包含这个图表能呈现出的所有属性,它其实是以json 格式来保存的。如果要写后端java对应的option可以参考:http://blog.csdn.net/isea533/article/details/43225717

myChart.setOption(option);

就这样。给初始化后的加入option就能展现了。 

说一下点击事件吧

    myChart.on('click', function (params) {
        // 控制台打印数据的名称
        console.log(params.name);
        alert(params.name+params.seriesType + params.seriesIndex +params.seriesName+params.componentType);
        myChart.clear();
        myChart.setOption(option);
    });
点击的属性可以去官网查询http://echarts.baidu.com/api.html#events
如果与后台交互目前 我只知道ajax 通过点击不同的地方的名字通过加入属性 发送给后台 后台处理后返回option就好。
                      var kind = encodeURI($("#liangyou" ));
                       alert(kind);
                     $.ajax({
                           type: "Get",
                          url: "http://localhost:8080/embd/getline2" ,
                           dataType: "json",
                           data:{ "liangyou":kind},
                           success: function(data){
                                     alert(data);
                                     dataRice = obj;
                                     mychart.setoption(dataRice);
                           },
                           error: function(data){
                                     alert( "请求数据失败" );
                           }    
                           });

url 发送路径 和 data的参数。成功返回option 就这样吧。


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:50417次
    • 积分:1079
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:20篇
    • 译文:0篇
    • 评论:25条
    最新评论