echart使用记录

ECharts详细说明 [url]http://elang0705.iteye.com/blog/2252577[/url]


[color=red][b]格式化提醒[/b][/color]
tooltip: {
trigger: 'item', // 单个显示，多个提示使用axis
//formatter: "{a} <br/>{c} ({d}%)"
formatter: function(params, ticket, callback){
alert("formatter");
//自己返回格式化信息
}
}

[color=red][b]echarts多图例子[/b][/color]
[url]http://www.oschina.net/question/2430036_2157470[/url]
一张图里面包含两个pie图

option1 = {
                title : {
                    text: '性别统计',
                    subtext: '纯属虚构',
                    x:'right'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['本科男','本科女','硕士男','硕士女']
                },
                series : [
                    {
                        name: '硕士',
                        type: 'pie',
                        radius : '55%',
                        center: ['35%', '30%'],
                        data:[
                            {value:250, name:'硕士男'},
                            {value:150, name:'硕士女'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '本科',
                        type: 'pie',
                        radius: '55%',
                        center: ['70%', '70%'],
                        data: [
                            {value: 500, name:'本科男'},
                            {value: 300, name: '本科女'}
                        ]
                    }
                ]
            };

            myChart1 = echarts.init(document.getElementById('canvas1'), globalEChartTheme);
            myChart1.setOption(option1);

一个柱状图 + 一个pie图

option1 = {
                "title": {"text": "采购统计排行", "subtext": "采购统计排行"},
                "tooltip": {"trigger": "axis"},
                "legend": {
                    "x": "left",
                    "y": "bottom",
                    "data": ["切割机V1", "PVC0.4", "PVC0.9"]
                },
                "toolbox": {
                    "show": true,
                    "orient": "vertical",
                    "x": "right",
                    "y": "center",
                    "feature": {
                        "mark": {"show": true},
                        "dataView": {"show": true, "readOnly": false},
                        "magicType": {"show": true, "type": ["line", "bar", "stack", "tiled"]},
                        "restore": {"show": true},
                        "saveAsImage": {"show": true}
                    }
                },
                "calculable": true,
                "xAxis": [{"type": "category", "data": ["采购数量统计排名"]}],
                "yAxis": [{"type": "value"}],
                "series": [
                    {
                        "type": "bar",
                        "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]},
                        "markLine": {"data": [{"type": "average", "name": "平均值"}]},
                        "name": "切割机V1",
                        "data": [13]
                    }, {
                        "type": "bar",
                        "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]},
                        "markLine": {"data": [{"type": "average", "name": "平均值"}]},
                        "name": "PVC0.4",
                        "data": [1313]
                    }, {
                        "type": "bar",
                        "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]},
                        "markLine": {"data": [{"type": "average", "name": "平均值"}]},
                        "name": "PVC0.9",
                        "data": [1125]
                    },
                    {
                        name: '本科',
                        type: 'pie',
                        radius: '10%',
                        center: ['70%', '20%'],
                        data: [
                            {value: 13, name: '切割机V1'},
                            {value: 1313, name: 'PVC0.4'},
                            {value: 1125, name: 'PVC0.9'}
                        ]
                    }]
            };
            myChart1 = echarts.init(document.getElementById('canvas1'), globalEChartTheme);
            myChart1.setOption(option1);

柱状图每个周期对应单独的一个并图
[url]http://echarts.baidu.com/demo.html#mix-timeline-finance[/url]