vue使用echarts

<template>
  <div class="dv">
    <div class="title">
        <el-date-picker
            class="date"
            v-model="time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[‘00:00:00‘]"
            unlink-panels
            value-format="yyyy-MM-dd">
        </el-date-picker>
            <el-button @click="findTj" type="primary" icon="el-icon-search">查询</el-button>
    </div>

    <el-row>
        <el-col :span="24">
            <br><el-divider content-position = "center">管控失控统计</el-divider><br>
        </el-col>
    </el-row>
     <el-row>
        <el-col :span="12">
            <div id="main5" ref="chart5"></div>
        </el-col>
        <el-col :span="12">
            <div id="main6" ref="chart6"></div>
        </el-col>        
    </el-row>   


        <el-row>
        <el-col :span="24">
            <el-divider content-position = "center">评估风险等级统计</el-divider><br>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <div id="main1" ref="chart1"></div>
        </el-col>
        <el-col :span="12">
            <div id="main2" ref="chart2"></div>
        </el-col>
    </el-row>  

         <el-row>
        <el-col :span="12">
            <div id="main3" ref="chart3"></div>
        </el-col>
        <el-col :span="12">
            <div id="main4" ref="chart4"></div>
        </el-col>
    </el-row>   
  </div>


      
</template>

<script>
import axios from ‘axios‘
var echarts = require("echarts");

export default {
  data(){
    return{
      time: ‘‘,
      tjdata1:[],
      tjdata2:[],
      tj3_1:[],
      tj3_2:[],
      tj3_3:[],
      tj3_4:[],
      tj3_5:[],
      tj3_6:[],
      tjdata4:[],
      tj4_1:[],
      tjdata5:[],
      tjdata6:[]
    }
  },
  mounted(){
    this.findTj();
  },
  methods: {
    findTj(){
        this.findA();
        this.findB();
        this.findC();
        this.findD();
        this.findE();
        this.findF();
    },
    findA(){
        var ts = this;
        axios.post(this.paths.baseURL+‘risk/tjpgdjA‘,
        {starttime:this.time==‘‘||this.time==null?‘‘:this.time[0],
        endtime:this.time==‘‘||this.time==null?‘‘:this.time[1]},
        {withCredentials:true}
        ).then(function(msg){
            if(msg.data.code == ‘2001‘){
            ts.$router.push({path:‘/‘})
            }else if(msg.data.code == ‘500‘){
                ts.$message.error({
                type: ‘error‘,
                message: ‘统计图表A数据信息发生异常‘
                });
            }else if(msg.data.code == ‘100‘){
                ts.tjdata1 = msg.data.info;
                ts.tj1();
            }
        }).catch(function(error){
            ts.$notify({
            type:‘error‘,
            title:‘异常提醒‘,
            message:‘统计图表A数据信息发生异常‘
            })
        })
    },
     findB(){
        var ts = this;
        axios.post(this.paths.baseURL+‘risk/tjpgdjB‘,
        {starttime:this.time==‘‘||this.time==null?‘‘:this.time[0],
        endtime:this.time==‘‘||this.time==null?‘‘:this.time[1]},
        {withCredentials:true}
        ).then(function(msg){
            if(msg.data.code == ‘2001‘){
            ts.$router.push({path:‘/‘})
            }else if(msg.data.code == ‘500‘){
                ts.$message.error({
                type: ‘error‘,
                message: ‘统计图表B数据信息发生异常‘
                });
            }else if(msg.data.code == ‘100‘){
                ts.tjdata2 = msg.data.info;
                ts.tj2();
            }
        }).catch(function(error){
            ts.$notify({
            type:‘error‘,
            title:‘异常提醒‘,
            message:‘统计图表B数据信息发生异常‘
            })
        })
    },   
    findC(){
        var ts = this;
        axios.post(this.paths.baseURL+‘risk/tjpgdjC‘,
        {starttime:this.time==‘‘||this.time==null?‘‘:this.time[0],
        endtime:this.time==‘‘||this.time==null?‘‘:this.time[1]},
        {withCredentials:true}
        ).then(function(msg){
            if(msg.data.code == ‘2001‘){
            ts.$router.push({path:‘/‘})
            }else if(msg.data.code == ‘500‘){
                ts.$message.error({
                type: ‘error‘,
                message: ‘统计图表C数据信息发生异常‘
                });
            }else if(msg.data.code == ‘100‘){
                for(var i = 0; i < msg.data.info.length; i++){
                    ts.tj3_1 = msg.data.info[i].time;
                    ts.tj3_2 = msg.data.info[i].data1;
                    ts.tj3_3 = msg.data.info[i].data2;
                    ts.tj3_4 = msg.data.info[i].data3;
                    ts.tj3_5 = msg.data.info[i].data4;
                    ts.tj3_6 = msg.data.info[i].data5;
                }
                ts.tj3();
            }
        }).catch(function(error){
            ts.$notify({
            type:‘error‘,
            title:‘异常提醒‘,
            message:‘统计图表C数据信息发生异常‘
            })
        })
    },   
    findD(){
        var ts = this;
        axios.post(this.paths.baseURL+‘risk/tjpgdjD‘,
        {starttime:this.time==‘‘||this.time==null?‘‘:this.time[0],
        endtime:this.time==‘‘||this.time==null?‘‘:this.time[1]},
        {withCredentials:true}
        ).then(function(msg){
            if(msg.data.code == ‘2001‘){
            ts.$router.push({path:‘/‘})
            }else if(msg.data.code == ‘500‘){
                ts.$message.error({
                type: ‘error‘,
                message: ‘统计图表D数据信息发生异常‘
                });
            }else if(msg.data.code == ‘100‘){
                ts.tjdata4 = msg.data.info;
                ts.tj4();
            }
        }).catch(function(error){
            ts.$notify({
            type:‘error‘,
            title:‘异常提醒‘,
            message:‘统计图表D数据信息发生异常‘
            })
        })
    },   
     findE(){
        var ts = this;
        axios.post(this.paths.baseURL+‘risk/tjskE‘,
        {starttime:this.time==‘‘||this.time==null?‘‘:this.time[0],
        endtime:this.time==‘‘||this.time==null?‘‘:this.time[1]},
        {withCredentials:true}
        ).then(function(msg){
            if(msg.data.code == ‘2001‘){
            ts.$router.push({path:‘/‘})
            }else if(msg.data.code == ‘500‘){
                ts.$message.error({
                type: ‘error‘,
                message: ‘统计图表E数据信息发生异常‘
                });
            }else if(msg.data.code == ‘100‘){
                ts.tjdata5 = msg.data.info;
                ts.tj5();
            }
        }).catch(function(error){
            ts.$notify({
            type:‘error‘,
            title:‘异常提醒‘,
            message:‘统计图表E数据信息发生异常‘
            })
        })
    },    
     findF(){
        var ts = this;
        axios.post(this.paths.baseURL+‘risk/tjskF‘,
        {starttime:this.time==‘‘||this.time==null?‘‘:this.time[0],
        endtime:this.time==‘‘||this.time==null?‘‘:this.time[1]},
        {withCredentials:true}
        ).then(function(msg){
            if(msg.data.code == ‘2001‘){
            ts.$router.push({path:‘/‘})
            }else if(msg.data.code == ‘500‘){
                ts.$message.error({
                type: ‘error‘,
                message: ‘统计图表F数据信息发生异常‘
                });
            }else if(msg.data.code == ‘100‘){
                ts.tjdata6 = msg.data.info;
                ts.tj6();
            }
        }).catch(function(error){
            ts.$notify({
            type:‘error‘,
            title:‘异常提醒‘,
            message:‘统计图表F数据信息发生异常‘
            })
        })
    },            
    tj1(){
        let ec = echarts.init(this.$refs.chart1);
        ec.setOption({
        title: {
            text: ‘‘,
            subtext: ‘‘,
            left: ‘center‘
        },
        tooltip: {
            trigger: ‘item‘,
            formatter: ‘{a} <br/>{b} : {c} ({d}%)‘
        },
        legend: {
            orient: ‘vertical‘,
            left: ‘left‘,
            data: [‘等级1‘, ‘等级2‘, ‘等级3‘, ‘等级4‘, ‘等级5‘]
        },
        series: [
            {
                name: ‘评估风险等级‘,
                type: ‘pie‘,
                radius: ‘55%‘,
                center: [‘50%‘, ‘60%‘],
                data: this.tjdata1,
                    itemStyle: {
                        emphasis:{
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                        },
                        normal:{
                            color:function(params) {
                            var colorList = [          
                                    ‘#00FF00‘, ‘#0000FF‘, ‘#EEEE00‘, ‘#FF6100‘, ‘#FF0000‘,
                                ];
                                return colorList[params.dataIndex]
                                }
                        }                                           
                    }    
            }
        ]
    })
},
    tj2(){
        let ec = echarts.init(this.$refs.chart2);
        ec.setOption({
            color: [‘#3398DB‘],
            tooltip: {
                trigger: ‘axis‘,
                axisPointer: {            
                    type: ‘shadow‘        
                }
            },
            grid: {
                left: ‘3%‘,
                right: ‘4%‘,
                bottom: ‘3%‘,
                containLabel: true
            },
            xAxis: [
                {
                    type: ‘category‘,
                    data: [‘等级1‘, ‘等级2‘, ‘等级3‘, ‘等级4‘, ‘等级5‘],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: ‘value‘
                }
            ],
            series: [
                {
                    name: ‘统计数据‘,
                    type: ‘bar‘,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = [‘#00FF00‘,‘#0000FF‘,‘#EEEE00‘,‘#FF6100‘,‘#FF0000‘];
                                return colorList[params.dataIndex]
                            }
                        }
                    },                       
                    barWidth: ‘60%‘,
                    data: this.tjdata2
                }
            ]               
        })
    },
    tj3(){
        let ec = echarts.init(this.$refs.chart3);
        ec.setOption({
            title: {
                text: ‘‘
            },
            tooltip: {
                trigger: ‘axis‘
            },
            legend: {
                data: [‘等级1‘, ‘等级2‘, ‘等级3‘, ‘等级4‘, ‘等级5‘]
            },
            grid: {
                left: ‘3%‘,
                right: ‘4%‘,
                bottom: ‘3%‘,
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: ‘category‘,
                boundaryGap: false,
                data: this.tj3_1
            },
            yAxis: {
                type: ‘value‘
            },
            series: [
                {
                    name: ‘等级1‘,
                    type: ‘line‘,
                    // stack: ‘总量‘,
                    symbol: ‘circle‘, 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: ‘#00FF00‘, 
                            borderColor: ‘#9900FF‘, 
                        }
                    },
                    data: this.tj3_2
                },
                {
                    name: ‘等级2‘,
                    type: ‘line‘,
                    // stack: ‘总量‘,
                    symbol: ‘circle‘, 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: ‘#0000FF‘, 
                            borderColor: ‘#9900FF‘, 
                        }
                    },
                    data: this.tj3_3
                },
                {
                    name: ‘等级3‘,
                    type: ‘line‘,
                    // stack: ‘总量‘,
                    symbol: ‘circle‘, 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: ‘#EEEE00‘, 
                            borderColor: ‘#9900FF‘, 
                        }
                    },
                    data: this.tj3_4
                },
                {
                    name: ‘等级4‘,
                    type: ‘line‘,
                    // stack: ‘总量‘,
                    symbol: ‘circle‘, 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: ‘#FF6100‘, 
                            borderColor: ‘#9900FF‘, 
                        }
                    },
                    data: this.tj3_5
                },
                {
                    name: ‘等级5‘,
                    type: ‘line‘,
                    // stack: ‘总量‘,
                    symbol: ‘circle‘, 
                    smooth: true,
                    symbolSize: 8, 
                    itemStyle: {
                        normal: {
                            color: ‘#FF0000‘, 
                            borderColor: ‘#9900FF‘, 
                        }
                    },
                    data: this.tj3_6
                }
            ]
        })
    },
    tj4(){
        let ec = echarts.init(this.$refs.chart4);
        ec.setOption({
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: [‘product‘, ‘等级1‘, ‘等级2‘, ‘等级3‘,‘等级4‘,‘等级5‘],
                source: this.tjdata4
            },
            xAxis: {type: ‘category‘},
            yAxis: {},
            series: [
                {type: ‘bar‘,color:‘#00FF00‘},
                {type: ‘bar‘,color:‘#0000FF‘},
                {type: ‘bar‘,color:‘#EEEE00‘},
                {type: ‘bar‘,color:‘#FF6100‘},
                {type: ‘bar‘,color:‘#FF0000‘}
            ]           
        })
    },
    tj5(){
        let ec = echarts.init(this.$refs.chart5);
        ec.setOption({
            title: {
                text: ‘‘,
                subtext: ‘‘,
                left: ‘center‘
            },
            tooltip: {
                trigger: ‘item‘,
                formatter: ‘{a} <br/>{b} : {c} ({d}%)‘
            },
            legend: {
                orient: ‘vertical‘,
                left: ‘left‘,
                data: [‘失控‘, ‘未失控‘]
            },
            series: [
                {
                    name: ‘统计‘,
                    type: ‘pie‘,
                    radius: ‘55%‘,
                    center: [‘50%‘, ‘60%‘],
                    data: this.tjdata5,
                        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]
                                    }
                            }                                           
                     }    
                }
            ]            
        })
    },
    tj6(){
        let ec = echarts.init(this.$refs.chart6);
        ec.setOption({
           legend: {},
            tooltip: {},
            dataset: {
                dimensions: [‘product‘, ‘失控‘, ‘未失控‘],
                source: this.tjdata6
            },
            xAxis: {type: ‘category‘},
            yAxis: {},
            series: [
                {type: ‘bar‘,color:‘#FF4040‘},
                {type: ‘bar‘,color:‘#63B8FF‘}
            ]           
        })
    }


  }
}
</script>

<style scoped>
.dv{
width: 98%;
margin-top: 10px;
margin-left: 1%;
}
.title{
  width: 100%;
}
#main1,#main2,#main3,#main4,#main5,#main6{
    width: 100%;
    height: 450px;
    border:1px solid #DCDFE6;
}


</style>