图片标记

Echarts中markPoint用于标记特定的数据,比如地图上的描点,折线图的最值点等.第二版的Echarts支持用图片做为标记样式,例如

markPoint : {
    symbol: 'image:///assets/admin/images/details.png',
    itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'20'}}},emphasis:{label:{show:false}}},
    data : [
        {name : '详情', x:'10%', y:50, symbolSize:25}
    ]
}

markPoint 二级元素,在series内部

数据区域缩放

数据区域缩放可以让一个宽度固定的图表显示大量的数据,尤其是柱状图和折线图,可以通过拖动下方的按钮显示一定区域内的数据.

dataZoom:{
    orient:"horizontal", //横向
    show:true, 
    start:0, //默认起始点
    end:70 //默认结束点
},

dataZoom 一级元素,在option内部

动态添加数据

某些应用场景需要实时显示数据,后端通过长连接发送数据,前端可利用Echarts的接口对图表数据进行更新,如下

var axisData
timeTicket = setInterval(function (){
    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,''); //获取当前时间
    myChart.addData([
        [
            0, //数据系列索引(指定更新图表中哪条数据系列)
            Math.round(Math.random() * 100), //y轴的值
            true,  //是否删除原有数据,因为数据不断增加而宽度不变,一般选择true
            false, //从队列尾部插入
            axisData //x轴标签
        ]
    ]);
}, 800);

myChart变量即为前面为指定dom初始化时赋值的变量,因此这段代码加在myChart.setOption(option)之后 延迟时间不能过短

双纵轴

一张柱状图或折线图通常会显示多条数据系列,但是图表最多支持两条横向坐标轴和两条纵向坐标轴,我们可以给不同坐标轴指定单位和数据系列

yAxis : [
    {
        type : 'value'
    },
    {
        type : 'value'
    }
],
series : [
    {
        name:'总支出',
        type:'line',
        data:{{imlist}},
    },
    {
        name:'支出',
        type:'bar',
        data:{{imlist}},
        yAxisIndex: 1,  //就是这里
    }
]

关键在于series里有一组数据包含参数yAxisIndex

绑定事件(图表交互)

Echarts支持事件接口,这里是官方提供的调试页面. 举个例子

var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, function(param){
    var temp="";
    for(var i in param){
    temp += i+":"+eval("param."+i)+"\n"; 
    }alert(temp);
});

这是一个单击事件,显示这次事件获取的变量名和数值,我们可以通过检测变量名得知用户单击了图表的哪个部分,并由此指定响应事件.,比如

var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, function(param){
    for(var i in param){
        if(eval("param."+i) == '详情'){
            window.location.href = '/admin/cost_month'
        }
    }
});

用户点击’详情’就会跳转到详情页,这里的’详情’是饼图的一个markPoint.

绘图网格(图表区域)

Echarts图表被包装在一个指定高度的容器中,有时候图表显示的大小并不满足我们的需要,比如数据很多时,我们会把整个容器填满,减少空白区域,充分利用空间.此时需要指定grid参数

grid: {
    x:'10%',
    y:'15%',
    x2:'5%',
    y2:'25%'
},

x,x2,y,y2分别指横向和纵向方向的起始和结束坐标,支持的单位为px(数字类型),百分比(字符类型,如上) x2和y2是相对容器右(底)端的坐标,如上面例子中,图表横向宽度为容器宽度的85%. 当然也可以指定x和width两个参数以及y和height实现同样的效果

多图联动

多图联动的例子可以看这里.我这里只截取关键部分.

option = {
    ....
    legend: {
        data:['上证指数','虚拟数据']
    },
    series:[
    {
            name:'上证指数',
            type:'k',
            data:[ // 开盘，收盘，最低，最高
                [2320.26,2302.6,2287.3,2362.94],
            ]
        },
        {
            name:'虚拟数据',
            type:'bar',data:[]
        }
    ]
    .....
}

option2 = {
    ....
    legend: {
        data:['上证指数','虚拟数据'],
        y: -30 //将图例遮起来
    }
    series: [
        {
            name:'虚拟数据',
            type:'bar',
            symbol: 'none',
            data:[
                560434
            ],
        }
    ]
    ....
}
myChart1 = echarts.init(document.getElementById('DOMID1'));
myChart1.setOption(option1);
myChart2 = echarts.init(document.getElementById('DOMID2'));
myChart2.setOption(option2);

myChart1.connect(myChart2);
myChart2.connect(myChart1);

多图联动的一个关键是legend需是相同的,然后第一个图表中series也需将后面图表数据系列的参数加进来(可以不加数据),最后将两个图表connect起来.