vue中使用echarts的示例

1:首先要用到echarts

2：在vue中安装这个依赖

3：引入要用的页面

import echarts from ’echarts’;

4：然后初始化

<template> <a-col span='12' ref='getwidth' :style='’display:’+ model'> <div > <div class='layui-card'> <div class='layui-card-header panel-title'> <span >统计更新及时率</span> <a @click='onHide'><a-icon type='close' /> </a> <div style='color: #b0b0b0;'><span v-for='(item,index) in activeList' :key='index' : @click.stop='Onactive(item,index)' 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 : ></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> <!-- --> <div : ></div> <!-- <div v-if='Isgrid == false' : ></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的资料请关注好吧啦网其它相关文章！