Faster.Zheng.Winin/Code/Fe/src/views/gridLayout/components/chart/line.vue

<template>
    <div :id="gridItem.name+'-chart'+gridItem.i" class="chartMainOuter">
        <dialogIndex :dialogVisible="dialogVisible" @close="close"></dialogIndex>
    </div>
</template>
<script>
import { getList } from "@/views/gridLayout/components/gridLayout"
import { createEachartAreaStyleColor } from "@/views/gridLayout/components/gridLayout"
import dialogIndex from "@/components/News/dialogIndex"
export default {
    name: "mesLine",
    props:{
        gridItem: {
            type: Object,
            default: () => {
                return {}
            }
        },
        //是否为首页（是否执行点击标题事件）
        isHome: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        // 模块唯一标识
        dataSourceId: {
            type: String,
            default: () => {
                return ''
            }
        }
    },
    data () {
        return {
            xAxisData: [],
            seriesData: [],
            dialogVisible: false,
            title: '',
            settings:{
                lineColorArr:[],
                areaStyles:[],
            },
        }
    },
    components: {
        dialogIndex
    },
    mounted() {
        getList(JSON.parse(localStorage.getItem(this.dataSourceId))).then( rs => {
            this.title = rs.title,
            this.xAxisData = rs.xAxisData,
            this.seriesData = rs.seriesData
            this.initSettings()
        })
    },
    methods: {
        // 初始化图表样式配置
        initSettings(){
            // 获取已有数据
            if(this.gridItem.gridSettings){
                this.settings = JSON.parse(JSON.stringify(this.gridItem.gridSettings))
                setTimeout(() => {
                    this.drawChart();
                },200)
            }
            else{
                // 重新配置数据
                this.setEchartColor()
            }
        },
        // 设置颜色
        setEchartColor(){
            let _finalSettings = createEachartAreaStyleColor(this.seriesData)
            this.settings.lineColorArr = _finalSettings.lineColorArr
            this.settings.areaStyles = []
            this.seriesData.forEach((item,key) => {
                this.settings.areaStyles.push({
                    color: new this.$echarts.graphic.LinearGradient(
                        0,0,0,1, _finalSettings.areaStyles[key].color
                    )
                })
            })
            setTimeout(() => {
                this.drawChart();
            },200)
        },
        drawChart() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById(this.gridItem.name+"-chart"+this.gridItem.i));
            // 指定图表的配置项和数据
            // 解析seriesData 数据 
            let series = []
            let series_legend = []
            this.seriesData.forEach((item,key) => {
                series.push({
                    name: item.name,
                    data: item.data,
                    type: 'line',
                    showSymbol:false,
                    smooth: true,
                    stack: "总量",
                    areaStyle: this.settings.areaStyles[key],
                })
                series_legend.push(item.name)
            })
            let option = {
                color:this.settings.lineColorArr,
                title: {
                    text: this.title==null?"折线图":this.title,
                    left:'center',
                    top:'10',
                    triggerEvent: this.isHome
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    // icon: "circle",//  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                    align:'left',//字在后方
                    right:'center',
                    bottom:'10',
                    data: series_legend,
                },
                grid: {
                    left: "30",
                    right: "30",
                    bottom: "40",
                    top:"70",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.xAxisData,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ddd',
                        }
                    },  
                    axisTick:{
                        show:false
                    }  
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                        }
                    },  
                    axisTick:{
                        show:false
                    }  
                },
                series: series
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener('resize',function(){
                myChart.resize()
            })
            myChart.off('click');//先解绑事件，防止事件重复触发
            myChart.on('click', params => {  // 给图表绑定点击事件
                if (params.componentType === 'title') { // 确认点击部分为title
                    this.dialogVisible = true
                }
            })
        },
        close() {
            this.dialogVisible = false
        },
        // 获取样式配置信息
        getSettings(){
            return this.settings
        }
    }
}
</script>
<style scoped lang="scss">
@import "../gridLayout.scss";
</style>