Basic configuration of ecahrts

Basic configuration of ecahrts

The effect diagram of the demand first

pie chart

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. The center of the pie chart needs to fix the number of people who are not logged in. I do this by panning
2. color list the color of each fan area
3. A prompt box will pop up when each fan-shaped area is touched
4. The legend is at the top by default, and can be configured to display on the left and right sides by panning
5. The radius attribute can be configured as a concentric circle. The emphasis attribute can be configured to highlight the itemStyle to configure the content display of each sector.

line chart

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']
},

Compared with the pie chart, the line chart has more x-axis and necessary configuration of the y-axis, and the type is line

Note: Monitor window changes, and echarts graphics should also change adaptively (this points to)

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();
});