vue 中使用echarts

vue中使用echarts步骤

1. 安装插件 npm i echarts
2. 导入 import echarts from 'echarts’
3. 初始化 myEcharts=echarts.init(dom选择dom需要有宽高)
4. 写配制 options={配制}
5. 应用配制 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
    })
    // echarts数据
		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)
    // window.console.log();
	},
}
</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
    })
    // echarts数据
		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>