首先,确保你已经安装了ECharts的Vue插件。如果还没有安装,可以通过以下命令进行安装和引入:
npm install echarts vue-echarts --save
import * as echarts from 'echarts';
1.设置一个渲染盒子
<div ref="chart" style="width: 500px;height: 500px;"></div>
Vue 中推荐使用
ref
而不是id
,特别是当你需要在组件内部或父组件中访问和操作 DOM 元素或子组件时。ref
提供了一种更加 Vue 特有的、面向组件的解决方案,使得代码更加清晰和易于维护。而id
更多用于常规的 DOM 操作和 CSS 目的,不特别推荐在 Vue 应用程序中用作组件间通信或动态操作的主要手段。
2.设置js
drawChart() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.chart);
// 绘制图表
myChart.setOption({
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
3.效果