可以通过安装Echarts官方提供的Vue-ECharts插件来方便地在Vue中使用Echarts。具体步骤如下:
首先安装Vue-ECharts插件:Copy
npm install vue-echarts echarts --save
然后在Vue组件中引入Vue-ECharts并注册组件:jsonCopy
<template>
<div>
<v-chart :options="options" />
</div>
</template>
<script>
import { VueECharts } from 'vue-echarts'
import 'echarts/lib/chart/pie'
export default {
components: {
'v-chart': VueECharts
},
data() {
return {
options: {
title: { text: '环形图示例' },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
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: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
}
}
}
}
</script>