一、NPM下载Echarts
npm install echarts -S
二、引入Echarts组件库
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d39113cda1594880af4bc0c777e9306a.png)
三、使用Echarts
<template>
<el-row :gutter="12">
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>基础仪表盘</span>
</div>
<div id="basic_dashboard" style="width: 100%;height: 400px;"></div>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default {
created() {
this.$nextTick(() => {
this.basic_dashboard_type()
})
},
data() {
return {}
},
methods: {
basic_dashboard_type() {
var chartDom = document.getElementById('basic_dashboard');
var myChart = this.$echarts.init(chartDom);
var option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
detail: {
formatter: '{value}'
},
data: [
{
value: 50,
name: 'SCORE'
}
]
}
]
}
myChart.setOption(option);
}
}
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/868725422c1c469cb91c129c014dc490.png)