vue & echarts

vue & echarts.md

vue & echarts

<template>
    <div class="flex-center relative score-point-chart-wrapper" v-show="!empty">
        <div id="score-point-chart" style="height: 650px; width: 100%"></div>
        <div class="legend" style="left: 50%;top: 10px">回收得分高</div>
        <div class="legend" style="left: 50%;bottom: 0" >回收得分低</div>
        <div class="legend" style="left: 40px;top: 50%;">跑量得分低</div>
        <div class="legend" style="right: -20px;top: 50%">跑量得分高</div>
        <div class="c-999 lh17 f12" style="position: absolute;left: 10px;bottom: 0;">
            <div>说明</div>
            <div>圆圈面积表示标签对应有消耗素材数量的多少，</div>
            <div>面积越大，标签对应的有消耗素材数越多。</div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

import xyzService from '@/services/xyzService';
import {tagConfig} from '../../config';
export default {
    name: 'ScorePointChart',
    inject: {
        parentFilterParams: 'filterParams',
    },
    computed: {
        filterParams () {
            return this.parentFilterParams();
        },
    },
    data () {
        return {
            chart: null,
            chartData: [],
            middleRecoveryScore: 0,
            middleRunningScore: 0,
            empty: false,
        };
    },
    mounted () {
        this.chart = echarts.init(document.getElementById('score-point-chart'));
        window.detailClick = this.detailClick;
    },
    methods: {
        getData () {
            xyzService.getCircleChart(this.filterParams).then(res => {
                this.chartData = res.data.data.data.filter(i => i.cost_material_num > 0 && i.running_score > 0);
                this.drawChart();
            });
        },

        detailClick (id, name) {
            console.log(id);
            this.$emit('select', { tagId: id, tagName: name});
        },

        drawChart () {
            // console.log(this.chart);
            this.chart.clear();
            if (this.chartData.length === 0) {
                this.empty = true;
                return;
            }
            this.empty = false;
            const length = Math.floor(this.chartData.length / 2);
            this.chartData.sort((a, b) => a.recovery_score - b.recovery_score);
            this.middleRecoveryScore = this.chartData[length].recovery_score;
            this.chartData.sort((a, b) => a.running_score - b.running_score);
            this.middleRunningScore = this.chartData[length].running_score;
            this.chartData.sort((a, b) => a.cost_material_num - b.cost_material_num);
            const middleCostNum = this.chartData[length].cost_material_num;

            const data = tagConfig.map(tagType => {
                const tagData = this.chartData.filter(i => i.highest_tag_attr_id === tagType.id);
                return {
                    name: tagType.name,
                    data: tagData.map(i => [
                        i.running_score - this.middleRunningScore,
                        i.recovery_score - this.middleRecoveryScore,
                        i.cost_material_num,
                        i.title,
                        i.tag_attr_name,
                        i.title,
                        i.id,
                    ]),
                };
            });
            let option = {
                color: tagConfig.map(i => i.color),
                grid: {
                    top: 30,
                    left: 60,
                    right: 60,
                    bottom: 30,
                },
                tooltip: {
                    enterable: true,
                    renderMode: 'html',
                    formatter: (item) => {
                        const value = item.value;
                        return [
                            `<div style="font-size: 14px;font-weight: 500;line-height: 20px; margin-bottom: 10px;">${value[3]}</div>`,
                            `<div style="margin-left: 10px;line-height: 17px; margin-bottom: 10px;">跑量得分:${(value[0] + this.middleRunningScore).toFixed(2)}</div>`,
                            `<div style="margin-left: 10px;line-height: 17px; margin-bottom: 10px;">回收得分:${(value[1] + this.middleRecoveryScore).toFixed(2)}</div>`,
                            `<div style="margin-left: 10px;color: #4284F4;cursor: pointer;" onclick="detailClick('${value[6]}', '${value[5]}')">查看素材详情</div>`,
                        ].join('');
                    },
                    extraCssText: 'background-color: #fff; color: #606266; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);font-size:12px;border:none',
                },
                legend: {
                    orient: 'vertical',
                    right: '5%',
                    bottom: '3%',
                    data: tagConfig.map(i => i.name),
                    icon: 'rect',
                    itemWidth: 8,
                    itemHeight: 8,
                },
                xAxis: {
                    show: true,
                    axisLabel: {show: false,},
                    splitLine: {show: false,},
                    axisTick: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#F4F4F5',
                            width: 2,
                        }
                    },
                    min: value => Math.min(-Math.max(Math.abs(value.max), Math.abs(value.min)) * 1.1, -1),
                    max: value => Math.max(Math.max(Math.abs(value.max), Math.abs(value.min)) * 1.1, 1),
                },
                yAxis: {
                    show: true,
                    axisLabel: {show: false,},
                    splitLine: {show: false,},
                    axisTick: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#F4F4F5',
                            width: 2,
                        }
                    },
                    min: value => Math.min(-Math.max(Math.abs(value.max), Math.abs(value.min)) * 1.1, -1),
                    max: value => Math.max(Math.max(Math.abs(value.max), Math.abs(value.min)) * 1.1, 1),
                },
                series: data.map(item => ({
                    name: item.name,
                    data: item.data,
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[2] / middleCostNum) / 0.08;
                    },
                    itemStyle: {
                        shadowBlur: 0,
                    }
                })),
                animation: false,
            };
            this.chart.setOption(option);
        },
    }

};
</script>

<style lang="scss">
.score-point-chart-wrapper {
    .legend {
        color: #606266;
        font-size: 12px;
        transform: translate(-50%, -50%);
        position: absolute;
    }
}

</style>