Echarts在线免费图表

 
            const Data = [{ "name": "TL202209160032", "title": "检验入库", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160033", "title": "阳极氧化", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160034", "title": "刻字", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160035", "title": "检验入库", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160036", "title": "阳极氧化", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160037", "title": "刻字", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160038", "title": "钳工钻孔铆销", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160039", "title": "去刺镶轴", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160040", "title": "转装配连接", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160041", "title": "检验入库", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160042", "title": "阳极氧化", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160043", "title": "刻字", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160044", "title": "精车外圆、端面", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160045", "title": "钳工钻孔铆销", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160046", "title": "去刺镶轴", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }, { "name": "TL202209160047", "title": "转装配连接", "good": 0, "status": 0, "materialWaste": 0, "IndustrialWaste": 0 }];
// const Data = []
// const blue = '#145b7d';
const blue = 'black';
const grey = '#90d7ec';
const Transparent = 'transparent';
const w = window.document.activeElement.clientWidth;
const _rw = w / 1920;
const _rh = window.document.activeElement.clientHeight / 1080;

const xAxis = Data.map((m,i) => (m.title));
const list = Data.map(m => ({
    value: m.title, itemStyle: {
        color: Transparent
    },
    symbolSize:[60,30],
    label: {
        color: m.status === 1 ? blue : grey
    },
    good: m.good,
    materialWaste: m.materialWaste,
    IndustrialWaste: m.IndustrialWaste
}))

const links = Data.map((m, i) => ({
    source: i + '',
    target: i + 1 + '',
}));
links.push(
    {
        source: links.length  + '',
        target: links.length + 1+'',
    }
)
links.push(
    {
        source: links.length  + '',
        target: links.length +1+ '',
    }
)
console.log(links)

option = {
    backgroundColor:"black",
    dataZoom: [
        {
            start: 0,
            end: 40,
            type: "inside",
            zoomOnMouseWheel: false
        },
        {}
    ],
    grid:{
        left:'10%',
        right:'10%',
        width:'80%'
    },
    tooltip: {
        show: false
    },
    xAxis: {
        type: 'category',
        data: ['Start', ...xAxis, 'End'],
        boundaryGap:false,
        // axisLine: {
        //     show: false,
        // },
        // axisLabel: {
        //     show: false
        // },
        // axisTick: {
        //     show: false
        // }
    },
    yAxis: [{
        type: 'category',
        data: ['1'],
        // axisLine: {
        //     show: false,
        // },
        axisLabel: {
            show: true,
            color:'white'
        },
        // axisTick: {
        //     show: false
        // }
    },{
        type: 'category',
        data: ['1'],
        // axisLine: {
        //     show: false,
        // },
        axisLabel: {
            show: true,
            color:'white',
            
        },
        // axisTick: {
        //     show: false
        // }
    }],
    series: [
        {
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            label: {
                show: true,
                formatter: function (data) {
                    console.log(data)
                    if (data.dataIndex !== 1) {
                        return `${data.good | 0}\n${data.materialWaste | 0}\n${data.IndustrialWaste | 0}\n${data.name}`
                    } else {
                        return `${data.good | 0}\n${data.materialWaste | 0}\n${data.IndustrialWaste | 0}\n${data.name}`
                    }
                },
                fontSize: 27 * _rw,

            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [0, 10],
            symbolOffset:[10,0],
            data: [
                {
                    value: 'Start', itemStyle: {
                        color: Transparent
                    }, label: {
                        normal: {
                            color: blue,
                            fontSize: 40 * _rw,
                            formatter: function (data) {
                                return '';
                                return `{a|良品}\n${data.name}{a|料废}\n{a|工废}`
                            },
                            rich: {
                                a: {
                                    fontSize: 27 * _rw,
                                    color: 'white',
                                },
                            }
                        }

                    }
                },
                ...list,
                {
                    value: 'End',
                    itemStyle: {
                        color: Transparent
                    },
                    label: {
                        normal: {
                            color: 'white',
                            fontSize: 40 * _rw,
                            formatter: function (data) {
                                return ''
                                return `${data.name}`
                            },
                        }
                    }
                }
            ],
            links: links,
            lineStyle: {
                opacity: 0.6,
                width: 4,
                color: "#C8CFDF",
                curveness: 0,
            }
        }
    ]
};