echarts记录下

• 居中默认展示【负面和65%】，鼠标移动对应label，切换对应的label数据。
• legend也是动态生成的，设置title

image.png

getMediaEmotionSummary(){
                this.$axios
                    .post(api.lyrical.mediaEmotionSummary, this.inclinationTimeObj)
                    .then(res => {
                        // res.data = {
                        //   ndustry:{
                        //     name: "计算机"
                        //     negativeCount: 222
                        //     positiveCount: 121
                        //   }

                        //   stock:{
                        //     name: "捷成世纪"
                        //     negativeCount: 20
                        //     positiveCount: 2
                        //   }
                        // }
                        let echartData1 = [
                            {
                                value: res.data.industry.negativeCount,
                                name: '负面'
                            },
                            {
                                value: res.data.industry.positiveCount,
                                name: '正面'
                            }
                        ],total1 = 0;
                        echartData1.forEach(item => {
                            total1 += item.value
                        });
                        echartData1.forEach(item => {
                            item.label = item.name+ '倾向媒体数'
                            item.percent = total1 > 0 ? ((item.value/total1)*100).toFixed(0)+'%' : 0+'%'
                        })

                        let echartData2 = [
                            {
                                value: res.data.stock.negativeCount,
                                name: '负面'
                            },
                            {
                                value: res.data.stock.positiveCount,
                                name: '正面'
                            }
                        ],total2 = 0;
                        echartData2.forEach(item => {
                            total2 += item.value
                        });
                        echartData2.forEach(item => {
                            item.label = item.name+ '倾向媒体数'
                            item.percent = total2 > 0 ? ((item.value/total2)*100).toFixed(0)+'%' : 0+'%'
                        })

                        let dataArr1 = echartData1
                        let dataArr2 = echartData2

                        this.statisticsData = [
                            {
                                name: res.data.industry.name,
                                neg: res.data.industry.negativeCount,
                                pos: res.data.industry.positiveCount
                            },
                            {
                                name: res.data.stock.name,
                                neg: res.data.stock.negativeCount,
                                pos: res.data.stock.positiveCount
                            },
                        ]

                        this.initEcharts('attitude', dataArr1, total1, '家', '市场态度', {
                            text: res.data.industry.name,
                            top: '10'
                        })
                        this.initEcharts('international', dataArr2, total2, '家', '市场态度',{
                                text: res.data.stock.name,
                                top: '30'
                            },
                            {
                                radius: ['30%', '45%'],
                            },
                            {
                                fontSize: 26,
                                lineHeight: 16
                            },
                            {
                                padding: [-30, 0, 0, 0]
                            })
                    })
                    .catch(() => {});
            },

initEcharts(dom, dataArr, total, unit, seriesName, title, series, percent, name) {
                let echart = echarts.init(document.getElementById(dom)),
                    option = {
                        title: {
                            text:'',
                            left:'center',
                            top:'10',
                            padding:[24,0],
                            textStyle:{
                                color:'#A0A2A5',
                                fontSize:14,
                                align:'center'
                            },
                            ...title
                        },
                        tooltip: {
                            show: false,
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            itemHeight: 8,
                            itemWidth: 8,
                            selectedMode: false,
                            data: dataArr.map(item => item.name),
                            bottom: "17",
                            itemGap: 50,

                            // selectedMode:false,
                            formatter: function(name) {
                                for(let i=0;i<dataArr.length;i++){
                                    if(name == dataArr[i].name){
                                        return '{label|' + dataArr[i].label + '}'
                                            + '\n'
                                            +'{total|' + dataArr[i].value + unit +'  |  }'
                                            +'{percent|' + dataArr[i].percent + '}';
                                        break;
                                    }
                                }
                            },
                            icon: 'rect',
                            textStyle: {
                                color: "#fff",
                                lineHeight: 1,
                                rich: {
                                    label: {
                                        color: "#777A7F",
                                        fontSize: 14,
                                        align: 'left'
                                    },
                                    total: {
                                        color: "#41464B",
                                        fontSize: 12,
                                        align: 'left',
                                        padding: [-40, 0, 0, 0],
                                    },
                                    percent: {
                                        color: "#41464B",
                                        fontSize: 12,
                                        align: 'left',
                                        padding: [-40, 0, 0, 0],
                                    },
                                }
                            },
                        },
                        series: [{
                            name: seriesName,
                            type:'pie',
                            radius: ['40%', '60%'],
                            ...series,
                            color: ['#FF7479', '#75C1FF'],
                            avoidLabelOverlap: false,
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold',
                                        lineHeight: 1,
                                        rich: {
                                            percent: {
                                                color: "#41464B",
                                                fontSize: 34,
                                                align: 'center',
                                                lineHeight: 10,
                                                ...percent
                                            },

                                            name: {
                                                color: "#A0A2A5",
                                                fontSize: 14,
                                                align: 'center',
                                                padding: [-40, 0, 0, 0],
                                                ...name
                                            },
                                        }
                                    },
                                    formatter: (item)=>{
                                        // 展示默认值
                                        if(item.name === dataArr[0].name){
                                            let name = item.name,
                                                percent = item.percent.toFixed(0)+'%'
                                            return '{percent|' + percent + '}'+'\n {name|' + name + '}';
                                        }else{
                                            return '';
                                        }

                                    }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold',
                                        lineHeight: 1,
                                        rich: {
                                            percent: {
                                                color: "#41464B",
                                                fontSize: 34,
                                                align: 'center',
                                                lineHeight: 10,
                                                ...percent
                                            },

                                            name: {
                                                color: "#A0A2A5",
                                                fontSize: 14,
                                                align: 'center',
                                                padding: [-40, 0, 0, 0],
                                                ...name
                                            },
                                        }
                                    },
                                    formatter: function(item) {
                                        let name = item.name,
                                            percent = item.percent.toFixed(0)+'%'
                                        return '{percent|' + percent + '}'+'\n {name|' + name + '}';
                                    },
                                }
                            },
                            data: dataArr
                        }]
                    };
                echart.setOption(option, true)
                echart.on('mouseover', function(params) {
                    echart.dispatchAction({
                        type: 'pieSelect',
                        name: dataArr[params.dataIndex].name
                    })
                    option.series[0].label.normal.textStyle.rich.percent.color = '#fff'
                    option.series[0].label.normal.textStyle.rich.name.color = '#fff'
                    echart.setOption(option);
                });
                echart.on('mouseout', function(params) {
                    echart.dispatchAction({
                        type: 'pieunselected',
                        name: dataArr[params.dataIndex].name
                    })
                    option.series[0].label.normal.textStyle.rich.percent.color = '#41464B'
                    option.series[0].label.normal.textStyle.rich.name.color = '#A0A2A5'
                    echart.setOption(option);
                });
            },