Echart-3 学习总结

原创 2016年08月31日 09:29:58

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 就这样吧。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ECharts 3

http://www.oschina.net/news/68671/echarts-3-beta echart图表控件配置入门(一) 现在主流的web图表控件主要有hightchart、f...

echarts3 省份显示问题

因为在做数据可视化的过程中,查询到echarts是个不错的选择,特别是有支持的地图显示功能。 但是在使用过程中,按照示例代码 var chart = echarts.init(document....

EChart 2升级EChart 3注意事项

本文是根据自己的实践进行总结过来的,是不完全的所有升级注意事项。 如果想直接看结果,请移步到第4部分内容1.背景EChart 3是在2015年12月发布的新版本,相比较EChart 2,主要的变化总...

JSON对象目录 总览概括

JSON对象 来自《JavaScript 标准参考教程(alpha)》,by 阮一峰 目录 JSON格式 JSON.stringify() 基本用法 第二个参数 第三...

关于Echarts的操作

1,首先声明,一下的操作基本上都是基于3.0以上的版本 2,去Echarts官网上下载所需要的原材料:Echarts的js文件,以及可能会用的Map的js或json文件,然后放入项目中,在对应的js...

echart3的demo

  • 2016-04-03 12:02
  • 3.41MB
  • 下载

echart3 demo

  • 2017-05-04 16:12
  • 8.27MB
  • 下载

OL3和echart的结合

本文讲述OL3结合echart,实现echart中的炫酷特效。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)