echart 表格渐变

[
    {
        "month": "1月",
        "sh_market_capitalization": 351041.76,
        "sh_transaction_amount": 58096.59,
        "sh_pe_ratio": 19.25,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "2月",
        "sh_market_capitalization": 334105.65,
        "sh_transaction_amount": 32855.64,
        "sh_pe_ratio": 18.29,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "3月",
        "sh_market_capitalization": 351041.76,
        "sh_transaction_amount": 44281.8,
        "sh_pe_ratio": 17.77,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "4月",
        "sh_market_capitalization": 317966.5,
        "sh_transaction_amount": 34107.67,
        "sh_pe_ratio": 17.31,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "5月",
        "sh_market_capitalization": 320700.9,
        "sh_transaction_amount": 38396.92,
        "sh_pe_ratio": 15.16,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "6月",
        "sh_market_capitalization": 299581.98,
        "sh_transaction_amount": 31271.66,
        "sh_pe_ratio": 14.06,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "7月",
        "sh_market_capitalization": 305437.19,
        "sh_transaction_amount": 32764.68,
        "sh_pe_ratio": 14.29,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "8月",
        "sh_market_capitalization": 290651.27,
        "sh_transaction_amount": 28885.38,
        "sh_pe_ratio": 13.58,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "9月",
        "sh_market_capitalization": 301557.15,
        "sh_transaction_amount": 21689.22,
        "sh_pe_ratio": 14.07,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "10月",
        "sh_market_capitalization": 278622.02,
        "sh_transaction_amount": 24566.14,
        "sh_pe_ratio": 13,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "11月",
        "sh_market_capitalization": 300285.49,
        "sh_transaction_amount": 29652.15,
        "sh_pe_ratio": 13.88,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    },
    {
        "month": "12月",
        "sh_market_capitalization": 320765.48,
        "sh_transaction_amount": 30985.4,
        "sh_pe_ratio": 14.65,
        "sz_market_capitalization": 0,
        "sz_transaction_amount": 0,
        "sz_pe_ratio": 0
    }
]



    //  初始化统计图表
    var xunjian = echarts.init(document.getElementById('xunjian_echart'));
    var baogao = echarts.init(document.getElementById('baogao_echart'));
    var lvxin = echarts.init(document.getElementById('lvxin_echart'));
    //设置数据
    option_xunjian = {
        backgroundColor: 'white',
        padding: 15,
        title: {
            text: '巡检信息',
            x: 'left',
            y: 'top',
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#333333'
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['正常', '超时', '报警',],
        },
        series: [
            {
                name: '状态',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 330, name: '正常', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#2D38FF'},
                                    {offset: 1, color: '#969BFB'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        },
                    },
                    {
                        value: 310, name: '超时', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FFC700'},
                                    {offset: 1, color: '#FFE13C'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 234, name: '报警', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FF4200'},
                                    {offset: 1, color: '#FE8257'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                ]
            }
        ]
    };
    option_baogao = {
        backgroundColor: 'white',
        title: {
            text: '报告信息',
            x: 'left',
            y: 'top',
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#333333'
            },
        },
        tooltip: {
            trigger: 'item',
            show: true,
            confine: true,
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['正常', '超时', '报警',],
        },
        series: [
            {
                name: '状态',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    {
                        value: 630, name: '正常', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#2D38FF'},
                                    {offset: 1, color: '#969BFB'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        },
                    },
                    {
                        value: 310, name: '超时', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FFC700'},
                                    {offset: 1, color: '#FFE13C'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 234, name: '报警', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FF4200'},
                                    {offset: 1, color: '#FE8257'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                ]
            }
        ]
    };
    option_lvxin = {
        backgroundColor: 'white',
        title: {
            text: '滤芯信息',
            x: 'left',
            y: 'top',
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#333333'
            },
        },
        tooltip: {
            trigger: 'item',

            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['正常', '超时', '报警',],
        },
        series: [
            {
                name: '来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 580, name: '正常', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#2D38FF'},
                                    {offset: 1, color: '#969BFB'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        },
                    },
                    {
                        value: 310, name: '超时', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FFC700'},
                                    {offset: 1, color: '#FFE13C'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 234, name: '报警', itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: '#FF4200'},
                                    {offset: 1, color: '#FE8257'}
                                ],
                                globalCoord: true // 缺省为 false
                            }
                        }
                    },
                ]
            }
        ]
    };
    //实例化
    xunjian.setOption(option_xunjian);
    baogao.setOption(option_baogao);
    lvxin.setOption(option_lvxin);

 

posted @ 2022-11-22 18:09  wj704  阅读(58)  评论(0编辑  收藏  举报