vue集成echarts，自定义各种图表验收

<template>
    <div class="homepage-count">
        <br><br><br>
        <el-row>
            <el-col :span="6">
                <div id="main1" ref="chart1"></div>
            </el-col>
            <el-col :span="6">
                <div id="main1" ref="chart2"></div>
            </el-col>
            <el-col :span="6">
                <div id='main1' ref='chart3'></div>
            </el-col>
            <el-col :span="6">
                <div id='main1' ref='chart4'></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div id='main1' ref='chart5'></div>
            </el-col>
            <el-col :span="12">
                <div id='main1' ref='chart6'></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">

            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">

            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios'
var echarts = require("echarts");
export default {


    data() {
        return {
        }
    },
    methods: {
        ec1(){
            echarts.init(this.$refs.chart1).setOption({
                title: {
                        text: '风险数据失控统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 43, name: '失控'},
                                {value: 53, name: '未失控'},
                            ],
                            itemStyle: {
                            emphasis:{
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal:{
                                color:function(params) {
                                var colorList = [          
                                        '#FF4040', '#63B8FF',
                                    ];
                                    return colorList[params.dataIndex]
                                }
                        }                                           
                     }    
                }
              ]
            })
        },
    ec2(){
        let ec = echarts.init(this.$refs.chart2);
        ec.setOption({
           legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '失控', '未失控'],
                source: [{'失控':43,'未失控':66}]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar',color:'#FF4040'},
                {type: 'bar',color:'#63B8FF'}
            ]           
        })            
      },
      ec3(){
        let ec = echarts.init(this.$refs.chart3);
        ec.setOption({
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '等级1', '等级2', '等级3','等级4'],
                source: [{'等级1':32, '等级2':43, '等级3':54,'等级4':65}]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar',color:'#0000FF'},
                {type: 'bar',color:'#EEEE00'},
                {type: 'bar',color:'#FF6100'},
                {type: 'bar',color:'#FF0000'}
            ]           
        }) 
      },
      ec4(){
            echarts.init(this.$refs.chart4).setOption({
                title: {
                        text: '风险数据失控统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 43, name: '等级1'},
                                {value: 53, name: '等级2'},
                                {value: 43, name: '等级3'},
                                {value: 23, name: '等级4'}
                            ],
                            itemStyle: {
                            emphasis:{
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal:{
                                color:function(params) {
                                var colorList = [          
                                       '#0000FF', '#EEEE00', '#FF6100', '#FF0000'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                        }                                           
                     }    
                }
              ]
            })
      },
      ec5(){
        let ec = echarts.init(this.$refs.chart5);
        ec.setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['等级1', '等级2', '等级3', '等级4']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2021.05.01','2021.05.02','2021.05.03','2021.05.04','2021.05.05','2021.05.06','2021.05.07']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '等级1',
                    type: 'line',
                    // stack: '总量',
                    symbol: 'circle', 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: '#0000FF', 
                            borderColor: '#9900FF', 
                        }
                    },
                    data: [     
                        33,52,523,234,532,23,235
                        ]
                },
                {
                    name: '等级2',
                    type: 'line',
                    // stack: '总量',
                    symbol: 'circle', 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: '#EEEE00', 
                            borderColor: '#9900FF', 
                        }
                    },
                    data: [     
                        432,543,65,74,74,745
                        ]
                },
                {
                    name: '等级3',
                    type: 'line',
                    // stack: '总量',
                    symbol: 'circle', 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: '#FF6100', 
                            borderColor: '#9900FF', 
                        }
                    },
                    data: [
                        456,754,645,765,765,87,45
                        ]
                },
                {
                    name: '等级4',
                    type: 'line',
                    // stack: '总量',
                    symbol: 'circle', 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: '#FF0000', 
                            borderColor: '#9900FF', 
                        }
                    },
                    data: [
                        64,756,867,56,456,87,34
                        ]
                }
            ]
        })
      },
      ec6(){
        let ec = echarts.init(this.$refs.chart6);
        ec.setOption({
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2021.05.01','2021.05.02','2021.05.03','2021.05.04','2021.05.05','2021.05.06','2021.05.07'],
                    ['等级1', 33,52,523,234,532,23,235],
                    ['等级2', 432,543,65,74,74,745],
                    ['等级3', 456,754,645,765,765,87,45],
                    ['等级4', 64,756,867,56,456,87,34]
                ]
            },
            xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
            ],
            yAxis: [
                {gridIndex: 0},
                {gridIndex: 1}
            ],
            grid: [
                {bottom: '55%'},
                {top: '55%'}
            ],
            series: [
                // These series are in the first grid.
                {type: 'bar', seriesLayoutBy: 'row',color:'#0000FF'},
                {type: 'bar', seriesLayoutBy: 'row',color:'#EEEE00'},
                {type: 'bar', seriesLayoutBy: 'row',color:'#FF6100'},
                {type: 'bar', seriesLayoutBy: 'row',color:'#FF0000'},
                // These series are in the second grid.
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#0000FF'},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#EEEE00'},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#FF6100'},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#FF0000'}
            ]
        })
      }
    },
    mounted(){
         this.ec1();
         this.ec2();
         this.ec3();
         this.ec4();
         this.ec5();
         this.ec6();
    },
    created() {
       
    }
}
</script>

<style lang="scss" scoped>
.homepage-count {
    background: #EBEEF5;
    #main1{
        width: 100%;
        height: 400px;
        border:2px solid #DCDFE6;
    }
}


</style>