echarts做渐变色象形图

最新推荐文章于 2024-05-28 21:17:54 发布

jinggaoniao

最新推荐文章于 2024-05-28 21:17:54 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/jinggaoniao/article/details/107958695

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

要实现的效果如下图所示：

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts 渐变色象形图</title>
    <script src="echarts.min.js"></script>
    <style>
        div{width: 800px;float: left;}
    </style>
</head>
<body>
<div id="pictorialBar" style="height:700px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pictorialBar'));

    // 指定图表的配置项和数据
    let colorStopsArray = [
        [{
            offset: 0,
            color: 'rgba(204,251,255, 0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(239,150,197, 0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(249,149,127, 0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(242,245,208, 0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(234,229,201, 0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(108,198,203, 0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(159,165,213, 0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(232,245,200, 0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(200,115,255, 0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(174,186,248, 0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(12,123,179, 0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(242,186,232, 0.8)', //  100%  处的颜色
            },
        ],
    ];

    let riskName = ['无风险','低风险','中级风险','中高级风险','高级风险','危急风险'];
    let riskData = [123, 60, 25, 18, 12, 9];

    option = {
        title: {
            text: '个数(个)',
            x: '2%',
            y: '2%',
            textStyle: {
                color: '#1890FF',
                fontSize: 14,
                fontWeight: 400,
            },
        },
        backgroundColor: '#fff',
        grid: {
            left: '5%',
            top: '8%',
            bottom: '10%',
            right: '5%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
            },
            extraCssText:'width:100px;height:60px;'
        },
        xAxis: {
            data: riskName,
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(45, 140, 240, 0.65)',
                    width: 1, //这里是为了突出显示加上的
                },
            },
            axisLabel: {
                show: true,
                interval: 0, //代表显示所有x轴标签显示
                rotate: 0, //代表逆时针旋转45度
                margin: 8,
                textStyle: {
                    color: '#1890FF',
                    fontSize: 14,
                    fontWeight: 400,
                },
            },
        },
        yAxis: [{
            splitNumber: 2,
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(24,144,255, 0.15)',
                    width: 1, //这里是为了突出显示加上的
                },
            },
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#1890FF',
                    fontWeight: 400,
                    fontSize: 14,
                },
            },
            splitArea: {
                show: false,
                areaStyle: {
                    color: 'rgba(255,255,255,.5)',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(24,144,255, 0.15)',
                    width: 1,
                    type: 'solid',
                },
            },
        }, ],
        series: [{
            name: '个数',
            type: 'pictorialBar',
            barCategoryGap: '-50%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
                show: false,
                position: 'top',
                distance: 15,
                color: '#1890FF',
                fontWeight: 'bolder',
                fontSize: 14,
            },
            itemStyle: {
                normal: {
                    color: function(data) {
                        var obj = {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                colorStopsArray[data.dataIndex][0],
                                colorStopsArray[data.dataIndex][1],
                            ],
                            global: false, //  缺省为  false
                        }

                        return obj
                    },
                },
                emphasis: {
                    opacity: 1,
                },
            },
            data: riskData,
            z: 10,
        }, ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

jinggaoniao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts做渐变色象形图

要实现的效果如下图所示：话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echarts 渐变色象形图</title> <script src="echarts.min.js"></script> <style> div{width
复制链接

扫一扫