文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何利用echarts画雷达图和折柱混合

2024-04-02 19:55

关注

导语

通常在根据设计图写echarts的时候,很多效果是官方实例里没有的,我在代码里加上了一些常用的效果,并做了注释。

雷达图

var option = {
    radar: [{
            //数据名称
            indicator: [{
                            text: 'AIS未登记'
                    },
                    {
                            text: '巡逻发现'
                    },
                    {
                            text: '群众举报'
                    },
                    {
                            text: '其他'
                    },
                    {
                            text: '雷达发现'
                    }
            ],
            center: ['50%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
                    formatter: '【{value}】',
                    color: '#428BD4'//颜色
            },
            splitArea: {
                    areaStyle: {
                            color: ['#7BD685', '#34B54B', '#70DEB3', '#4FC7A0'], //内部圈圈的颜色
                            shadowColor: 'rgba(0, 0, 0, 0.1)', //内部线的颜色
                            shadowBlur: 10
                    }
            },
            //线颜色
            axisLine: {
                    lineStyle: {
                            color: '#428BD4'
                    }
            },
            splitLine: {
                    lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                    }
            }

    }],
    //鼠标放上悬浮展示的内容
    tooltip: {
            trigger: 'item'
    },
    series: [{
            name: '表特征分布',
            type: 'radar',
            symbol: 'circle', //拐点样式
            symbolSize: 6, // 拐点的大小
            emphasis: {
                    lineStyle: {
                            width: 4
                    }
            },
            data: [{
                    value: [60, 5, 1, 1, 1500],
                    name: '',
                    areaStyle: {
                       color: '#C1BFA1'
                    }
                 }
            ]
    }]
};
var myChartecharts = echarts.init(document.getElementById('btzfb'));
myChartecharts.setOption(option);

效果

折柱图

//
var optionbdtj = {
        tooltip: {
                trigger: 'axis',
                axisPointer: {
                        type: 'cross',
                        crossStyle: {
                                color: '#999'
                        }
                }
        },
        title: {},
        legend: {
                data: ['系统预警', '线下发现', '数量变动'],
                textStyle: {
                        color: '#7A7A7A'
                },
        },
        xAxis: [{
                type: 'category',
                data: ['1月', '2月', '3月', '4月'],
                axisPointer: {
                        type: 'shadow'
                },
                axisLine: {
                        lineStyle: { //改变xy轴线条的颜色
                                color: "#C3DCEA",
                                width: 1 //这里是为了突出显示加上的
                        }
                },
                axisLabel: {
                        textStyle: { //改变xy轴上文字的颜色
                                color: "#75B4FC"
                        }
                }

        }],

        yAxis: [{
                        type: 'value',
                        name: '单位(艘)',
                        min: 0,
                        max: 1000,
                        interval: 200,
                        axisLine: {
                                lineStyle: { //改变xy轴线条的颜色
                                        color: "#E5F0F6",
                                        width: 1 //这里是为了突出显示加上的
                                }
                        },
                        axisLabel: {
                                formatter: '{value} ',
                                color: '#B7B7B7'
                        },
                        splitLine: {
                                lineStyle: { //改变xy轴线条的颜色
                                        color: "#E5F0F6",
                                        width: 1 //这里是为了突出显示加上的
                                }
                        },
                        nameTextStyle: {
                                color: '#B7B7B7'
                        }
                },
                {
                        type: 'value',
                        name: '单位(%)',
                        min: 0,
                        max: 100,
                        interval: 20, //间隔数
                        axisLine: {
                                lineStyle: { //改变xy轴线条的颜色
                                        color: "#E5F0F6",
                                        width: 1 //这里是为了突出显示加上的
                                }
                        },
                        axisLabel: {
                                formatter: '{value} ',
                                color: '#B7B7B7'
                        },
                        splitLine: {
                                lineStyle: { //改变xy轴线条的颜色
                                        color: "#E5F0F6",
                                        width: 1 //这里是为了突出显示加上的
                                }
                        },
                        nameTextStyle: {
                                color: '#B7B7B7'
                        }
                }
        ],
        series: [{
                        name: '系统预警',
                        type: 'bar',
                        barWidth: 15, // 柱子宽度
                        tooltip: {
                                valueFormatter: function(value) {
                                        return value + ' ';
                                }
                        },
                        itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#96DBCA'
                                        },
                                        {
                                                offset: 0.5,
                                                color: '#6EC9C6'
                                        },
                                        {
                                                offset: 1,
                                                color: '#43B6C3'
                                        }
                                ])
                        },
                        emphasis: {
                                itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#96DBCA'
                                                },
                                                {
                                                        offset: 0.7,
                                                        color: '#6EC9C6'
                                                },
                                                {
                                                        offset: 1,
                                                        color: '#43B6C3'
                                                }
                                        ])
                                }
                        },
                        data: [600, 400, 700, 230, 250, 760, 135, 162, 320, 200, 600, 300]
                },
                {
                        name: '线下发现',
                        type: 'bar',
                        barWidth: 15, // 柱子宽度
                        tooltip: {
                                valueFormatter: function(value) {
                                        return value + ' ';
                                }
                        },

                        itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#FEC52F'
                                        },
                                        {
                                                offset: 0.5,
                                                color: '#FEB32C'
                                        },
                                        {
                                                offset: 1,
                                                color: '#FE9F29'
                                        }
                                ])
                        },
                        emphasis: {
                                itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#FEC52F'
                                                },
                                                {
                                                        offset: 0.7,
                                                        color: '#FEB32C'
                                                },
                                                {
                                                        offset: 1,
                                                        color: '#FE9F29'
                                                }
                                        ])
                                }
                        },
                        data: [200, 200, 300, 400, 600, 100, 200, 230, 230, 160, 120, 610]
                },
                {
                        name: '数量变动',
                        type: 'line',
                        symbolSize: 8, //实心大小
                        symbol: 'circle', //实心
                        yAxisIndex: 1,
                        lineStyle: {
                                width: 3,
                                shadowColor: 'rgba(0, 216, 255, 1)', //阴影
                                shadowBlur: 8,
                                shadowOffsetY: 2
                        },
                        tooltip: {
                                valueFormatter: function(value) {
                                        return value + ' ';
                                }
                        },
                        itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#14D8FD'
                                        },
                                        {
                                                offset: 0.5,
                                                color: '#14D8FD'
                                        },
                                        {
                                                offset: 1,
                                                color: '#14D8FD'
                                        }
                                ])
                        },
                        data: [65, 46, 83, 57]
                }
        ]
};
var myChartbdtj = echarts.init(document.getElementById('bdtj'));
myChartbdtj.setOption(optionbdtj);

效果

总结

到此这篇关于如何利用echarts画雷达图和折柱混合的文章就介绍到这了,更多相关echarts雷达图和折柱混合内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯