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


EChart 2升级EChart 3注意事项

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

可视化篇:Echarts3.0引入百度地图(更新)

perface 由于一直抽不开身,留言区以及不少朋友都在问如何在Echarts3.0里引入百度地图,由于之前写的是Echart32.0如何引入,但2.0目前已不再更新,所以这段时间断断续续研究了...
  • yc_1993
  • yc_1993
  • 2016年09月04日 13:43
  • 17292

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

echarts之tooltip-trigger

名称 类型 默认值 可选值 效果 trigger string ‘item’ ‘item’,’axis’ 触发类型,默认数据触发 当trigger为’...
  • huanbia
  • huanbia
  • 2015年12月09日 18:50
  • 10281

dhm-echarts图表架构与说明书

dhm-echarts通过自定义div,ajax提交数据实现echarts图表展示.

echarts3的关系图遇到的坑

在echarts3的官方案例中找到自己想要的关系图,在使用过程中,因对其文档不熟悉以及自己不是一个前端,所以有点丈二和尚摸不着头脑,经过本渣的实践,直接将copy案例代码,本地是无法运行的。 遇到的坑...

echart3.0实现折线图转折点闪烁效果

在echart2.0中可以很简单的实现折线图的转折点闪烁效果,只要在series中数据添加markPoint:{symbol:'emptyCircle', effect:{show:true}}即可,...
  • H_HV_V
  • H_HV_V
  • 2016年11月11日 14:22
  • 1605

echarts3写法

燃尽图,甘特图,鱼骨图

1. 燃尽图        燃尽图(burn down chart)是在项目完成之前,对需要完成的工作的一种可视化表示。燃尽图有一个Y轴(工作)和X轴(时间)。理想情况下,该图表是一个向下的曲线,随...
  • p_ython
  • p_ython
  • 2017年07月05日 08:17
  • 636

echarts3 map

echart 地图的用法 一:初识 先上一张地图裸图,最简单的配置。 使用地图前,根据需要下载地图的geo json文件。http://echarts.baidu.com/download.html ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Echart-3 学习总结
举报原因:
原因补充:

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