vue中使用echarts的示例


Posted in Vue.js onJanuary 03, 2021

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>

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 //默认显示柱状图
  },
  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>

6:效果图

vue中使用echarts的示例

以上就是vue中使用echarts的步骤的详细内容,更多关于vue 使用echarts的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 #Vue.js
vue中activated的用法
Jan 03 #Vue.js
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
You might like
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php实现websocket实时消息推送
2018/03/30 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
document.all与WEB标准
2020/05/13 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
深入理解python中的atexit模块
2017/03/07 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
linux面试相关问题
2013/04/28 面试题
运动会跳远广播稿5篇
2014/09/17 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
跳高加油稿
2015/07/21 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
python 自动刷新网页的两种方法
2021/04/20 Python