vue中使用echarts步骤
- 安装插件 npm i echarts
- 导入 import echarts from 'echarts’
- 初始化 myEcharts=echarts.init(dom选择dom需要有宽高)
- 写配制 options={配制}
- 应用配制 myEcharts.setOption(options)
- 注意点:在数据加载完成后再使用echarts(注意数据异步问题)
echars中的数据异步问题(异步也是有队列的)
<template>
<div class="chart">
<el-card>
<ul class="chart-top">
<li class="item">
<div class="circle">{{ info.increment_users }}</div>
<div class="txt">今日新增用户</div>
</li>
<li class="item">
<div class="circle">{{ info.total_users }}</div>
<div class="txt">总用户量</div>
</li>
<li class="item">
<div class="circle">{{ info.increment_questions }}</div>
<div class="txt">新增试题</div>
</li>
<li class="item">
<div class="circle">{{ info.total_questions }}</div>
<div class="txt">总试题量</div>
</li>
<li class="item">
<div class="circle">{{ info.total_done_questions }}</div>
<div class="txt">总刷题量</div>
</li>
<li class="item">
<div class="circle">{{ info.personal_questions }}</div>
<div class="txt">人均刷题量</div>
</li>
</ul>
</el-card>
<el-card class="card">
<div class="echarts" ref="echarts"></div>
</el-card>
</div>
</template>
<script>
import { dataTitle, dataStatistics } from '@/api/chart.js'
import echarts from 'echarts'
export default {
data() {
return {
info: '',
myechart: '',
list: [],
nameArr:''
}
},
created() {
dataTitle().then((res) => {
window.console.log('chart数据:', res)
this.info = res.data.data
})
dataStatistics().then((res) => {
window.console.log('echarts:', res)
this.list = res.data.data
this.nameArr = this.list.map(item => {
return item.name
})
})
},
mounted() {
this.myechart = echarts.init(this.$refs.echarts)
this.nameArr = this.list.map(item=>{
return item.name
})
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
legend: {
orient: 'vertical',
right: 10,
data: this.nameArr,
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: this.list,
},
],
}
this.myechart.setOption(option)
},
}
</script>
<style lang="less">
.chart {
.chart-top {
display: flex;
justify-content: space-around;
align-items: center;
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
border: 2px solid green;
}
.txt {
text-align: center;
}
}
.echarts {
height: 400px;
}
.card {
margin-top: 20px;
}
}
</style>
- 以上写法是无法显示图表的,因为我们不能保证在echarts渲染之前已经获取到了数据。
- 异步也是有队列的,渲染优先级高比ajax调用要快,相当于VIP,它是可以插队的
在数据完成之后再使用echarts就不会有问题了
<template>
<div class="chart">
<el-card>
<ul class="chart-top">
<li class="item">
<div class="circle">{{ info.increment_users }}</div>
<div class="txt">今日新增用户</div>
</li>
<li class="item">
<div class="circle">{{ info.total_users }}</div>
<div class="txt">总用户量</div>
</li>
<li class="item">
<div class="circle">{{ info.increment_questions }}</div>
<div class="txt">新增试题</div>
</li>
<li class="item">
<div class="circle">{{ info.total_questions }}</div>
<div class="txt">总试题量</div>
</li>
<li class="item">
<div class="circle">{{ info.total_done_questions }}</div>
<div class="txt">总刷题量</div>
</li>
<li class="item">
<div class="circle">{{ info.personal_questions }}</div>
<div class="txt">人均刷题量</div>
</li>
</ul>
</el-card>
<el-card class="card">
<div class="echarts" ref="echarts"></div>
</el-card>
</div>
</template>
<script>
import { dataTitle, dataStatistics } from '@/api/chart.js'
import echarts from 'echarts'
export default {
data() {
return {
info: '',
myechart: '',
list: [],
nameArr:''
}
},
created() {
dataTitle().then((res) => {
window.console.log('chart数据:', res)
this.info = res.data.data
})
dataStatistics().then((res) => {
window.console.log('echarts:', res)
this.list = res.data.data
this.nameArr= this.list.map(item=>{
return item.name
})
this.myEcharts = echarts.init(this.$refs.echarts)
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
data: this.nameArr
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.list
}
]
}
this.myEcharts.setOption(option)
window.console.log(this.nameArr)
})
},
mounted() {
},
}
</script>
<style lang="less">
.chart {
.chart-top {
display: flex;
justify-content: space-around;
align-items: center;
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
border: 2px solid green;
}
.txt {
text-align: center;
}
}
.echarts {
height: 400px;
}
.card {
margin-top: 20px;
}
}
</style>