vue中使用echarts的示例
程序员文章站
2023-02-19 17:50:31
1:首先要用到2:在vue中安装这个依赖3:引入要用的页面import echarts from 'echarts';4:然后初始化
1:首先要用到
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的资料请关注其它相关文章!
上一篇: 用批处理设置IP安全策略的代码
下一篇: 一个简单的合并txt的批处理