記一下好用的js(二)

1.簡介

    倆個 是一個用純 JavaScript 編寫的一個圖表庫， 可以很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表，而且免費提供給我的學習、我的網站和非商業用途使用。

    均支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表，其中不少圖表能夠集成在同一個圖形中造成混合圖。

2.例子

 

option = {
    title: {
        text: '將來一週氣溫變化',
        subtext: '純屬虛構'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高氣溫','最低氣溫']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['週一','週二','週三','週四','週五','週六','週日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高氣溫',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低氣溫',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高點'
                    }]
                ]
            }
        }
    ]
};

3.效果圖

      地址:http://echarts.baidu.com/demo.html#line-marker

我比較喜歡echart，一個字帥，只要數據傳的格式正確，就ok，各類圖形分析，完美。