ecahrts的基本配置

ecahrts的基本配置

先上需求的效果图

饼状图

notLoggedOption:{
    //1.标题属性配置
    title:{
        text:'累计未登录人数',
        subtext:'5000名',
        textAlign: 'center',
        left:'42.6%',
        top:'42%',
        textStyle:{
            color:'#606266',
            fontSize:'20',
        },
        subtextStyle:{
            color:'#303133',
            fontSize:'24',
            fontWeight:'blod'
        }
    },
    //2  
    color: ['#254BE9','#0BDBA8','#F3D01D','#FD571F'],
    //3.提示的配置
    tooltip: {
        backgroundColor:'rgba(0,0,0,0.7)',
        borderWidth: 0 ,
        textStyle:{
            color:'#fff'
        },
        trigger: 'item'
    },
    //4.图例的配置   
    legend: {
        top: '50%',
        right: '4%',
        orient:'vertical',
        icon: "circle"
    },
    //5.饼图的展示配置
    series: {
        type: 'pie',
        radius: ['52%', '82%'],
        right:'120',
        emphasis: {
            label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
            }
        },
        labelLine: {
            show: false
        },
        itemStyle: {
            normal: {
                "borderWidth": 2, // 间距的宽度
                "borderColor": '#fff', //背景色
                label:{
                    show: true,
                    position: 'inner',
                    fontSize: 12,
                    fontWeight: 'bold',
                    align: "left",
                    formatter: function (p) { //指示线对应文字,百分比
                        return p.percent.toFixed(0) + "%";//设置百分比保留几位小数
                    }
                }
            }
        },
        data: [
            { value: 1048, name: '30-60天内未登录人数',label:{color:"#fff"}},
            { value: 735, name: '60-90天内未登录人数',label:{color:"#fff"}},
            { value: 580, name: '90-180天内未登录人数',label:{color:"#fff"}},
            { value: 484, name: '180天以上未登录人数',label:{color:"#fff"}},
        ]
    }
},

1. 饼图中心需要固定未登录人数，这个我是通过平移
2. color列表每个扇形区域的颜色
3. 触及每片扇形区域会弹出提示框
4. 图例默认是在上方的位置，可通过平移配置到左右两侧展示
5. radius属性可以配置成同心圆 emphasis属性配置高亮 itemStyle配置每个扇形区的内容展示

折线图

loginTrendOption: {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器配置项。
            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
        },
        showContent: true,
        backgroundColor: 'rgba(0,0,0,0.7)',
        textStyle: {
            color: '#fff',
        },
        formatter: function (params) {
            const unit = ['人','次','次']
            let tip = params[0].name+'<br />'
            if (params!=null&&params.length) {
                for(let i=0;i<params.length;i++){
                    tip += `${params[i].marker}${params[i].seriesName}：${params[i].value}${unit[i]}<br />` 
                }
            }
            return tip
        },
    },
    legend: {
        left: 24,
        bottom: 24,
        itemHeight: 4,
        itemWidth: 10,
        icon: 'rect',
        textStyle: {
            color: '#606266',
            fontSize: 14,
        },
        y: 'top',
        data: ['登录人数', '登录次数', '人均登录次数'],
    },
    //1.指标系网格配置
    grid: {
        top: 50,
        left: 24,
        right: 24,
        bottom: 24,
        containLabel: true,
    },
    //2.x轴配置
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine: {
            lineStyle:{
                color:"#DCDFE6"
            }
        },
        axisLabel: {
            color: '#606266',
            fontSize: 12
        },
        data: []
    },
    //3.y轴配置
    yAxis: {
        min: 0,
        minInterval: 1, // 最小分割刻度
        type: "value",
        axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)',
            fontSize: 12
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#DCDFE6'
            }
        }
    },
    series: [
        {
            name: '登录人数',
            type: 'line',
            symbolSize: 6, //设置折线上圆点大小
            data: [],
        },
        {
            name: '登录次数',
            type: 'line',
            symbolSize: 6, //设置折线上圆点大小
            data: [],
        },
        {
            name: '人均登录次数',
            type: 'line',
            symbolSize: 6, //设置折线上圆点大小
            data: [],
        },
    ],
    color:['#0BDBA8','#F3D01D','#FD571F']
},

折线图相比饼图 多了x轴，y轴的必要配置，并且type为line

注意：监听窗口变化，echarts图形也要自适应变化（this的指向）

this.chartsNotLog = this.$echarts.init(document.getElementById('notLoggedChart'));
this.chartsLoginTrend = this.$echarts.init(document.getElementById('loginTrendChart'));
const that = this
window.addEventListener("resize", function () {
    that.chartsNotLog.resize();
    that.chartsLoginTrend.resize();
});