Echarts，初步使用方法，整理，來自小丁

Echart初步使用方法

①   .首先第一步就是給echart騰出一個地方來，要有一個地方放置echart的展示。

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

②   .這樣姿勢找好之後就開始對模組以及JS的引用了。

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

其中的src裡面的路徑就是你要設定的相對路徑。我在這裡是這樣放置的所以引用的路徑是../js/echarts.js，如下圖所示：

好接下來就要寫JS指令碼了。

<script type="text/javascript">
//注意接下來的操作都是在JS裡面進行操作的
</script >

③   . 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑

require.config({
    paths: {
    echarts: '../js'
    }
});

這裡面的echarts：路徑就是上面圖的js路徑，裡面包含了chart這個資料夾，是指定根目錄。

④   . 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑

require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map',
            'echarts/chart/k'
        ],
        function (ec) {
            /*折線圖*/
            var myechart3 = ec.init(document.getElementById("mainLine2"));

            myechart3.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: false,
                xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['第一週', '第二週', '第三週', '第四周']
            }
    ],
                yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
    ],
                series: [
        {
            name: 'xxxx',
            type: 'line',
            data: (function () {
                var res = $('#data').val().split(",");
                return res;
            })()
        }
    ]
            });
        });

其中這裡面的require裡面設定的echarts正是你要引用的圖表的樣式。緊接著有個回撥函式，這個回撥函式用來建立echart物件，並設定option選項。

var myechart3 = ec.init(document.getElementById("mainLine2"));

建立並初始化一個echart物件，並且呼叫setOption方法進行設定option選項。

由龐順龍最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。