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中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
网页常用特效代码整理
2006/06/23 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
机器学习10大经典算法详解
2017/12/07 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
对python中Json与object转化的方法详解
2018/12/31 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python实例化对象的具体方法
2020/06/17 Python
python脚本第一行如何写
2020/08/30 Python
10个顶级Python实用库推荐
2021/03/04 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
员工考核管理制度
2014/02/02 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
高中学生期末评语
2014/04/25 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript