highcharts，echarts图表配置

highchart饼状图

Highcharts.chart('total_alarm_contribution', {
            chart: {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            credits:{
                enabled:false
            },
            title: {
                text: null,
                style:{
                    color:'#fff'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: '#fff',
                            textOutline:'none',
                            fontWeight:'normal'
                        }
                    }
                }
            },
            series: [{
                name: '告警数',
                colorByPoint: true,
                data: totalAlarms
            }]
        });

echarts雷达图

       var myChart = echarts.init(document.querySelector('.panel-bd.radar'))
        var option = {
            radar: [
                {
                    indicator: [
                        { text: '打开告警', max: 100, color: 'rgb(236, 128, 141)', },
                        { text: '松动告警', max: 100, color: 'rgb(129, 211, 248)', },
                        { text: '其他告警', max: 100, },
                        { text: '水满告警', max: 100, color: 'rgb(202, 249, 130)' }
                    ],
                    center: ['50%', '50%'],
                    radius: "75%",
                    nameGap: 10,//指示器名称和指示器轴的距离。
                    name: {
                        fontSize: 12
                    }
                }
            ],
            series: [
                {
                    name: '井盖告警',
                    type: 'radar',
                    data: [
                        {
                            value: data,
                            name: '井盖告警',
                            areaStyle: {//雷达面积区域颜色
                                opacity: 0.9,
                                color: 'rgba(209,238,169,.8)'
                            },
                            lineStyle: {//雷达区域线框的设置
                                color: 'rgba(0,0,0,.5)'
                            },
                            symbol: 'none'//单个数据标记的图形类型，默认时circle
                        }
                    ]
                }
            ]
        }

echarts饼状图

var myChart = echarts.init(document.querySelector('.panel-bd div.pie1'))
        var datas = [
            
            data
        ];

        var option = {
            graphic: {//126这个文字
                type: 'text',
                top: '50%',
                left: 'center',
                style: {
                    text: total_warning,
                    fill: '#ff0000',
                    fontSize: 16,
                },
                zlevel: 2//层级
            },
            series: [
                {
                    name: '井盖告警',
                    color: ['rgb(236, 128, 141)', 'rgb(129, 211, 248)', 'rgb(202, 249, 130)'],
                    type: 'pie',
                    radius: ["45%", "70%"],
                    center:["50%","55%"],//圆心位置
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 0,
                        emphasis: {
                            scaleSize: 1
                        }
                    },
                    hoverAnimation: false,//鼠标经过无动画
                    label: {
                        alignTo: 'edge',
                        formatter: '{b}{c}%\n',
                        minMargin: 5,
                        edgeDistance: 10,
                        lineHeight: 15,
                        fontSize: 10,
                        padding: [0, -70]
                    },
                    labelLine: {
                        length: 10,
                        length2: 60,
                        maxSurfaceAngle: 80
                    },
                    labelLayout: function (params) {
                        var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        var points = params.labelLinePoints;
                        // Update the end point.
                        points[2][0] = isLeft
                            ? params.labelRect.x
                            : params.labelRect.x + params.labelRect.width;

                        return {
                            labelLinePoints: points
                        };
                    },
                    data: datas[0]
                },
                {
                    color: '#fff',
                    name: '告警总数',//中间圆
                    type: 'pie',
                    radius: '45%',
                    center:["50%","55%"],
                    data: [
                        { value: 1048, name: '搜索引擎' }
                    ],
                    hoverAnimation: false,//鼠标经过不放大
                    label: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                }
            ]
        };

echarts折线图

var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                },
                itemHeight: 8
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(121,121,121,.8)'
                    }
                }
            },
            color: ["rgb(236, 128, 141)", "rgb(202, 249, 130)", "rgb(129, 211, 248)"],
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff',
                    fontSize: 10,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(121,121,121,.8)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(121,121,121,.8)'
                    }
                }
            },
            series: [

                {
                    name: total.Area.Name,
                    type: 'line',
                    lineStyle: {
                        width: 1
                    },
                    symbolSize: 3,
                    data: total.Alarms
                },
                {
                    name: dataA.Area.Name,
                    type: 'line',
                    lineStyle: {
                        width: 1
                    },
                    symbolSize: 3,
                    data: dataA.Alarms
                },
                // {
                //     name: '机场B区',
                //     type: 'line',
                //     stack: '总量',
                //     lineStyle: {
                //         width: 1
                //     },
                //     symbolSize: 3,
                //     data: dataB
                // },
            ]
        };