Baidu圖表插件--Eharts使用（柱狀圖）

官網鏈接:http://echarts.baidu.com/index.html

官網的demo，api都很詳細；我就分享下我的學習步驟

首先定義一個顯示圖標的區域：

<div id="main1" style="width: 600px;height:400px;"></div>

js代碼先貼上：

其中ajax返回的是string類型的值；格式：1，2，3，4|11，22，33，44

然後在js中處理成echarts能夠識別的格式（其實就是轉成數組）

<script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main1'));
    var stock = [];
    var capacity = [];
    var realnumb = [];
    var option;
    var temp = [];

    var durl = encodeURI('@Url.Action("GetData", "Test")[email protected]');
    $.ajax({
        type: 'get',
        
        url: durl,//請求數據的地址
        success: function (data) {

            temp = data.split("|");
            stock = temp[0].split(",");
            capacity = temp[1].split(",");

            option = {
                title: {
                    text: '測試數據',
                    subtext: '數據'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['x1', 'x2']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    //data: ['1', '2', '3', '4', '5', '6']

                    data: stock
                },
                series: [

                    {
                        clickable: true,
                        name: '定義一',
                        type: 'bar',
                        data: capacity
                    },
                    {
                        clickable: true,
                        name: '定義二',
                        type: 'bar',
                        data: [10, 10, 15, 15, 10, 5]
                    }
                ]
            };
            myChart.setOption(option);
        },
        error: function (e) {
        }
    });

    myChart.on('click', function (params) {

        //柱裝點擊事件，params.name:y軸值，arams.seriesName:類目
        alert(params.name + " " +params.seriesName);
    });
   
   
    </script>

　最後最坑人的是柱狀圖的點擊事件，網上搜到的都是同一種寫法，都報錯；後來在官網找到了click事件和參數說明：貼上官網的說明

地址：http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

滑鼠事件的處理

ECharts 支持常規的滑鼠事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。下麵先來看一個簡單的點擊柱狀圖後打開相應的百度搜索頁面的示例。

// 基於準備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據
var option = {
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
// 處理點擊事件並且跳轉到相應的百度搜索頁面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

所有的滑鼠事件包含參數 params，這是一個包含點擊圖形的數據信息的對象，如下格式：

{
    // 當前點擊的圖形元素所屬的組件名稱，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列類型。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
    seriesType: string,
    // 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
    seriesIndex: number,
    // 系列名稱。當 componentType 為 'series' 時有意義。
    seriesName: string,
    // 數據名，類目名
    name: string,
    // 數據在傳入的 data 數組中的 index
    dataIndex: number,
    // 傳入的原始數據項
    data: Object,
    // sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
    // dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 還是 edge 上。
    // 其他大部分圖表中只有一種 data，dataType 無意義。
    dataType: string,
    // 傳入的數據值
    value: number|Array
    // 數據圖形的顏色。當 componentType 為 'series' 時有意義。
    color: string
}