导入echarts
- npm i echarts -S
-S表示上线环境,与–save一样
- 在main.js里加入两句话,全局引入
import * as echarts from "echarts";
Vue.prototype.$echarts=echarts;
使用
- 在vue中一个 已指定过宽高 的元素上进行挂载
- 将官方示例中的option拿来用,修改数据的时候修改里面的data即可
<template>
<div id="echart"></div>
</template>
<script>
export default {
data() {
return {
option: {
title: {
text: "XX学校的专业分布情况",
// subtext: "Fake Data",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "人数",
type: "pie",
radius: "70%",
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)",
},
},
},
],
},
chart: "",
};
},
mounted() {
this.show();
},
methods: {
show() {
this.$axios
.get("/echarts")
.then((res) => {
//获取后端数据,后端返回数据也是name,value
this.option.series[0].data = res.data;
this.chart = this.$echarts.init(document.getElementById("echart"));
this.chart.setOption(this.option);
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style>
#echart {
width: 100%;
height: 400px;
}
</style>