echart.js组件编写

1.传参

<area-chart :chartdata='monitorTimes' :datatype='typeSelected' :dataX = '"tid"'  :types='types' ></area-chart>

由于我的图表不同数据有不同的颜色，所以我传了一个typeSelected

组件代码

<template>
    <div class='chart__wrapper'></div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        props: ['chartdata', 'datatype', 'dataX', 'types'],
        data() {
            return {
                myChart: null
            }
        },
        methods: {

        },
        created:function() {
            
        },
        mounted: function() {
            let  _color = ['#CF6066','#27727B','#FCCE10','#E87C25','#B5C334'];
            this.myChart=echarts.init(this.$el);
            
            let seriesData = this.chartdata.map(o=>{
                return o[this.datatype];
            })
            let color =_color[this.types.findIndex(o=> o.id == this.datatype )];
            //console.log(this.chartdata)
            let seriesX=this.chartdata.map(o=>{
                return o[this.dataX]
            })
            //console.log("ss",seriesX)
            
            this.myChart.setOption({
                tooltip: {
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: seriesX
                },
                yAxis: {
                    
                },
                series: [{
                    data: seriesData,//数据内容数组
                    type: 'line',
                    smooth: false,
                    lineStyle:{
                        normal:{
                            color:color
                        }
                    },
                    areaStyle:{
                        normal:{
                            color:color
                        }
                    }
                }]
            })
            window.addEventListener('resize', this.myChart.resize);
        },
        beforeDestroy: function () {
            window.removeEventListener('resize', this.myChart.resize)
        }
    }
</script>
<style lang='scss' scoped>
    .chart__wrapper {
        width:100%;
        height:100%;
        position:relative;
        padding:15px;
    }
</style>