vue中使用echarts

1:首先要用到echarts

2：在vue中安装这个依赖

3：引入要用的页面

import echarts from 'echarts';

4：然后初始化

<template>
   <a-col span="12" style="min-height:343px;width:100%;background:#fff" ref="getwidth" :style="'display:'+ model">
     <div class="layui-col-md6 tjgx-panel"  >
                    <div class="layui-card">
                        <div class="layui-card-header panel-title">
              <span class="left-text" >统计更新及时率</span>
                            <a class="close-link right-text"  @click="onHide">
                                <a-icon type="close"  style="color: #b0b0b0;"  />
                            </a>
                            <div class="right-text" style="color: #b0b0b0;">
                                <span v-for="(item,index) in activeList" :key="index" 
                                :class="item.is_active?'acitive':''"
                                @click.stop="Onactive(item,index)"
                                 class="week " ref="alist">{{item.name}}</span>
                                <!-- <span class="month">本月</span>
                                <span class="year">本年</span> -->
                            </div>
                        </div>
                        <div class="layui-card-body common-height">
                            <echartsModal
                                :Maxwidths ="widths"
                                :MinHeight="MHeight"
                                :echartsColor="xAxis.color"
                                :legendWAndH="legendWAndH"
                                :xAxisData="xAxis.data"
                                :seriesData="xAxis.x.data"
                                :SerNameValue="xAxis.SerNameValue"
                                :echartsName="xAxis.name"
                            />
                            <!-- <div class="tjgx-con" id="container" style="min-height:280px;" :style="'width:'+widths+'px'" ></div> -->
                        </div>
                    </div>
                </div>
   </a-col>
</template>
<script>
import echartsModal  from '../../viewModal/Echarts'
// import echarts from 'echarts';
export default {
 components:{
     echartsModal
    },
  data(){
    return{
      model:'block',
      widths:'',
      legendWAndH:[15,15,18],
      MHeight:'',
      xAxis:{
         data: ['广州', '深圳', '珠海', '汕头', '佛山', '韶关', '湛江', '肇庆', '江门', '茂名', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
         x:{
            data: [7.9, 2, 6, 5, 7, 5, 7, 80, 6, 7, 6, 86, 6, 56, 7, 6, 8, 5, 4, 7, 8],
            // data: [87.9, 58, 67, 56, 72, 54, 74, 59, 64, 75, 68, 47, 63, 89, 78, 64, 82, 56, 40, 73, 80],
          },
          name:'及时率',  //图表名称
          SerNameValue:{
          position:'top',
          color:'#3398DB',  //
           },
        //    color:''  //图表颜色
           color:'#3398DB'  //图表颜色
      },
      activeList:[
          {
              name:'本周',
              is_active:true,
          },
           {
              name:'本月',
              is_active:false,
          },
           {
              name:'本年',
              is_active:false,
          },
      ]
    }
  },
  mounted(){
    this.widths = String((this.$refs.getwidth.$el.clientWidth) - 30) ;  //画布宽度
    this.MHeight =String((this.$refs.getwidth.$el.clientHeight) - 68)   //画布高度
  },
  methods:{
    onHide(){
      const _this = this;
      _this.model = 'none';
      _this.$emit('isHide', _this.model,0)
    },
    Onactive(val,index){
        const _this = this
        let Alist = _this.activeList
        let Length = _this.$refs.alist.length
        let axis = _this.xAxis
        let sumber = 0;
        let  arr = [];
        for( let t = 0; t < Length; t++ ){
            Alist[t].is_active = false;
        } 
        if( val.name == '本周' ){
            sumber = 1
        }else if ( val.name =='本月' ){
            sumber  = 1
        }else if( val.name == '本年' ){
            sumber  = 1
        }
        Alist[index].is_active = true;
         axis.x.data.map(item=>{
            item += sumber  
             arr.push(item)
         })
         axis.x.data = arr
         _this.xAxis = axis
         _this.activeList = Alist
    }
  }
}
</script>
<style scoped>
/* .week{
    padding: 0 1%;
} */
.layui-card-header {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #333;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
}
.common-height {
    height: 280px;
}
.layui-card {
    margin-bottom: 15px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.layui-card-body {
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
}
            .layui-col-md20 {
                width: 20%;
            }
            
            .time-city-panel {
                display: flex !important;
                justify-content: space-between;
                align-items: center;
            }
            
            .time-city-panel img {
                width: 73px !important;
                height: 61px !important;
                padding: 0 10px 10px !important;
            }
            
            .time-city-panel .one-row,
            .time-city-panel .two-row {
                padding: 0 10px;
            }
            
            .time-city-panel .one-row p:first-of-type {
                font-size: 18px;
                font-weight: bold;
                padding: 0 0 10px;
                text-align: left;
            }
            
            .time-city-panel .two-row p:first-of-type {
                padding: 0 0 10px;
                color: #96acbc;
                font-weight: bold;
                line-height: 22px;
            }
            
            .db_img {
                width: 20px;
                height: 22px;
                margin: 0 5px;
                vertical-align: middle;
            }
            
            .panel-title .left-text {
                padding-left: 10px;
                border-left: 8px solid #239fe6;
       font-size: 20px;
                display: inline-block;
                height: 30px;
                line-height: 30px;
                vertical-align: middle;
            }
            
            .panel-title .right-text {
                float: right;
                color: #239fe6;
                font-size: 14px;
                margin-left: 15px;
            }
     
            /*筒高度*/
            
            .common-height {
                height: 280px;
            }
            
            .text-overflow {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .tjgx-panel .right-text span,
            .ajtj-panel .right-text span {
                display: inline-block;
                color: #b0b0b0;
            }
            
            .tjgx-panel .right-text span.acitive,
            .ajtj-panel .right-text span.acitive {
                color: #239fe6;
            }
            
            #chart,
            #ajtjChart {
                width: 100%;
                height: 90%;
            }
         
         
</style>

4 ：Echarts 组件 

<template>
    <div>
        <!-- style="min-height:280px;" -->
        <div  id="Echarts"    :style="'width:'+Maxwidths+'px;min-height:'+MinHeight+'px'" ></div>
        <!-- <div  id="Echarts"   v-if="Isgrid == false" :style="'width:'+Maxwidths+'px;height:'+MinHeight+'px'" ></div> -->
    </div>
</template>
<script>
import echarts from 'echarts';
import { number } from 'echarts/lib/export';
export default {
    props:{
        Isgrid:{
            type:Boolean,
            default:()=> true    //默认显示柱状图
        },
        ss:{
            type:Object,
            default:()=>{}
        },
        Maxwidths:{
            type:String, //整个容器的宽度
            default:''
        },
        MinHeight:{
            type:String,  //最小高度
            default:''
        },
        echartsColor:{   //图像的颜色
            type:String,
            default:''
        },
        legendWAndH:{   //图例的宽高位置等
            type:Array,
            default:()=>[15,15,18]
        },
        legendColor:{
            type:String,
            default:()=>''   //图例的颜色，如果不加则默认是图形颜色
        },
        xAxisData:{    //图形X轴的数据
            type:Array,
            default:()=>[]
        },
        YAxisName:{    //图形y轴的名称设置 数组或者百分比
            type:Object,
            default:()=>{}
            // default:{name:'111',formatter: '{value}%'}
        },
        seriesData:{
            type:Array,   // 显示图像的数据 占据的多少
            default:()=>[]
        },
        SerNameValue:{   //图形数据分析的占据的位置 left right top bottom  和显示的颜色
            type:Object,
            default:()=>{}
            // default:{position:top,color: '#3398DB',formatter: '{c}%'}
        },
        echartsName:{  //图形的名称  
            type:String,
            default:()=>'柱状图'
        },
        XorYatter:{
            type:Array,
            default:()=>['{value}%','{c}%']  //默认为百分比 
        },
        //雷达图的参数
        gWidth:{       //宽度默认为百分百
            type:String,
            default:()=>'100'   
        },
        gHeight:{
            type:String,
            default:()=> '90'  //高度默认为90
        },
        gridValue:{     /// 雷达图的名称等等   格式[{text:11}]
            type:Array,
            default:()=>[]
        },
        gridraius:{         //圆圈大小
            type:Number,
            default:()=> 80 //默认为80  
        },
        gridTextStyle:{     //名称的默认颜色 text  
            type:String,
            default:()=>'#6bbcef'
        },
        symbolSize:{     // 圆点的大小 
            type:Number,
            default:()=> 10
        },
        SerValue:{
            type:Array,
            default:()=>[]  //网格里面对应的数值
        },
        serVcolor:{
            type:String,
            default:()=> '#1bbdf8'   //数值的默认颜色  SerValue的
        },
        lineStyleColor:{  
            type:String,
            default:()=> '#1cbdf8'   //连接线的颜色
        },
        itemStyleColor:{
            type:String,
            default:()=> '#1cbdf8'  //连接圆点的默认颜色
        },
        BgColor:{
            type:String,
            default:()=> 'rgba(189, 230, 249, 0.5)'
        }
    },
    data(){
        return{
            option:{
                color:[],  //图例颜色
                legend:{
                    data:[],  //图例名称
                    itemWidth:0, //图例的宽度
                    itemHeight:0, //图例的高度
                    right:0,
                    textStyle:{
                        color:''
                    }
                },
                xAxis:{
                    data:[]  //x轴数据
                },
                yAxis:{
                    name:'',  //名称
                    axisLabel:{
                        formatter:''  //是否显示百分比
                    }
                },
                series:[
                    {
                        name:'',
                        type:'bar',  //类型
                        data:[],  //X轴显示的数据
                        label:{
                            normal:{
                                show:true,
                                position:'',
                                color:'',
                                formatter:''
                            }
                        }
                    }
                ]
            },
            
            options:{
                radar:[
                    {
                        indicator:[],  // 显示的名称的字段只能是text ps:[{text:'aaa'}]
                        radius:0,  //园角
                        name:{
                            textStyle:{
                                color:''  //颜色
                            }
                        },
                        symbolSize:0, //圆点大小
                    }
                ],
                series:[
                    {
                        type:'radar',
                        data:[{
                            value:[], //对应的数据
                            label:{
                                normal:{
                                    show:true,
                                    color:'', //选中的时候颜色
                                    formatter:(params)=>{
                                       return params.value;     
                                    }
                                }
                            },
                            //连接线颜色
                            lineStyle:{
                                color:'',
                            },
                            // 连接圆点颜色
                            itemStyle:{
                                color:''
                            },
                            // 图表背景网格的颜色
                            areaStyle:{
                                normal:{
                                    opacity:0.9,
                                    color:''  
                                }
                            }
                        }]
                    }
                ]
            }
        }
    },
    created(){
        const  _this  = this;
        console.log(_this.Isgrid)
        console.log(this.ECharts)
        if( _this.Isgrid ){
            _this.onloads()   //初始化数据
        }else{
            _this.isInitGrid()
        }
    },
    mounted(){
        const _this = this;
        if(_this.ss){
            _this.option = {}
            _this.option = _this.ss;
        }
        setTimeout(()=>{
            _this.$nextTick(()=>{
                let Echarts = echarts.init(document.getElementById('Echarts'))
                    Echarts.setOption(_this.option,true)
            })
        },500)
    },
    watch:{
        seriesData(val){
            this.seriesData   = val
            this.onloads(true)
        }   
    },
    methods:{
        onloads(is){
           const _this = this;
           let op = _this.option     
           op.color = [_this.echartsColor]
           op.legend.data = [_this.echartsName]
           op.legend.itemWidth =_this.legendWAndH[0]
           op.legend.itemHeight =_this.legendWAndH[1]
           op.legend.right =_this.legendWAndH[2]
           op.legend.textStyle.color =_this.legendColor == '' ? _this.echartsColor:''
           op.xAxis.data = _this.xAxisData
           op.yAxis.name = _this.echartsName
           op.yAxis.axisLabel.formatter = _this.XorYatter[0]
           op.series[0].data = _this.seriesData
           op.series[0].name = _this.echartsName
           op.series[0].label.normal.position = _this.SerNameValue.position
           op.series[0].label.normal.formatter = _this.XorYatter[1]
           op.series[0].label.normal.color = _this.SerNameValue.color == '' ? _this.echartsColor:_this.SerNameValue.color
            _this.option = op;
            if( is ){
              _this.$nextTick(()=>{
                let Echarts = echarts.init(document.getElementById('Echarts'))
                    Echarts.setOption(op,true)
            })
            }

        },
        isInitGrid(){
            const  _this = this;
            let g  = _this.options;
            g.radar[0].indicator = _this.gridValue
            g.radar[0].radius = _this.gridraius
            g.radar[0].name.textStyle.color = _this.gridTextStyle
            g.radar[0].symbolSize = _this.symbolSize
            g.series[0].data[0].value = _this.SerValue
            g.series[0].data[0].label.normal.color = _this.serVcolor
            g.series[0].data[0].lineStyle.color = _this.lineStyleColor
            g.series[0].data[0].itemStyle.color = _this.itemStyleColor
            g.series[0].data[0].areaStyle.normal.color = _this.BgColor
        }
    }
}
</script>

5：效果图

 

 

6：有需要的可以拿去玩玩，雷达柱状图都可以做