Echarts折线、环形饼图样式修改

因工作需求须使用HTML+CSS纯手写一个大屏可视化页面。

其中涉及的echarts图表样式别致的，作下记录。

对比默认主要新增了渐变与控制背景间隔的样式，亏得写了一下午。

折线完成图：

PS：多看文档多看文档，没有捷径可走 [aru_49]

var class_situaction = echarts.init(document.getElementById("class_situaction"));
option = {
    tooltip: {
        trigger: 'axis',
        formatter: '{a}: {c}<br/>{a1}:{c1}<br/>完成比例：50%',
        textStyle: {
            color: '#0066ff',
            fontSize: 9
        },
        axisPointer: { //去掉移动的指示线
            type: 'none'
        },
        backgroundColor: 'rgba(2,34,61,0.9)',
    },
    grid: {
        left: '2%',
        right: '5%',
        bottom: '25%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',

            boundaryGap: true,
            data: [
                '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
            ],
            axisLabel: {
                fontSize: '10px',
                textStyle: {
                    color: '#fff',//坐标值的具体的颜色
                },
                interval: 0
            },
            axisLine: {
                lineStyle: {
                    color: 'none'
                }
            },

        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            max: 100,
            min: 0,
            interval: 25,
            axisLabel: {
                fontSize: '10px',
                textStyle: {
                    color: '#fff'
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'none'
                }
            },
            //背景分割线
            splitLine: {
                lineStyle: {
                    color: ['rgba(4,166,255,0.24)']
                }
            }
        }
    ],
    series: [
        {
            name: '计划时',
            type: 'line',
            symbol: 'none',
            areaStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#3ecbf2' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#061328' // 100% 处的颜色
                        }],
                        global: false
                    },
                }
            },
            lineStyle: {
                color: "#44f0ff",
                width: 0.4,
            },
            itemStyle: {
                borderColor: '#44f0ff',
            },
            //线性渐变
            data: [1, 32, 56, 13, 1, 3, 2, 35, 16, 34, 21, 8]
        },
        {
            name: '已训时',
            type: 'line',
            symbol: 'none',
            lineStyle: {
                color: "#BF366C",
                width: 0.8,
            },
            data: [2, 5, 1, 3, 56, 30, 10, 4, 11, 4, 33, 16],
        },
    ]
};
class_situaction.setOption(option);

环形饼图：

var crew_out_chart = echarts.init(document.getElementById("crew_out_chart"));
placeHolderStyle = {
    normal: {
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        }
    }
};
        option = {
            title: {
                //主标题
                text: totalPerson+'人',
                //主标题样式
                textStyle: {
                    color: '#fff',
                    fontSize: 26,
                    fontWeight: 'normal'
                },
                left: 'center',
                top: '50%'
            },
            tooltip: {
                show: true,
                trigger: 'item',//提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
                formatter: function (params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
                    return params.seriesName + ": " + params.value + "人";//系列名称：数据值
                },
                textStyle: {
                    color: '#0ab7ff',
                    fontSize: 15
                },
                backgroundColor: 'rgba(2,34,61,0.8)',
            },

            color: ['#0DDEDE', '#93E2A1', '#2E65FD', '#C88C0B'],//调色盘颜色列表，默认情况下图例和饼形环图颜色使用
            series: [
                {
                    name: '1类别',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [10, 19],
                    itemStyle: placeHolderStyle,
                    label: {
                        normal: {
                            show: false,
                        }
                    },
                    data: [{
                        value: wzOfficeUsers,
                        itemStyle: {
                            normal: {
                                color: '#0DDEDE'
                            }
                        }
                    },
                        {
                            value: totalPerson - wzOfficeUsers,
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            }
                        }]
                },
                {
                    name: '2类别',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [35, 38],
                    itemStyle: placeHolderStyle,
                    data: [{
                        value: ywbOfficeUsers,
                        itemStyle: {
                            normal: {
                                color: '#2E65FD'
                            }
                        }
                    },
                        {
                            value: totalPerson - ywbOfficeUsers,
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            }
                        }]
                },
                {
                    name: '3类别',
                    type: 'pie',
                    clockWise: true, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [70, 73],
                    itemStyle: placeHolderStyle,
                    data: [{
                        value: sgOfficeUsers,
                        itemStyle: {
                            normal: {
                                color: '#93E2A1'
                            }
                        }
                    },
                        {
                            value: totalPerson - sgOfficeUsers,
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            }
                        }]
                },
                {
                    name: '4类别',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [80, 83],
                    itemStyle: placeHolderStyle,

                    data: [{
                        value: gbOfficeUsers,
                        itemStyle: {
                            normal: {
                                color: '#C88C0B'
                            }
                        }
                    },
                        {
                            value: totalPerson - gbOfficeUsers,
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            }
                        }]
                }
            ]
        };
        crew_out_chart.setOption(option);
    },
});