快捷導(dǎo)航

vue中使用echarts的示例

更新時(shí)間：2021年01月03日 10:35:00 作者：Myzhuo

這篇文章主要介紹了vue中使用echarts的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

1:首先要用到echarts

2：在vue中安裝這個(gè)依賴

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" >統(tǒng)計(jì)更新及時(shí)率</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: ['廣州', '深圳', '珠海', '汕頭', '佛山', '韶關(guān)', '湛江', '肇慶', '江門', '茂名', '惠州', '梅州', '汕尾', '河源', '陽江', '清遠(yuǎn)', '東莞', '中山', '潮州', '揭陽', '云浮'],
   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:'及時(shí)率', //圖表名稱
   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>

5：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 //默認(rèn)顯示柱狀圖
  },
  ss:{
   type:Object,
   default:()=>{}
  },
  Maxwidths:{
   type:String, //整個(gè)容器的寬度
   default:''
  },
  MinHeight:{
   type:String, //最小高度
   default:''
  },
  echartsColor:{ //圖像的顏色
   type:String,
   default:''
  },
  legendWAndH:{ //圖例的寬高位置等
   type:Array,
   default:()=>[15,15,18]
  },
  legendColor:{
   type:String,
   default:()=>'' //圖例的顏色，如果不加則默認(rèn)是圖形顏色
  },
  xAxisData:{ //圖形X軸的數(shù)據(jù)
   type:Array,
   default:()=>[]
  },
  YAxisName:{ //圖形y軸的名稱設(shè)置 數(shù)組或者百分比
   type:Object,
   default:()=>{}
   // default:{name:'111',formatter: '{value}%'}
  },
  seriesData:{
   type:Array, // 顯示圖像的數(shù)據(jù) 占據(jù)的多少
   default:()=>[]
  },
  SerNameValue:{ //圖形數(shù)據(jù)分析的占據(jù)的位置 left right top bottom 和顯示的顏色
   type:Object,
   default:()=>{}
   // default:{position:top,color: '#3398DB',formatter: '{c}%'}
  },
  echartsName:{ //圖形的名稱 
   type:String,
   default:()=>'柱狀圖'
  },
  XorYatter:{
   type:Array,
   default:()=>['{value}%','{c}%'] //默認(rèn)為百分比 
  },
  //雷達(dá)圖的參數(shù)
  gWidth:{  //寬度默認(rèn)為百分百
   type:String,
   default:()=>'100' 
  },
  gHeight:{
   type:String,
   default:()=> '90' //高度默認(rèn)為90
  },
  gridValue:{  /// 雷達(dá)圖的名稱等等 格式[{text:11}]
   type:Array,
   default:()=>[]
  },
  gridraius:{   //圓圈大小
   type:Number,
   default:()=> 80 //默認(rèn)為80 
  },
  gridTextStyle:{  //名稱的默認(rèn)顏色 text 
   type:String,
   default:()=>'#6bbcef'
  },
  symbolSize:{  // 圓點(diǎn)的大小 
   type:Number,
   default:()=> 10
  },
  SerValue:{
   type:Array,
   default:()=>[] //網(wǎng)格里面對(duì)應(yīng)的數(shù)值
  },
  serVcolor:{
   type:String,
   default:()=> '#1bbdf8' //數(shù)值的默認(rèn)顏色 SerValue的
  },
  lineStyleColor:{ 
   type:String,
   default:()=> '#1cbdf8' //連接線的顏色
  },
  itemStyleColor:{
   type:String,
   default:()=> '#1cbdf8' //連接圓點(diǎn)的默認(rèn)顏色
  },
  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軸數(shù)據(jù)
    },
    yAxis:{
     name:'', //名稱
     axisLabel:{
      formatter:'' //是否顯示百分比
     }
    },
    series:[
     {
      name:'',
      type:'bar', //類型
      data:[], //X軸顯示的數(shù)據(jù)
      label:{
       normal:{
        show:true,
        position:'',
        color:'',
        formatter:''
       }
      }
     }
    ]
   },
   
   options:{
    radar:[
     {
      indicator:[], // 顯示的名稱的字段只能是text ps:[{text:'aaa'}]
      radius:0, //園角
      name:{
       textStyle:{
        color:'' //顏色
       }
      },
      symbolSize:0, //圓點(diǎn)大小
     }
    ],
    series:[
     {
      type:'radar',
      data:[{
       value:[], //對(duì)應(yīng)的數(shù)據(jù)
       label:{
        normal:{
         show:true,
         color:'', //選中的時(shí)候顏色
         formatter:(params)=>{
          return params.value;  
         }
        }
       },
       //連接線顏色
       lineStyle:{
        color:'',
       },
       // 連接圓點(diǎn)顏色
       itemStyle:{
        color:''
       },
       // 圖表背景網(wǎng)格的顏色
       areaStyle:{
        normal:{
         opacity:0.9,
         color:'' 
        }
       }
      }]
     }
    ]
   }
  }
 },
 created(){
  const _this = this;
  console.log(_this.Isgrid)
  console.log(this.ECharts)
  if( _this.Isgrid ){
   _this.onloads() //初始化數(shù)據(jù)
  }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>

6：效果圖