echarts笔记(view:4242)

一.tooltip

1, 字符串模板

formatter: '{b0}: {c0}<br />{b1}: {c1}'

2, 回调函数格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一个参数 params 是 formatter 需要的数据集。
第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。
第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

formatter: function (params, ticket, callback) {
    $.get('detail?name=' + params.name, function (content) {
        callback(ticket, toHTML(content));
    });
    return 'Loading';
}

tooltip: {
    formatter: function (params) {
        return params.marker + params.name + ': ' + params.value[3] + ' ms';
    }
}

tooltip: {
    position: 'top',
    formatter: function (p) {
        var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
        return format + ': ' + p.data[1];
    }
}

文档链接：http://echarts.baidu.com/option.html#tooltip.formatter

二.echart文档图示
http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html

三.custom类型设置

var myChart = echarts.init(document.getElementById('main'));

option = {
            title: {
		text: 'Profit',
		left: 'center'
            },
            tooltip: {}, 
            xAxis: {
                type:'time'
            },
            yAxis: {
            	type:'category',
            	data:['血糖','糖尿病','阑尾炎','心脏病','肾结石','胃溃疡','胆结石','胃穿孔','高血压','脑膜炎']
            },
            series: [{
                type: 'custom',
                renderItem: function(params, api) {
                    var start = api.coord([api.value(0),api.value(2)]);
                    //X轴对应数据部分第一维度的时候，encode部分可以省略，此处如果X轴非对应第一维度，比如api.value(1),那么encode部分就需要设置x: [1],
                    var style = api.style();
                    return {
                        type: 'rect',
                        shape: {
                            x: start[0],
                            y: start[1],
                            width: 20,
                            height: 20
                        },
                        style: style
                    };
                },
                dimensions: ['from', 'to', 'profit'],
                encode: {
                   /*x: [1],*/
	           /*y: [3],*/
	           /*tooltip: [0, 1, 2],*/
	           /*itemName: 3*/
                },
                data: [
                  {itemStyle:{normal:{color: "#4f81bd"}},value:['2017-11-01','2017-11-18','血糖']},
                  {itemStyle:{normal:{color: "#123234"}},value:['2017-11-05','2017-11-19','糖尿病']},
                  {itemStyle:{normal:{color: "#534564"}},value:['2017-11-06','2017-11-20','阑尾炎']}
                ]
            }]
        };

myChart.setOption(option);

xAxis,yAxis当(type:’category’)时候，必须设置data部分，而且data也只在type为category时候生效，type为value,time,log时候data不生效
renderItem内,api.value(0)对应X轴时候，可以省略 encode中x: [0]
容器的高度有可能导致x轴被遮挡而无法显示

四.禁用默认事件

this.chart = _chart
// 取消外层圆环上的鼠标事件
this.chart.on('mouseover',function(params){
  if (params.componentType=='series'&&params.seriesIndex==0){
    _chart.dispatchAction({
      type:'downplay',
      name:params.name
    })
  }
})

五.地理坐标系中，tooltips信息改为在label中设置

参考资料
http://echarts.baidu.com/index.html
http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html#
https://github.com/ecomfe/echarts/tree/master/extension/bmap
http://lbsyun.baidu.com/index.php?title=jspopular
http://dygraphs.com/date-formats.html

地球组件
https://www.npmjs.com/package/echarts-gl
https://echarts.apache.org/zh/option-gl.html#globe
https://efe.baidu.com/