Echarts雷达图绘制及其动态获取参数

最新推荐文章于 2024-08-02 10:05:12 发布

我是我家小女孩

最新推荐文章于 2024-08-02 10:05:12 发布

阅读量8.5k

点赞数 1

我是我家小女孩@khuntoria

本文链接：https://blog.csdn.net/SQY_candy/article/details/80932878

版权

本文介绍如何使用Echarts创建雷达图，并详细说明如何从成功回调中获取并处理数据，填充到雷达图的各个点上，展示两种不同颜色的线条。

摘要由CSDN通过智能技术生成

这个是采用Echarts绘制的雷达图。

 <div id="chart"></div>

js代码

// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
    var radar_chart = echarts.init(document.getElementById("chart"));

    // 指定图表的配置项和数据
    var radar_option = {
        toolbox: {
            show: true
        },
        textStyle: {
            color: "#fff"
        },
        grid: {
            // 控制图的大小，调整下面这些值就可以，
            x: 0,
            x2: 0,
            y2: 0 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
        },

        calculable: true,
        polar: [
            {
                indicator: [
                    {
                        // text: "保障发育",
                        max: 100