vue+echarts基本图形使用

1.安装:cnpm install echarts --save
2.页面引入:import echarts from “echarts”;
3.基本格式:

<template>
<div>
<div id="main" style="width: 600px;height: 400px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "home",
data() {
return {
charts: "",
opinion: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
opinionData: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
]
};
},
methods: {
drawPie(id) {
this.charts = echarts.init(document.getElementById("main"));
this.charts.setOption({

//这里完整的复制粘贴 echartsAPI   就行

});
}
},
mounted() {
this.$nextTick(function() {
this.drawPie();
});
}
};
</script>>

完整代码如下

<template>
<div>
<div id="main" style="width: 600px;height: 400px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "home",
data() {
return {
charts: "",
opinion: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
opinionData: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
]
};
},
methods: {
drawPie() {
this.charts = echarts.init(document.getElementById("main"));
this.charts.setOption({
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:this.opinionData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
},
mounted() {
this.$nextTick(function() {
this.drawPie();
});
}
};
</script>>

• 点赞
• 收藏
• 分享
• 文章举报