var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
var option = {
    color: ['#673AB7', '#02A9F4', '#8BC34B', '#FFC109', '#F44335', '#9D27B0', '#00BCD4', '#CDDD38', '#FFEB3A', '#FF6434', '#403AB5','#2196F3','#4BAF50','#FF9800','#E92662'],
    legend: {
        icon: "circle",
        bottom: '0%'
    },
    tooltip: {
        trigger: 'axis',
        showContent: false
    },
    dataset: {
        source: res
    },
    xAxis: { 
        type: 'category',
        boundaryGap: false,
        axisLine:{
            lineStyle:{
                color: '#C8C8C8' //x轴轴线颜色
            }
        },
        axisLabel: {
            color: '#C8C8C8',// x轴字体颜色
        }
    },
    yAxis: { 
        gridIndex: 0,
        axisLine:{
            lineStyle:{
                color: "#C8C8C8" //x轴轴线颜色
            }
        }
    },
    grid: { 
        top: '55%' 
    },
    series: [
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
            focus: 'self'
        },
        label: {
            formatter: '{b}：{@[1]}人 ({d}%)',
            color: '#000000'
        },
        encode: {
            itemName: 'product',
            value: [1],
            tooltip: [1]
        }
    }]
};
myChart.on('updateAxisPointer', function (event) {
    // console.log('qqqqqqqqq', event)
    const xAxisInfo = event.axesInfo[0]
    if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1
        myChart.setOption({
            series: {
                id: 'pie',
                label: {
                    formatter: '{b}: {@[' + dimension + ']}人 ({d}%)'
                },
                encode: {
                    value: dimension,
                    tooltip: dimension
                }
            }
        })
    }
    myChart.setOption(option)
})
option && myChart.setOption(option)