vue中使用echarts的示例
程序员文章站
2022-06-05 13:45:55
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的资料请关注其它相关文章！
推荐阅读
-
php中的mongodb select常用操作代码示例，mongodbselect
-
在现时中小型网站的实际开发中，连接MySQL数据库主要使用哪种计算
-
php中关于魔法函数以及魔法常量的使用详解
-
Mysql悲观锁和乐观锁的使用示例
-
vue如何在外部js 中 使用this
-
使用Python中PDB模块中的命令来调试Python代码的教程
-
PHP stream_context_create()函数的使用示例，createfile函数
-
JavaScript中的apply()方法和call()方法使用介绍_javascript技巧
-
Vue中Quill富文本编辑器的使用教程
-
vue3.0 CLI - 3.2 路由的初级使用教程