echarts 常见问题与例子,柱状图,圆环,圆角,tooltip

3,028 阅读2分钟

1. echarts 双层横向柱形图,圆角,渐变色。

option = {
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '10%',
        containLabel: true
    },
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            textStyle: {
                color: 'black'
            },
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: ['大米', '玉米']
    }],
    series: [{
            name: '金额',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                },
            },
            barWidth: 20,
            data: [50000000, 22000000]
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [50000000, 50000000],
            itemStyle: {
                normal: {
                    color: 'gray',
                    barBorderRadius: 30,
                }
            },
        },
    ]
};

image.png

2. 柱形图右侧或者上侧增加数值

option = {
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '10%',
        containLabel: true
    },
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            textStyle: {
                color: 'black'
            },
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: ['大米', '玉米']
    },{
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
            textStyle: {
                color: 'gray',
                fontSize: '12'
            },
        },
        data: [50000000, 22000000]
    }],
    series: [{
            name: '金额',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                },
            },
            barWidth: 20,
            data: [50000000, 22000000]
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [50000000, 50000000],
            itemStyle: {
                normal: {
                    color: 'gray',
                    barBorderRadius: 30,
                }
            },
        },
    ]
};

image.png

3. 圆环

option = {
    title: [
        {
            text: '已完成',
            x: 'center',
            top: '55%',
            textStyle: {
                color: 'gray',
                fontSize: 16,
                fontWeight: '100',
            },
        },
        {
            text: '75%',
            x: 'center',
            top: '38%',
            textStyle: {
                fontSize: '60',
                color: 'gray',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '600',
            },
        },
    ],
    polar: {
        radius: ['42%', '52%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    series: [
        {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 50,
            showBackground: true,
            // 底下环颜色
            backgroundStyle: {
                color: 'gray',
            },
            data: [80],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#16CEB9',
                        },
                        {
                            offset: 1,
                            color: '#6648FF',
                        },
                    ]),
                },
            },
        },
    ],
};

image.png

4.echarts 移除页面后tooltip还存在问题

// 通过hideTip 隐藏tooltip
myChart.dispatchAction({
    type: 'hideTip'
});
// 隐藏竖线
myChart.dispatchAction({
    type: 'updateAxisPointer',
    currTrigger: 'leave'
})

github.com/apache/echa…