echarts-demo记录

echarts-demo记录

1.双环形图

效果图：

// 颜色
let colorList = [
    '#0F8A91',
    '#87651D',
    '#188B56'
];

let colorList1 = [
    '#0BF7FF',
    '#FFB522',
    '#22FF91'
];
let data = [10,22,15]
let seriesOption = [
    {
        name: 'small',
        type: 'pie',
        radius: ['32%', '40%'],
        center: ['50%', '50%'],
        color: colorList1,
        zlevel: 2,
        hoverAnimation: false,
        label: {
            show: false,
        },
        itemStyle: {
            borderWidth:7,
            borderColor: '#041837',
        },
        labelLine: {
            show: false,
        },
        data,
    },
    {
        name: 'big',
        type: 'pie',
        radius: ['36%', '44%'],
        center: ['50%', '50%'],
        color: colorList,
        zlevel: 3,
        label: {
            show: false,
            position: 'center',
        },
        labelLine: {
            show: false,
        },
        itemStyle: {
            borderWidth:8,
            borderColor: '#041837',
        },
        color: ['red', 'blue', 'pink'],
        data: data.map((item, i) => {
            return {
                value: item, itemStyle: { normal: { color: colorList[i] } }
            }
        })
    },
];

option = {
    backgroundColor: '#041837',
    title: {
        text: data.reduce((per, cur) => per + cur, 0),
        subtext: '总数量',
        x: 'center',
        y: 'center',
        textStyle: {
            fontWeight: 'normal',
            color: '#fff',
            fontSize: 27,
        },
        subtextStyle: {
            fontSize:21,
            color: '#999999',
        },
    },
    tooltip: {
        show: false,
    },
    series: seriesOption,
};

2.仪表盘+环组合

option = {
    backgroundColor: '#000',
    title: [{
            text: '标配',
            x: 'center',
            top: '50%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 20
            }
        },
        {
            text: '84%',
            x: 'center',
            top: '45%',
            textStyle: {
                fontSize: 40,
                color: '#FFFFFF',
                fontFamily: 'DINAlternate-Bold, DINAlternate'
            }
        }
    ],
    series: [{
            type: 'pie',
            zlevel: 1,
            silent: true,
            radius: ['40%', '41%'],
            hoverAnimation: false,
            color: "rgba(88,142,197,0.5)",
            // animation:false,    //charts3 no
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [1]
        }, {
            name: '中环',
            type: 'gauge',
            splitNumber: 60,
            radius: '35%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                length: 38,
                splitNumber: 3,
                lineStyle: {
                    color: 'rgba(88,142,197,0.5)'
                }
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        },
        {
            name: "内环1",
            type: 'gauge',
            splitNumber: 60,
            radius: '25%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -270,
            axisLine: {
                show: false,
                lineStyle: {
                    color: [
                        [0.84, 'rgba(87, 141, 161, 1)'],
                        [1, 'transparent']
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 22,
                lineStyle: {
                    color: 'auto',
                    width: 2.5
                }
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        },
        {
            name: "内环2",
            type: 'gauge',
            splitNumber: 60,
            radius: '23%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -270,
            axisLine: {
                show: false,
                lineStyle: {
                    color: [
                        [0.84, 'rgba(87, 141, 161, 1)'],
                        [1, 'transparent']
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 22,
                lineStyle: {
                    color: 'auto',
                    width: 6
                }
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        }
    ]
};

3.平滑折线图

代码：

let xLabel = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023']
let dataVal = ['50', "87", "56", "77", "54", "45", "66", "55"]

option = {
    backgroundColor: '#151515',
    legend: {
        show: false
    },
    grid: {
        top: '55%',
        left: '30%',
        right: '30%',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: ['20%', '20%'], // 距离y轴的距离
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: false
        },
        axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
                color: 'rgba(188, 188, 188, 1)',
                padding: 16,
                fontSize: 14
            },
            formatter: function (data) {
                return data
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false,
        },
        data: xLabel
    }],
    yAxis: [{
        min: 0,
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(63, 87, 109, .3)",
                type: 'dashed'
            }
        },
        axisLine: {
            show: false

        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'rgba(188, 188, 188, 1)',
                padding: 16
            },
            formatter: function (value) {
                if (value === 0) {
                    return value
                }
                return value
            }
        },
        axisTick: {
            show: true,
            lineStyle: {
                type: 'dotted',
                width: 4,
                color: 'rgba(255, 255, 255, .5)'
            }
        },
    }],
    series: [{
        name: '人数',
        type: 'line',
        symbolSize: 0, // 取消折线点
        smooth: true,  // 平滑
        lineStyle: {
            normal: {
                width: 2,
                color: "rgba(136, 179, 204, 1)", // 线条颜色
            }
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "rgba(28, 223, 253, .1)"


                },
                {
                    offset: 1,
                    color: "rgba(28, 223, 253, .1)"
                }
                ], false),
            }
        },
        data: dataVal
    }]
};