站长资源网络编程
vue中使用echarts的示例
简介1:首先要用到echarts2：在vue中安装这个依赖3：引入要用的页面import echarts from 'echarts';4：然后初始化
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"
@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 == '' "text-align: center">
以上就是vue中使用echarts的步骤的详细内容，更多关于vue 使用echarts的资料请关注其它相关文章！