安装Echats
npm install echarts --save
或
yarn add echarts --save
使用
- 在main.js中引入Echarts
// 引入Echarts
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)
或
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
- 在模板中加入挂载Echarts的DOM节点
<template>
<div id="app" class="app">
<div ref="echarts" id="echarts"></div>
</div>
</template>
<style lang="less">
#echarts {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
- 在 methods 中添加 Echarts 调用方法
methods: {
echartsMit() {
let dom = this.$refs.echarts;
let myChart = this.$echarts.init(dom);
let option = {
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
data: [
{
value: 235,
name: "视频广告",
},
{
value: 274,
name: "联盟广告",
},
{
value: 310,
name: "邮件营销",
},
{
value: 335,
name: "直接访问",
},
{
value: 400,
name: "搜索引擎",
},
],
},
],
};
myChart.setOption(option);
},
},
- 在项目页面挂载的时候,调用生成图表的方法
mounted() {
this.echartsMit();
},
生成效果图如下