//vue的原型上挂载echarts
//在main.js文件中
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
//在组件template中
<div class="content">
<div class="w100 h100" ref="echarts1"></div>
</div>
export default{
data(){
return{
echarts1: null
}
}
computed:{
option1() {
return {
color: ['#1CD1BD', '#3795FF'],
tooltip: {
trigger: 'item',
},
legend: {
icon: 'rect',
itemWidth: 14,
orient: 'vertical',
right: '22%',
top: '40%',
formatter: (name) => {
const data = this.option1.series[0].data;
let tarValue = 0;
let total = 0;
for (const item of data) {
total += item.value;
if (item.name === name) tarValue = item.value;
}
let p = 0;
if (total) {
const val = (tarValue / total) * 100;
p = this.$fixed(val);
}
return `${name} ${p}%`;
},
textStyle: {
color: this.fontColor,
},
},
series: [
{
name: '统计',
type: 'pie',
radius: '50%',
center: ['50%', '45%'],
label: {
show: false,
},
data: [
{ value: 15, name: '已检' },
{ value: 10, name: '漏检' },
],
},
],
};
},
},
mounted() {
//this.$echarts.init是vue原型中$echarts提供的方法,接收三个参数:dom,theme,opts
//this.$refs.echarts1是参数1容器
this.echarts1 = this.$echarts.init(this.$refs.echarts1);
//设置配置项
this.echarts1.setOption(this.option1);
//自适应
window.addEventListener('resize', () => {
this.resize();
});
}
methods:{
//自适应
resize() {
if (this.echarts1) this.echarts1.resize()
},
}
}