Echart-3 学习总结

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);
})@H_502_14@ 

 
var myChart = echarts.init(document.getElementById('dealProgressBar'));@H_502_14@这句意思就是初始化在 id为dealProgressBar里面的代码 一般存放图表的容器为一个div 然后给定固定大小，百分比和实际像素都可以。 
 
option这个变量里面包含这个图表能呈现出的所有属性，它其实是以json 格式来保存的。如果要写后端java对应的option可以参考：http://www.jb51.cc/article/p-qsjegcdf-hs.html 
 
myChart.setOption(option);@H_502_14@ 
就这样。给初始化后的加入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);
  });@H_502_14@点击的属性可以去官网查询http://echarts.baidu.com/api.html#events@H_502_14@ 
如果与后台交互目前 我只知道ajax 通过点击不同的地方的名字通过加入属性 发送给后台 后台处理后返回option就好。@H_502_14@ 
                      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( "请求数据失败" );
                           }    
                           });
@H_502_14@url 发送路径 和 data的参数。成功返回option 就这样吧。@H_502_14@ 原文链接：https://www.f2er.com/ajax/161888.html

猜你在找的Ajax相关文章