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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
在PHP中使用redis
2013/11/04 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP检测用户语言的方法
2015/06/15 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
深入理解vue Render函数
2017/07/19 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python3 socket同步通信简单示例
2017/06/07 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
面试后的感谢信范文
2014/02/01 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
父亲节活动策划方案
2014/08/24 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android