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表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue3不同环境下实现配置代理
May 25 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
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
js遍历td tr等html元素
2012/12/13 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
django列表筛选功能的实现代码
2020/03/27 Python
python实现粒子群算法
2020/10/15 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
高中语文教学反思
2014/01/16 职场文书
关于期中考试的反思
2014/02/02 职场文书
工作证明格式及范本
2014/09/12 职场文书
奖金申请报告模板
2015/05/15 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python