vue中使用echarts的示例

import echarts from 'echarts';

<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>

<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>