零基礎(chǔ)學(xué)習(xí)用Echarts畫Gantt甘特圖

1. 參觀官方教程

要使用echarts 1.先引入echarts.js文件2.在body中定義一個div，設(shè)定高度和寬度3.在script中寫入echarts實(shí)例化的js代碼。

引用echarts步驟.png

放個官網(wǎng)教程鏈接：https://www.echartsjs.com/zh/tutorial.html#5%20分鐘上手%20ECharts

官方教程.png

引入echarts步驟.png

實(shí)例化說明.png

2. 運(yùn)行一個官方實(shí)例

Echarts官方例子說明1.png

Echarts官方例子說明2.png

3. 仿寫echarts

通過仿寫1和仿寫2 寫出一個自己的甘特圖！數(shù)據(jù)仿造1，option樣式仿造2

仿寫例子鏈接1：https://blog.csdn.net/sinat_35815038/article/details/86646809

仿寫例子.png

仿寫鏈接2：https://www.echartsjs.com/examples/en/editor.html?c=custom-profile
仿寫官方甘特圖.png

進(jìn)一步了解echarts方法
鏈接3：https://blog.csdn.net/sinat_35815038/article/details/86646809（可不看）

image.png

image.png

4. 調(diào)用本地json數(shù)據(jù)

仿造上面的例子1和2自己寫出一個甘特圖.里面的數(shù)據(jù)是寫死的，但是我們的數(shù)據(jù)又很多，要想在Echarts調(diào)用本地json數(shù)據(jù)。很簡單，只要加載jquery.js，使用getJSON方法就可以了。

jQueryjs引用

getJSON方法使用

雖然getJSON這張圖看起來很亂，但看完后絕對會明白怎么調(diào)用了！

5. 調(diào)option配置項(xiàng)

通過對option設(shè)置，決定哪些東西要展示，以及怎么展示。通過不斷調(diào)整配置項(xiàng)，能讓可視化界面更漂亮。這部分想深入的看官網(wǎng)。下圖是對script標(biāo)簽中內(nèi)容說明，能更好理解option配置項(xiàng)有什么。

配置項(xiàng)還有很多，這里就舉了一點(diǎn)。

script內(nèi)容

6. 遇到的問題

問題一：

y軸類目太多，沒法顯示全部，以及所有類目都擠在一個頁面出現(xiàn)

解決方法：

通過對y軸的min和max設(shè)置顯示要展示的類目數(shù)，然后通過datazoom進(jìn)行y軸的滾動，其中datazoon中要進(jìn)行end start顯示百分比調(diào)整


yAxis設(shè)置

datazoom設(shè)置

問題二：

series內(nèi)容中的label太長，沒法按照scalelimit省略到一些label標(biāo)簽

解決方法：

無，問題如圖所示
label標(biāo)簽太長

問題三：

要求顯示各個場所的顏色legend圖示

解決方法：

無。但想要的效果如圖：
legend圖示

7.附錄

json格式

json格式.jpg

代碼

這是china vis 2019挑戰(zhàn)一 對人員路徑圖進(jìn)行數(shù)據(jù)可視化分析代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:500px;">
</div>
<script>
    // 初始化
    var myChart = echarts.init(document.getElementById('main'));
    // 調(diào)用數(shù)據(jù)
    $.getJSON("GanttDay1.json",function (data) {
        scheduleData = data
       let yAxisData_task = []; //Y軸名稱-顯示task id
        let seriesData = [];
        //x軸開始和結(jié)束 時間
        let start_ = "07:00:00",
             end_ = "19:00:00";
        scheduleData.forEach((item,index) => {
        yAxisData_task.push(item.Task);
        let bgColor;
        item.list.forEach((listItem,listIndex) =>{
              //根據(jù)給resource場所分配顏色
            switch (listItem.Resource) {
                case "主會場":
                    bgColor = 'rgba(254, 164, 127)';
                    break;
                case "分會場A":
                    bgColor = 'rgba(249, 127, 81)';
                    break;
                case "分會場B":
                    bgColor = 'rgba(179, 55, 113)';
                    break;
                case "分會場C":
                    bgColor = 'rgba(109, 33, 79)';
                    break;
                case "分會場D":
                    bgColor = 'rgba(37, 204, 247)';
                    break;
            }
           // time 時分秒 轉(zhuǎn) 秒數(shù)便于計(jì)算停留時間
          // time_to_sec 省略
            let Start = time_to_sec(listItem.Start)
            let Finish = time_to_sec(listItem.Finish)
         //往seriesData裝數(shù)據(jù)和顏色樣式
            seriesData.push({
                name:listItem.Resource,
                value:[
                    index,
                    Start,
                    Finish
                ],
                itemStyle: {
                    normal: {
                        color: bgColor
                    }
                }
            })
        })
    });
        console.log(seriesData);
        //renderitem自定義模式的函數(shù)
        function renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;

            var rectShape = echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
                // 控制顯示的高度

            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
    }
        option  = {
            backgroundColor: '#26263C',
            //鼠標(biāo)滑過數(shù)據(jù)條，有提示框
            tooltip: {
                formatter: function(params) {
                    spendTime = sec_to_time( params.value[2] - params.value[1]);
                    return params.marker + params.name + "停留時間："+spendTime;
                }
            },
            //標(biāo)題居中和命名
            title: {
                text: '人員路徑圖',
                left: 'center'
            },
            grid: {
                top: 48,
                left: 100,
                right: 50,
                bottom: 50,
                height: 400,
            },
            //縮放
            dataZoom: [
                {
                    type: 'slider',
                    filterMode: 'weakFilter',
                    showDataShadow: false,
                    top: 460,
                    height: 20,
                    borderColor: 'transparent',
                    backgroundColor: '#e2e2e2',
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                    handleSize: "80%",
                    handleStyle: {
                        shadowBlur: 6,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2,
                        shadowColor: '#aaa'
                    },
                    labelFormatter: ''
                },
                {
                    type: 'inside',
                    filterMode: 'weakFilter'
                },
                {
                type: 'slider',
                yAxisIndex: 0,
                zoomLock: true,
                width: 10,
            //數(shù)據(jù)窗口范圍的起始百分比，start：98和95顯示出來的條數(shù)不同。98少，95多
                start: 99,
                end: 100,
                handleSize: 0,
                showDetail: false,
            }, {
                type: 'inside',
                id: 'insideY',
                yAxisIndex: 0,
                start: 99,
                end: 100,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true
            }],
            xAxis: {
                min: time_to_sec(start_),
                max: time_to_sec(end_),
                position: 'top',
                splitNumber: 4,
                scale: true,
                axisLabel: {
                    textStyle:{
                        color:"#ffffff"
                    },
                    // 使用函數(shù)模板，函數(shù)參數(shù)分別為刻度數(shù)值（類目），刻度的索引
                    formatter: function (value, index) {
                        // 格式化成月/日，只在第一個刻度顯示年份
                        //sec_to_time 秒數(shù)轉(zhuǎn)時分秒，可以更好在x軸顯示具體時間
                        var date = sec_to_time(value);
                        return date
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(233,233,233,0.1)'
                    }
                },
            },
            yAxis:{
                //min和max是關(guān)鍵,max越大，id顯示越多.max:300顯示300條數(shù)據(jù)
                min: 0,
                max: 500,
                data: yAxisData_task,
                axisTick: {show: false},
                splitLine: {show: true,lineStyle: {color:'rgba(233,233,233,0.1)'}},
                axisLine: {show: true},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color:"#ffffff"
                    },
                    fontSize: 14},
                
            },
            series:[{
                //類型定義為custom
                type:'custom',
                renderItem:renderItem,
                //顯示label標(biāo)簽
                label: {
                    normal: {
                        show: true,
                        // position: 'inside',
                        position: 'inside',
                        padding:4,
                        fontSize:10,
                        width:"50%",
                        formatter:function (params) {
                            return params.name
                        }
                    }
                },
                encode: {
                    x: [1, 2],
                    y: 0,
                },
                data:seriesData
            }]
        }
        myChart.setOption(option);
    })
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。