echarts 使用方法

使用echarts首先要下載依賴包，在http://echarts.baidu.com/ 中選擇下載，在頁面中選擇要下載的文件，若是不知足須要也可在最下方選擇在線定製，選擇須要的內容進行下載。

我用的是一次所有引用的方法。

在頁面最開始引用剛纔下載的包（個人包在Content/js/文件夾下）

 <script src="~/Content/js/echarts.js" type="text/javascript"></script>

 

html裏面給一個div顯示圖片

<div id="bar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

 

而後就是畫圖了，我是把畫圖寫在函數裏面，調用便可。

function chart01(i, j, k, l, m) {
        // 柱狀圖數據
        var xinghao = [];
        var cjbaojing = [];
        var zjbaojing = [];
        var gjbaojing = [];
        var timebaojing = [];
        xinghao = i;
        cjbaojing = j;
        zjbaojing = k;
        gjbaojing = l;
        timebaojing = m;
        //用於存放圖表上的數據

        var myChart = echarts.init(document.getElementById('bar',theme));//容器對象，初始化接口、圖表所在節點
            

        var option = {       //設置圖標參數，這些參數在echarts官網上有不一樣圖形的不一樣option，可根據需                                        //要修改
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 座標軸指示器，座標軸觸發有效
                        type: 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['初級報警', '中級報警', '高級報警', '時間報警']
                },
                toolbox: {
                    show: true,
                    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: 'value'
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: xinghao  //這裏用的數組存放數據，直接寫數組名便可
                    }
                ],
                series: [
                    {
                        name: '初級報警',
                        type: 'bar',
                        stack: '總量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight'} } },
                        data: cjbaojing,    //這裏用的數組存放數據，直接寫數組名便可
                        barWidth: 30,       //柱圖寬度
                    },
                    {
                        name: '中級報警',
                        type: 'bar',
                        stack: '總量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: zjbaojing,   //這裏用的數組存放數據，直接寫數組名便可
                        barWidth: 30,       //柱圖寬度
                    },
                    {
                        name: '高級報警',
                        type: 'bar',
                        stack: '總量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: gjbaojing,    //這裏用的數組存放數據，直接寫數組名便可
                        barWidth: 30,       //柱圖寬度
                    },
                    {
                        name: '時間報警',
                        type: 'bar',
                        stack: '總量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: timebaojing,   //這裏用的數組存放數據，直接寫數組名便可
                        barWidth : 30,       //柱圖寬度
                    }
                ]
            };
            myChart.setOption(option);

        }

下面是效果圖，裏面的標籤是下載包的時候可選的。