vue中使用echarts的示例
阿新 • • 發佈：2021-01-03
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,80,86,56,8,4,8],// data: [87.9,58,67,72,54,74,59,64,75,68,47,63,89,78,82,40,73,80],},name:'及時率',//圖表名稱
SerNameValue:{
position:'top',color:'#3398DB',//
},// color:'' //圖表顏色
color:'#3398DB' //圖表顏色
},activeList:[
{
name:'本週',is_active:true,{
name:'本月',is_active:false,{
name:'本年',]
}
},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,.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,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,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,//選中的時候顏色
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的資料請關注我們其它相關文章！