1)安装echarts插件
npm install echarts --save
2)在main.js中种引入，作为全局变量
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
3)在组件中使用
html代码
<div class="myChart" ref="myChart" ></div>
style代码
.myChart{width:100%;height:300px;}
mounted(){this.echart_init()}
methods:{
echart_init(){
//echart初始化
let myChart = this.$echarts.init(this.$refs.myChart);
let options={
tooltip:{
formatter:'{a}<br>{b}:{c}%'
},
toolbox:{
feature:{
restore:{},
saveAsImage:{}
}
},
series:[
{
name:'剩余率',
type:'gauge',
detail:{formatter:'{value}%'},
data:[{value:50,name:'剩余率'}]
}
]
}
}
myChart.setOption(options)
}
}
结果显示