自定义系列ECharts Gallery

20:11:45图表已生成
代码
// const Y1_COORD = [530, 730, 900, 1040, 1040, 900, 730, 530]
const Y_COORD = [500, 595, 649, 667, 667, 649, 595, 500]
const STAGES = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
const STAGE_COUNT = 4
const PARENT_STAGE_HEIGHT = 70
const PARENT_STAGE_GAP = 20
const CHILD_STAGE_HEIGHT = 50
const CHILD_STAGE_GAP = 10

const DEL_ICON = 'M755.330958 336.707648l-20.329001 0 0 510.511089-67.077721 0L667.924235 336.707648 556.122917 336.707648l0 510.511089-67.081815 0L489.041102 336.707648 377.248993 336.707648l0 510.511089-67.077721 0L310.171272 336.707648l-42.688241 0c-50.514487 0-91.471294-0.728594-91.471294 0L176.011736 870.099864c0 49.105395 40.957831 88.914052 91.471294 88.914052l487.838717 0c50.52779 0 91.467201-39.808658 91.467201-88.914052L846.788949 336.707648C846.793042 332.960301 805.862841 336.707648 755.330958 336.707648L755.330958 336.707648zM890.73381 176.440501 690.283476 176.440501l0-54.552453c0-31.620162-56.511062-57.243749-89.446171-57.243749l-178.873923 0c-32.917714 0-89.432869 25.623587-89.432869 57.243749l0 54.552453-200.414519 0c-25.15389 0-45.537126 20.025079-45.537126 44.722574 0 24.684192 20.37812 44.709271 45.537126 44.709271l758.617817 0c25.127284 0 45.50131-20.025079 45.50131-44.709271C936.225911 196.46558 915.851884 176.440501 890.73381 176.440501L890.73381 176.440501zM600.841398 176.440501 421.972591 176.440501l0-22.35924 178.86983 0L600.842421 176.440501 600.841398 176.440501zM600.841398 176.440501'
const COLOR = ['#a4d3ff', '#77baff', '#4495f9', '#0d70ee', '#0451c6', '#7f91b4', '#99acd0', '#b4c7ec']
const COLOR_STAGE = '#ecf4fc'
const STAGE_BORDER_RADIUS = 4
const TRIANGLE_SIZE = 9

// generate stage data
let data = []
echarts.util.each(STAGES, function(category, index) {
    let basePosition = Y_COORD[index]
    for (let i = 0; i < STAGE_COUNT; i++) {
        let duration = i === 0 ? PARENT_STAGE_HEIGHT : CHILD_STAGE_HEIGHT
        let textName = category + (i === 0 ? '期' : i)

        data.push({
            name: textName,
            value: [index, basePosition, basePosition -= duration, textName, i],
            itemStyle: {
                normal: {
                    color: i === 0 ? COLOR[index] : COLOR_STAGE
                }
            }
        })
        basePosition = basePosition - (i === 0 ? PARENT_STAGE_GAP : CHILD_STAGE_GAP)
    }
})

function renderItem(params, api) {
    let categoryIndex = api.value(0)
    let start = api.coord([categoryIndex, api.value(1)])
    let end = api.coord([categoryIndex, api.value(2)])
    let width = api.size([1, 0])[0] * 0.6
    let height = end[1] - start[1]
    let x = start[0] - width / 2
    let y = start[1] + height / 2

    let rectShape = echarts.graphic.clipRectByRect({
        x: x,
        y: y,
        width: width,
        height: height,
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    })
    rectShape.r = STAGE_BORDER_RADIUS

    let isFstStage = api.value(4) === 0

    let textSize = isFstStage ? 16 : 14
    let textColor = isFstStage ? '#fff' : '#34495e'

    let btnDelSize = isFstStage ? 16 : 12
    let btnDelX = start[0] + width / 2 + btnDelSize
    return {
        type: 'group',
        children: [{
                type: 'path', // 此处设置svg路径类型
                shape: {
                    pathData: isFstStage ? "m63.1875,76.61313l17,-29.75l17,29.75l-34,0z" : '', // 三角形
                    width: TRIANGLE_SIZE,
                    height: TRIANGLE_SIZE,
                    x: x + width / 2 - TRIANGLE_SIZE / 2,
                    y: y - TRIANGLE_SIZE + 1
                },
                style: api.style()
            },
            {
                type: 'rect',
                shape: rectShape,
                // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了
                // option 中 itemStyle 的配置和视觉映射得到的颜色。
                style: api.style()
            },
            {
                type: 'text',
                style: {
                    x: x + width / 2,
                    y: y + height / 4,
                    textAlign: 'center',
                    text: api.value(3),
                    fill: textColor,
                    textFont: api.font({
                        fontSize: textSize
                    })
                }
            },

            {
                type: 'path',
                name: 'btn-del',
                shape: {
                    pathData: DEL_ICON,
                    x: -8,
                    y: -8,
                    width: btnDelSize,
                    height: btnDelSize
                },
                position: [btnDelX, y + height / 2],
                style: api.style({
                    fill: '#99a4ae'
                })
            }
        ]
    }
}


option = {
    title: {
        text: '自定义系列',
    },
    color: COLOR,
    backgroundColor: '#fff',
    grid: {
        left: '5%'
    },
    tooltip: {
        formatter: function(params) {
            return params.marker + params.value[3];
        }
    },
    yAxis: {
        max: 750,
        name: '价值',
        nameTextStyle: {
            nameGap: 0,
            fontSize: 14,
            color: '#34495e'
        },
        axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [8, 8],
            lineStyle: {
                width: 2,
                color: '#dce5ed'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            lineStyle: {
                type: 'dotted',
                color: ['#dbdcdb'],
                opacity: 0.5
            }
        }
    },
    xAxis: {
        name: '阶段',
        nameTextStyle: {
            nameGap: 0,
            fontSize: 14,
            color: '#34495e'
        },
        axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [8, 8],
            lineStyle: {
                width: 2,
                color: '#dce5ed'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: ['#eff1f4']
            }
        },
        data: STAGES
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        encode: {
            y: [1, 2],
            x: 0
        },
        data: data
    }, {
        data: Y_COORD,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        animation: false,
        symbolSize: 14,
        itemStyle: {
            color: (params) => {
                return COLOR[params.dataIndex]
            },
            borderWidth: 4,
            borderColor: '#fff'
        },
        lineStyle: {
            color: '#eff1f4'
        },
        silent: true
    }]
};

// 执行删除
myChart.on('click', {
    element: 'btn-del'
}, function(params) {
    console.log(params);
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
